Add followers page

front-end/src/App.js

@@ -20,6 +20,7 @@ import Song from "./Song";
 import Header from "./Header";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import Followers from "./Followers";
 
 function App() {
   const [authState, setAuthState] = useState(false);
@@ -61,6 +62,7 @@ function App() {
         <Route path="/myProfile" element={<Profile />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/followers" element={<Followers />} />
         <Route path="/song/:id" element={<Song />} />
       </Route>
     )

front-end/src/Followers.js

+import React, { useState, useContext, useEffect } from "react";
+import { AuthContext } from "./helpers/AuthContext";
+import Widgets from "./Widgets";
+import axios from "axios";
+
+export default function Followers() {
+  const { userID, authState } = useContext(AuthContext);
+  const [followers, setFollowers] = useState([]);
+  const [numOfFolowers, setNumOfFolowers] = useState([]);
+
+  async function getFollowers() {
+    const data = { userID: userID };
+    await axios
+      .post("http://localhost:3002/followings/getFollowers", data, {
+        headers: {
+          accessToken: localStorage.getItem("accessToken"),
+        },
+      })
+      .then((response) => {
+        if (response.data.error) {
+          alert(response.data.error);
+        } else {
+          setFollowers(response.data);
+          console.log(response.data);
+          setNumOfFolowers(response.data.size);
+        }
+      });
+  }
+
+  useEffect(() => {
+    getFollowers();
+  }, [authState]);
+
+  return (
+    <div className="home">
+      <div className="profile">
+        <div className="profile__header">
+          <h2>Followers</h2>
+          <>{numOfFolowers}</>
+        </div>
+
+        {followers &&
+          followers.map((follower) => {
+            <div>{follower}</div>;
+          })}
+      </div>
+
+      <Widgets className="widgets" />
+    </div>
+  );
+}

front-end/src/Home.css

@@ -2,8 +2,8 @@
   display: flex;
   max-width: 1300px;
   height: 80vh;
-  margin-left: auto;
-  margin-right: auto;
+  /* margin-left: auto;
+  margin-right: auto; */
   padding-top: 70px;
   z-index: 1;
 }

front-end/src/Profile.js

@@ -13,7 +13,7 @@ function Profile() {
   async function getFollowers() {
     const data = { userID: userID };
     axios
-      .post("http://localhost:3002/followings/getFollowings", data, {
+      .post("http://localhost:3002/followings/getFollowers", data, {
         headers: {
           accessToken: localStorage.getItem("accessToken"),
         },

front-end/src/ProfileCard.js

 import React, { useState } from "react";
 import "./ProfileCard.css";
 import { Button } from "@material-ui/core";
+import { useNavigate } from "react-router";
 
 export default function ProfileCard(props) {
+  const navigate = useNavigate();
   const numOfFolowers = props.followers.length;
   const user = props.user;
   return (
@@ -14,7 +16,9 @@ export default function ProfileCard(props) {
         <div>
           <h3>{user && user.username}</h3>
           <div className="email">{user && user.email}</div>
-          <div className="followers">{numOfFolowers}</div>
+          <div className="followers" onClick={() => navigate("/followers")}>
+            {numOfFolowers}
+          </div>
           <div>Followers</div>
         </div>
       </div>