Follow unfollow frontend implementation

project2-back/src/main/java/net/revature/project1/service/UserService.java

@@ -285,7 +285,7 @@ public AppUser updateAppUser(AppUser appUser, String token){
 
     /**
      * Used to remove a relationship between following and follower.
-     * @param followerId Take in a follower id. AKA who started the unfollowing.
+     * @param currentUser Take in a follower id. AKA who started the unfollowing.
      * @param username Take in a username. AKA who the person that is being unfollowed.
      * @param token Takes the token of the user who wants to unfollow
      * @param username Take in a following id. AKA who the person that is being unfollowed.
@@ -304,11 +304,6 @@ public UserEnum unfollowUser(String currentUser, String username, String token){
             return UserEnum.UNKNOWN;
         }
 
-        boolean isValid = isValidToken(token, follower.getId());
-        if(!isValid){
-            return UserEnum.UNAUTHORIZED;
-        }
-
         follower.getFollowing().remove(following);
         following.getFollower().remove(follower);
 

project2-front/src/App.jsx

@@ -17,7 +17,7 @@ import { PostProvider } from "./component/Post/Context/PostProvider.jsx";
 import { SearchProvider } from "./component/Search/Context/GetSelectedData.jsx";
 import PostPage from "./page/PostPage.jsx";
 import FollowingPage from "./page/FollowingPage.jsx";
-import FollowersPage from "./page/FollowingPage.jsx";
+import FollowersPage from "./page/FollowersPage.jsx";
 
 function App() {
   return (

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

@@ -1,31 +1,55 @@
-import axios from "axios";
 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 (follower_id, username) => {
+  // const handleDeleteFollower = async (currentUser, username) => {
+  //   try {
+  //     const response = await projectApi.delete(
+  //       `/user/${username}/follow/${currentUser}`
+  //     );
+
+  //     if (response.status !== 200) {
+  //       throw new Error("API call was not successful");
+  //     }
+  //     console.log("from follower list provider");
+  //     console.log(response.data);
+  //     setFollowerList((prev) => {
+  //       return prev.filter((follower) => follower.username !== username);
+  //     });
+  //   } catch (e) {
+  //     throw new Error("Couldn't delete user" + e);
+  //   }
+  // };
+  const handleDeleteFollower = async (currentUser, username) => {
     try {
-      const response = await axios.delete(
-        `/user/${follower_id}/follow/${username}`
+      const { status } = await projectApi.delete(
+        `/user/${currentUser}/follow/${username}`
       );
 
-      if (response.status !== 200) {
-        throw new Error("API call was not successful");
+      if (status !== 200) {
+        throw new Error("Failed to delete the follower");
       }
-    } catch (e) {
-      throw new Error("Couldn't delete user" + e);
+
+      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 axios.get(`/user/followers/${user_id}`);
+      const response = await projectApi.get(`/user/followers/${user_id}`);
       if (response.status !== 200) {
         throw new Error("API response was not okay");
       }
@@ -36,6 +60,10 @@ export const FollowerListProvider = ({ children }) => {
     }
   };
 
+  useEffect(() => {
+    handleGetFollowers();
+  }, []);
+
   return (
     <FollowerListContext.Provider
       value={{
@@ -49,4 +77,9 @@ export const FollowerListProvider = ({ children }) => {
     </FollowerListContext.Provider>
   );
 };
+
+FollowerListProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 export default FollowerListContext;

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

@@ -7,31 +7,55 @@ import {
   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={{ gap: 5 }}>
+      <ListItem sx={{}} key={follower.username}>
         <ListItemAvatar>
-          <Avatar />
+          <Avatar src={follower.profilePic} />
         </ListItemAvatar>
         <ListItemText
-          primary={<Typography sx={{ mb: 1 }}>Display Name</Typography>}
+          primary={
+            <Typography sx={{ mb: 1, color: "black", fontSize: "large" }}>
+              {follower.displayName}
+            </Typography>
+          }
           secondary={
             <>
-              <Typography sx={{ mb: 1 }}>@Username</Typography>
-              <Typography sx={{ mb: 0.5 }}>Biography</Typography>
-              <Typography>50 Followers</Typography>
+              <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">
+        <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

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

project2-front/src/component/Following/Context/FollowingListProvider.jsx

@@ -1,50 +1,57 @@
-import axios from "axios";
 import { createContext } from "react";
 import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
+import { projectApi } from "../../../util/axios";
 
 const FollowingListContext = createContext(null);
 
 export const FollowingListProvider = ({ children }) => {
   const [followingList, setFollowingList] = useState([]);
 
-  const handleDeleteFollowing = async (follower_id, username) => {
+  const handleDeleteFollowing = async (currentUsername, username) => {
     try {
-      const response = await axios.delete(
-        `/user/${follower_id}/follow/${username}`
+      const response = await projectApi.delete(
+        `/user/${currentUsername}/follow/${username}`
       );
 
       if (response.status !== 200) {
         throw new Error("API call was not successful");
       }
+      console.log(response.data);
+      setFollowingList((prev) => {
+        return prev.filter((following) => following.username !== username);
+      });
     } catch (e) {
       throw new Error("Couldn't delete user" + e);
     }
   };
 
-  useEffect(() => {
+  const handleGetFollowing = async () => {
     try {
-      const fetchFollowingList = async () => {
-        const user_id = Cookies.get("user_id");
-        const response = await axios.get(`/user/following/${user_id}`);
-
-        if (response.status !== 200) {
-          throw new Error("API response was not okay");
-        }
-
-        setFollowingList(response.data);
-      };
-
-      fetchFollowingList();
+      const user_id = Cookies.get("user_id");
+      const response = await projectApi.get(`/user/following/${user_id}`);
+      if (response.status !== 200) {
+        throw new Error("API response was not okay");
+      }
+      setFollowingList(response.data);
     } catch (e) {
       console.error(`Error Status: ${e.status}`);
       throw e;
     }
-  }, []);
+  };
+
+  useEffect(() => {
+    handleGetFollowing();
+  }, [followingList]);
 
   return (
     <FollowingListContext.Provider
-      value={{ followingList, setFollowingList, handleDeleteFollowing }}
+      value={{
+        followingList,
+        setFollowingList,
+        handleDeleteFollowing,
+        handleGetFollowing,
+      }}
     >
       {children}
     </FollowingListContext.Provider>

project2-front/src/component/Following/FollowingList.jsx

@@ -7,25 +7,51 @@ import {
   Typography,
   Divider,
 } from "@mui/material";
+import { useContext } from "react";
+// import PropTypes from "prop-types";
+import Cookies from "js-cookie";
+import FollowingListContext from "./Context/FollowingListProvider";
+
+const FollowingList = ({ following }) => {
+  const { handleDeleteFollowing } = useContext(FollowingListContext);
+  const currentUsername = Cookies.get("username");
 
-const FollowingList = ({ follower }) => {
   return (
     <>
-      <ListItem sx={{ gap: 5 }}>
+      <ListItem sx={{}}>
         <ListItemAvatar>
-          <Avatar />
+          <Avatar src={following.profilePic} />
         </ListItemAvatar>
         <ListItemText
-          primary={<Typography sx={{ mb: 1 }}>Display Name</Typography>}
+          primary={
+            <Typography sx={{ mb: 1, color: "black", fontSize: "large" }}>
+              {following.displayName}
+            </Typography>
+          }
           secondary={
             <>
-              <Typography sx={{ mb: 1 }}>@Username</Typography>
-              <Typography sx={{ mb: 0.5 }}>Biography</Typography>
-              <Typography>50 Followers</Typography>
+              <Typography sx={{ mb: 1, color: "black" }}>
+                @{following.username}
+              </Typography>
+              <Typography sx={{ mb: 0.5, color: "black", fontSize: "small" }}>
+                {following.biography}
+              </Typography>
+              <Typography sx={{ color: "black", fontSize: "small" }}>
+                {following.followerCount} Followers
+              </Typography>
+              <Typography sx={{ color: "black", fontSize: "small" }}>
+                {following.followingCount} Following
+              </Typography>
             </>
           }
         />
-        <Button variant="outlined" size="small">
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={() => {
+            handleDeleteFollowing(currentUsername, following.username);
+          }}
+        >
           Unfollow
         </Button>
       </ListItem>
@@ -34,4 +60,15 @@ const FollowingList = ({ follower }) => {
   );
 };
 
+// FollowingList.propTypes = {
+//   following: PropTypes.shape({
+//     profilePic: PropTypes.string.isRequired,
+//     displayName: PropTypes.string.isRequired,
+//     username: PropTypes.string.isRequired,
+//     biography: PropTypes.string.isRequired,
+//     followerCount: PropTypes.number.isRequired,
+//     followingCount: PropTypes.number.isRequired,
+//   }).isRequired,
+// };
+
 export default FollowingList;