twitter aoi

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+src/constants.js

package.json

@@ -10,6 +10,8 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "dotenv": "^16.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",

src/App.js

@@ -9,6 +9,7 @@ import Publications from "./Components/Publications";
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
 import PublicationRoute from "./Components/PublicationRoute";
 import News from "./Components/News";
+import TeamRooute from "./Components/TeamRoute";
 
 const darkTheme = createTheme({
   palette: {
@@ -31,6 +32,7 @@ const AppRoutes = () => {
   let routes = useRoutes([
     { path: "/", element: <Home /> },
     { path: "/publications", element: <PublicationRoute /> },
+    { path: "/team", element: <TeamRooute /> },
     // ...
   ]);
   return routes;

src/Components/Navbar.js

@@ -66,6 +66,9 @@ const Navlinks = ({ dir, sp, setOpen }) => {
           <li>
             <a href="/">Discussions</a>
           </li>
+          <li>
+            <a href="/team">Team</a>
+          </li>
         </ul>
       </li>
     </Stack>

src/Components/News.js

@@ -1,9 +1,42 @@
-import React from 'react'
+import React, {useState} from "react";
+import { TWITTER_API } from "../constants";
 
 const News = () => {
+  var axios = require("axios");
+  const [tweets, setTweets] = useState([]);
+
+  var config = {
+    method: "get",
+    url: "https://thingproxy.freeboard.io/fetch/https://api.twitter.com/2/users/1204853272583892992/tweets?exclude=replies&tweet.fields=created_at",
+    headers: {
+      Authorization: TWITTER_API},
+  };
+
+  axios(config)
+    .then(function (response) {
+      setTweets(response.data.data);
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+
   return (
-    <div className='news-wrapper'><h2>POLYPHY UPDATES</h2></div>
-  )
-}
+    <div className="news-wrapper">
+      <h2>POLYPHY UPDATES</h2>
+      {tweets.slice(0, 5).map((x) => {
+        return (
+          <a href={`https://twitter.com/polyphy/status/${x.id}`} key={x.id}>
+            <div className="tweet">
+              <p>{x.text.replace(/\bhttps\S+/gi, "")}</p>
+              <span>
+                {new Date(x.created_at).toLocaleString().split(",")[0]}
+              </span>
+            </div>
+          </a>
+        );
+      })}
+    </div>
+  );
+};
 
-export default News
+export default News;

src/Components/TeamRoute.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const TeamRooute = () => {
+  return (
+    <div className="team-route-wrapper">
+      <h1>Minds behind PolyPhy</h1>
+    </div>
+  );
+};
+
+export default TeamRooute;

src/Components/tempTweets.js

@@ -0,0 +1,52 @@
+export const tempTweets = [
+    {
+        "created_at": "2022-07-05T04:10:09.000Z",
+        "id": "1544171751642472451",
+        "text": "@cooperrc84 @UConn A video recording of Ryan’s presentation is now available on the NumPy YouTube channel: https://t.co/iJCAoi2WgW https://t.co/505Nmp7kPi"
+    },
+    {
+        "created_at": "2022-06-30T13:07:54.000Z",
+        "id": "1542495139771437057",
+        "text": "TODAY Join us for the NumPy Newcomers Hour at 4 pm UTC. @cooperrc84 from @UConn will share how he uses NumPy in his Engineering classes.\nFor details visit: https://t.co/HVuZEbS36P https://t.co/Ipc5bTEYw4"
+    },
+    {
+        "created_at": "2022-06-23T14:28:19.000Z",
+        "id": "1539978665278177280",
+        "text": "NumPy 1.23.0 is released 🎉 \nHighlights include: a much faster `loadtxt`, DLPack now exposed in the Python API, improvements to f2py, and improvements to promotion and comparisons of structured dtypes. \n\nA big thank you to all 150+ contributors!"
+    },
+    {
+        "created_at": "2022-06-05T18:17:04.000Z",
+        "id": "1533513247730683905",
+        "text": "A video recording of Sebastian Berg’s presentation about deprecations in NumPy for the NumPy Newcomers’ Hour is now available on our YouTube channel. https://t.co/b81G9iUvWw"
+    },
+    {
+        "created_at": "2022-05-02T18:47:28.000Z",
+        "id": "1521199710660448257",
+        "text": "RT @scientific_py: Hello World! 😊\n\nWatch our first community onboarding video👀and learn some reasons for contributing to Scientific Python!…"
+    },
+    {
+        "created_at": "2022-04-13T13:51:10.000Z",
+        "id": "1514239775976435718",
+        "text": "Interested in participating in a DEI research study (https://t.co/dmfsaJ3IJX)? @NumFOCUS, our fiscal sponsor, would love to talk to you! Complete this brief “Participant Interest” form and a research team member will be in touch https://t.co/8hjD5UQf4q"
+    },
+    {
+        "created_at": "2022-04-10T02:40:24.000Z",
+        "id": "1512983809188315142",
+        "text": "A video recording of the latest Newcomers Hour with Mars Lee (@marsbarlee) has been posted on the NumPy YouTube channel: https://t.co/0FN5fuF4Kt"
+    },
+    {
+        "created_at": "2022-04-07T16:03:26.000Z",
+        "id": "1512098734670290955",
+        "text": "The NumPy Newcomers Hour is starting now.\nMars Lee will talk about her work on making NumPy more accessible to involve more people with disabilities in data science.\n\nJoin us via Zoom: https://t.co/l90cZUX6KO\n#A11y #Accessibility #inclusion https://t.co/EjEhNlM1vk"
+    },
+    {
+        "created_at": "2022-03-14T18:02:13.000Z",
+        "id": "1503431317228335106",
+        "text": "Mukulika’s presentation for the latest Newcomers Hour has been posted on the NumPy YouTube channel: https://t.co/X5AXBmWzt8"
+    },
+    {
+        "created_at": "2022-03-10T15:22:00.000Z",
+        "id": "1501941446785454081",
+        "text": "The NumPy Newcomers Hour is starting shortly. \nJoin us via Zoom: https://t.co/l90cZUFvme https://t.co/MbIKXDxc9B"
+    }
+]

src/sass/about.scss

@@ -62,7 +62,7 @@
   }
 }
 
-.publication-route-wrapper {
+.publication-route-wrapper,  .team-route-wrapper{
   max-width: 1300px;
   margin: auto;
   padding: 2rem;
@@ -108,4 +108,19 @@
       font-size: 15px;
     }
   }
+  .tweet {
+    border-bottom: 1px solid grey;
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0.5rem;
+
+    span {
+      color: rgb(167, 161, 161);
+      font-size: 12px;
+      font-style: italic;
+      margin-left: 15px;
+    }
+  }
 }