built basic functionality for functional components

frontend/src/App.js

@@ -5,7 +5,7 @@ import Signin from "./components/auth/Signin";
 import Signup from "./components/auth/Signup";
 import Posts from "./components/Posts";
 import Post from "./components/Post";
-
+import Event from "./components/Event";
 import Events from "./components/Events";
 import Profile from "./components/Profile";
 
@@ -22,7 +22,7 @@ function App() {
           <Route component={Signin} path="/login" />
           <ProtectedRoute component={Posts} path="/posts" />
           <ProtectedRoute component={Post} path="/post/:id" />
-
+          <ProtectedRoute component={Event} path="/event/:id" />
           <ProtectedRoute component={Events} path="/events" />
           <ProtectedRoute component={Profile} path="/profile" />
         </Switch>

frontend/src/components/Event.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+
+const Event = (props) => {
+  const [state, setState] = useState({
+    user: { username: "HyperionLegion" },
+    event_title: "Green Earth",
+    event_text: "Plant trees with us at 2859258 drive 9 pm EST 3/26/2021",
+    topics: ["climate change", "global warming"],
+    website: "https://joshuahsueh.ml/",
+  });
+  const [stocks, setStocks] = useState([]);
+
+  const requestOptions = {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+  };
+
+  const callAPI = () => {
+    fetch(`${process.env.REACT_APP_API_ENDPOINT}/event/`, requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data !== undefined) {
+          setState(data);
+        }
+      });
+  };
+
+  useEffect(() => {
+    callAPI();
+  }, []);
+  return (
+    <div>
+      <h1 className="d-flex justify-content-center m-2 p-4">
+        Event {props.match.params.id}
+      </h1>
+      <div className="container">
+        <h1>Hello {state.user.username}!</h1>
+        <h1>Event {state.event_title}</h1>
+        <p>{state.event_text}</p>
+        <a href={state.website}>Website</a>
+        <h2>Tags:</h2>
+        {state.topics.map((topic) => {
+          return (
+            <div>
+              <p>{topic}</p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Event;

frontend/src/components/Events.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+
+const Events = (props) => {
+  const [state, setState] = useState({
+    user: { username: "" },
+    events: [{ id: 1, text: "Green Earth" }],
+  });
+  const [stocks, setStocks] = useState([]);
+
+  const requestOptions = {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+  };
+
+  const callAPI = () => {
+    fetch(`${process.env.REACT_APP_API_ENDPOINT}/events/`, requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data !== undefined) {
+          setState(data);
+        }
+      });
+  };
+
+  useEffect(() => {
+    callAPI();
+  }, []);
+  return (
+    <div>
+      <h1 className="d-flex justify-content-center m-2 p-4">Events</h1>
+      <div className="container">
+        <h1>Hello {state.user.username}!</h1>
+        {state.events.map((event) => {
+          return (
+            <div>
+              <a href={"/event/" + event.id} class="">
+                {event.text}
+              </a>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Events;

frontend/src/components/Post.js

@@ -2,11 +2,12 @@ import React, { useState, useEffect } from "react";
 
 const Post = (props) => {
   const [state, setState] = useState({
-    user: { username: "" },
-    post_text: "",
+    user: { username: "HyperionLegion" },
+    post_title: "CLIMATE CHANGE",
+    post_text: "We are gonna die if we don't do anything about climate change!",
     upvotes: 0,
-    keywords: [],
-    comments: [],
+    topics: ["climate change", "death"],
+    comments: ["this guy is weird", "no he is right"],
   });
   const [stocks, setStocks] = useState([]);
 
@@ -26,7 +27,22 @@ const Post = (props) => {
         }
       });
   };
-
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const requestOptions = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify({ postid: props.id }),
+    };
+    fetch(`${process.env.REACT_APP_API_ENDPOINT}/post/upvote`, requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+      });
+  };
   useEffect(() => {
     callAPI();
   }, []);
@@ -36,6 +52,30 @@ const Post = (props) => {
       <div className="container">
         <h1>Hello {state.user.username}!</h1>
         <h2>Post {props.match.params.id}</h2>
+        <h2>{state.post_title}</h2>
+        <p>{state.post_text}</p>
+        <form onSubmit={onSubmit}>
+          <div id="form-group">
+            <input className="btn btn-primary" type="submit" value="+1" />
+          </div>
+          <br />
+        </form>
+        <h4>Topics:</h4>
+        {state.topics.map((topic) => {
+          return (
+            <div class="inline">
+              <p>{topic}</p>
+            </div>
+          );
+        })}
+        <h4>Comments:</h4>
+        {state.comments.map((comment) => {
+          return (
+            <div>
+              <p>{comment}</p>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

frontend/src/components/Posts.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+
+const Posts = (props) => {
+  const [state, setState] = useState({
+    user: { username: "" },
+    posts: [{ id: 1, text: "monkeys" }],
+  });
+
+  const requestOptions = {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+  };
+
+  const callAPI = () => {
+    fetch(`${process.env.REACT_APP_API_ENDPOINT}/posts/`, requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data !== undefined) {
+          setState(data);
+        }
+      });
+  };
+
+  useEffect(() => {
+    callAPI();
+  }, []);
+  return (
+    <div>
+      <h1 className="d-flex justify-content-center m-2 p-4">Posts</h1>
+      <div className="container">
+        <h1>Hello {state.user.username}!</h1>
+        {state.posts.map((post) => {
+          return (
+            <div>
+              <a href={"/post/" + post.id} class="">
+                {post.text}
+              </a>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Posts;

frontend/src/components/Profile.js

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from "react";
 
-const Post = (props) => {
+const Profile = (props) => {
   const [state, setState] = useState({
     user: { username: "" },
-    upvotes: 0,
-    keywords: [],
+    topics: ["climate change", "covid19"],
   });
   const [stocks, setStocks] = useState([]);
 
@@ -16,7 +15,7 @@ const Post = (props) => {
   };
 
   const callAPI = () => {
-    fetch(`${process.env.REACT_APP_API_ENDPOINT}/post/`, requestOptions)
+    fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`, requestOptions)
       .then((response) => response.json())
       .then((data) => {
         if (data !== undefined) {
@@ -33,9 +32,17 @@ const Post = (props) => {
       <h1 className="d-flex justify-content-center m-2 p-4">Profile</h1>
       <div className="container">
         <h1>Hello {state.user.username}!</h1>
+        <h2>Topics you are interested in:</h2>
+        {state.topics.map((topic) => {
+          return (
+            <div>
+              <p>{topic}</p>
+            </div>
+          );
+        })}
       </div>
     </div>
   );
 };
 
-export default Post;
+export default Profile;