Getting followers and following feature

project2-front/src/component/Followers/Context/FollowerListProvider.jsx

@@ -1,67 +1,68 @@
-import { createContext } from "react";
-import { useEffect, useState } from "react";
-import Cookies from "js-cookie";
-import { projectApi } from "../../../util/axios";
-import PropTypes from "prop-types";
-
-const FollowerListContext = createContext(null);
-
-export const FollowerListProvider = ({ children }) => {
-  const [followerList, setFollowerList] = useState([]);
-
-  const handleDeleteFollower = async (currentUser, username) => {
-    try {
-      const { status } = await projectApi.delete(
-        `/user/${currentUser}/follow/${username}`
-      );
-
-      if (status !== 200) {
-        throw new Error("Failed to delete the follower");
-      }
-
-      setFollowerList((prev) =>
-        prev.filter((follower) => follower.username !== username)
-      );
-    } catch (error) {
-      console.error("Error deleting the follower:", error.message);
-      throw new Error(`Couldn't delete user: ${error.message}`);
-    }
-  };
-
-  const handleGetFollowers = async () => {
-    try {
-      const user_id = Cookies.get("user_id");
-      const response = await projectApi.get(`/user/followers/${user_id}`);
-      if (response.status !== 200) {
-        throw new Error("API response was not okay");
-      }
-      setFollowerList(response.data);
-    } catch (e) {
-      console.error(`Error Status: ${e.status}`);
-      throw e;
-    }
-  };
-
-  useEffect(() => {
-    handleGetFollowers();
-  }, [followerList]);
-
-  return (
-    <FollowerListContext.Provider
-      value={{
-        followerList,
-        setFollowerList,
-        handleDeleteFollower,
-        handleGetFollowers,
-      }}
-    >
-      {children}
-    </FollowerListContext.Provider>
-  );
-};
-
-FollowerListProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default FollowerListContext;
+import { createContext } from "react";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { projectApi } from "../../../util/axios";
+import PropTypes from "prop-types";
+import { useParams } from "react-router-dom";
+
+const FollowerListContext = createContext(null);
+
+export const FollowerListProvider = ({ children }) => {
+  const [followerList, setFollowerList] = useState([]);
+  const { username } = useParams();
+
+  const handleDeleteFollower = async (currentUser, username) => {
+    try {
+      const { status } = await projectApi.delete(
+        `/user/${currentUser}/follow/${username}`
+      );
+
+      if (status !== 200) {
+        throw new Error("Failed to delete the follower");
+      }
+
+      setFollowerList((prev) =>
+        prev.filter((follower) => follower.username !== username)
+      );
+    } catch (error) {
+      console.error("Error deleting the follower:", error.message);
+      throw new Error(`Couldn't delete user: ${error.message}`);
+    }
+  };
+
+  const handleGetFollowers = async () => {
+    try {
+      const response = await projectApi.get(`/user/followers/${username}`);
+      if (response.status !== 200) {
+        throw new Error("API response was not okay");
+      }
+      setFollowerList(response.data);
+    } catch (e) {
+      console.error(`Error Status: ${e.status}`);
+      throw e;
+    }
+  };
+
+  useEffect(() => {
+    handleGetFollowers();
+  }, [followerList, username]);
+
+  return (
+    <FollowerListContext.Provider
+      value={{
+        followerList,
+        setFollowerList,
+        handleDeleteFollower,
+        handleGetFollowers,
+      }}
+    >
+      {children}
+    </FollowerListContext.Provider>
+  );
+};
+
+FollowerListProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default FollowerListContext;

project2-front/src/component/Followers/FollowerList.jsx

@@ -1,61 +1,61 @@
-import {
-  Avatar,
-  Button,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Typography,
-  Divider,
-} from "@mui/material";
-import Cookies from "js-cookie";
-import { useContext } from "react";
-import FollowerListContext from "./Context/FollowerListProvider";
-
-const FollowerList = ({ follower }) => {
-  const currentUser = Cookies.get("username");
-  const { handleDeleteFollower } = useContext(FollowerListContext);
-
-  return (
-    <>
-      <ListItem sx={{}} key={follower.username}>
-        <ListItemAvatar>
-          <Avatar src={follower.profilePic} />
-        </ListItemAvatar>
-        <ListItemText
-          primary={
-            <Typography sx={{ mb: 1, color: "black", fontSize: "large" }}>
-              {follower.displayName}
-            </Typography>
-          }
-          secondary={
-            <>
-              <Typography sx={{ mb: 1, color: "black", fontSize: "small" }}>
-                @{follower.username}
-              </Typography>
-              <Typography sx={{ mb: 0.5, color: "black", fontSize: "small" }}>
-                {follower.biography}
-              </Typography>
-              <Typography sx={{ color: "black", fontSize: "small" }}>
-                {follower.followerCount} Followers
-              </Typography>
-              <Typography sx={{ color: "black", fontSize: "small" }}>
-                {follower.followingCount} Following
-              </Typography>
-            </>
-          }
-        />
-        <Button
-          variant="outlined"
-          size="small"
-          onClick={() => {
-            handleDeleteFollower(follower.username, currentUser);
-          }}
-        >
-          Delete Follower
-        </Button>
-      </ListItem>
-      <Divider variant="inset" component="li" />
-    </>
-  );
-};
-export default FollowerList;
+import {
+  Avatar,
+  Button,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Typography,
+  Divider,
+} from "@mui/material";
+import Cookies from "js-cookie";
+import { useContext } from "react";
+import FollowerListContext from "./Context/FollowerListProvider";
+
+const FollowerList = ({ follower }) => {
+  const currentUser = Cookies.get("username");
+  const { handleDeleteFollower } = useContext(FollowerListContext);
+
+  return (
+    <>
+      <ListItem sx={{}} key={follower.username}>
+        <ListItemAvatar>
+          <Avatar src={follower.profilePic} />
+        </ListItemAvatar>
+        <ListItemText
+          primary={
+            <Typography sx={{ mb: 1, color: "black", fontSize: "large" }}>
+              {follower.displayName}
+            </Typography>
+          }
+          secondary={
+            <>
+              <Typography sx={{ mb: 1, color: "black", fontSize: "small" }}>
+                @{follower.username}
+              </Typography>
+              <Typography sx={{ mb: 0.5, color: "black", fontSize: "small" }}>
+                {follower.biography}
+              </Typography>
+              <Typography sx={{ color: "black", fontSize: "small" }}>
+                {follower.followerCount} Followers
+              </Typography>
+              <Typography sx={{ color: "black", fontSize: "small" }}>
+                {follower.followingCount} Following
+              </Typography>
+            </>
+          }
+        />
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={() => {
+            handleDeleteFollower(follower.username, currentUser);
+          }}
+        >
+          Delete Follower
+        </Button>
+      </ListItem>
+      <Divider variant="inset" component="li" />
+    </>
+  );
+};
+export default FollowerList;

project2-front/src/component/Followers/FollowerListContainer.jsx

@@ -1,38 +1,38 @@
-import { Box, Button, List, Typography } from "@mui/material";
-import FollowerList from "./FollowerList";
-import { useNavigate } from "react-router-dom";
-import { useContext } from "react";
-import FollowerListContext from "./Context/FollowerListProvider";
-
-const FollowerListContainer = () => {
-  const navigate = useNavigate();
-  const { followerList } = useContext(FollowerListContext);
-
-  const handleBack = () => {
-    navigate(-1);
-  };
-
-  return (
-    <Box>
-      <Typography
-        variant="h5"
-        sx={{
-          mb: 3,
-          textAlign: "center",
-          fontWeight: "bold",
-          color: "primary.main",
-        }}
-      >
-        Followers
-      </Typography>
-      <Button onClick={handleBack}>Back</Button>
-      <List>
-        {followerList &&
-          followerList.map((follower) => (
-            <FollowerList follower={follower} key={follower.username} />
-          ))}
-      </List>
-    </Box>
-  );
-};
-export default FollowerListContainer;
+import { Box, Button, List, Typography } from "@mui/material";
+import FollowerList from "./FollowerList";
+import { useNavigate } from "react-router-dom";
+import { useContext } from "react";
+import FollowerListContext from "./Context/FollowerListProvider";
+
+const FollowerListContainer = () => {
+  const navigate = useNavigate();
+  const { followerList } = useContext(FollowerListContext);
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <Box>
+      <Typography
+        variant="h5"
+        sx={{
+          mb: 3,
+          textAlign: "center",
+          fontWeight: "bold",
+          color: "primary.main",
+        }}
+      >
+        Followers
+      </Typography>
+      <Button onClick={handleBack}>Back</Button>
+      <List>
+        {followerList &&
+          followerList.map((follower) => (
+            <FollowerList follower={follower} key={follower.username} />
+          ))}
+      </List>
+    </Box>
+  );
+};
+export default FollowerListContainer;