I still couldn't by pass the security issue use to run the application locally

project2-back/src/main/resources/application.properties

@@ -17,4 +17,4 @@ spring.servlet.multipart.max-request-size=200MB
 
 # Logging
 logging.level.root=INFO
-logging.pattern.console=%d{yyyy-MM-dd HH:mm:ss} - %msg%n
+logging.pattern.console=%d{yyyy-MM-dd HH:mm:ss} - %msg%n

project2-back/src/test/java/UserServiceTest.java

@@ -0,0 +1,37 @@
+import net.revature.project1.entity.AppUser;
+import net.revature.project1.repository.UserRepo;
+import net.revature.project1.service.UserService;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.sql.Timestamp;
+
+@ExtendWith(MockitoExtension.class)
+public class UserServiceTest {
+
+    @InjectMocks
+    private UserService userService;
+    @Mock
+    private UserRepo userRepo;
+
+    @Test
+    public void getFollowersTest(){
+
+        AppUser appUser1 = new AppUser(1l, "appuser1@gmail.com", "display name", "profile", "username", "bannerPic", "biography");
+        AppUser appUser2 = new AppUser(2l, "appuser2@gmail.com", "display name", "profile", "username", "bannerPic", "biography");
+        AppUser appUser3 = new AppUser(3l, "appuser3@gmail.com", "display name", "profile", "username", "bannerPic", "biography");
+        AppUser appUser4 = new AppUser(4l, "appuser4@gmail.com", "display name", "profile", "username", "bannerPic", "biography");
+
+        appUser1.getFollower().add(appUser2);
+        appUser1.getFollower().add(appUser3);
+        appUser1.getFollower().add(appUser4);
+
+
+
+
+    }
+
+}

project2-front/src/App.jsx

@@ -1,72 +1,103 @@
-import './App.css'
+import "./App.css";
 import HomePage from "./page/HomePage.jsx";
-import {AuthProvider} from "./util/auth/AuthProvider.jsx";
-import {Route, BrowserRouter as Router, Routes} from "react-router-dom";
-import {SigninPage} from "./page/SigninPage.jsx";
-import {SignupPage} from "./page/SignupPage.jsx";
-import {LocalizationProvider} from "@mui/x-date-pickers";
-import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
-import {SignUpProvider} from "./component/SignUpComponent/Context/UseSignup.jsx";
-import {SighInProvider} from "./component/SigninComponent/Context/SignInProvider.jsx";
+import { AuthProvider } from "./util/auth/AuthProvider.jsx";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import { SigninPage } from "./page/SigninPage.jsx";
+import { SignupPage } from "./page/SignupPage.jsx";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { SignUpProvider } from "./component/SignUpComponent/Context/UseSignup.jsx";
+import { SighInProvider } from "./component/SigninComponent/Context/SignInProvider.jsx";
 import FeedPage from "./page/FeedPage.jsx";
 import NotificationsPage from "./page/NotificationsPage.jsx";
-import {NavProvider} from "./component/Navbar/NavContext/NavContext.jsx";
+import { NavProvider } from "./component/Navbar/NavContext/NavContext.jsx";
 import ProfilePage from "./page/ProfilePage.jsx";
 import SettingPage from "./page/SettingPage.jsx";
-import {PostProvider} from "./component/Post/Context/PostProvider.jsx";
-import { SearchProvider } from './component/Search/Context/GetSelectedData.jsx';
+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";
 
 function App() {
   return (
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <AuthProvider>
-            <Router>
-                <NavProvider>
-                    <SignUpProvider>
-                        <SighInProvider>
-                            <PostProvider>
-                                <SearchProvider>
-                                    <Routes>
-                                        <Route path="/" element={
-                                            <HomePage>
-                                                <FeedPage/>
-                                            </HomePage>
-                                        }/>
-                                        <Route path="/signin" element={<SigninPage/>}/>
-                                        <Route path="/signup" element={<SignupPage/>}/>
-                                        <Route path="/notification" element={
-                                            <HomePage>
-                                                <NotificationsPage/>
-                                            </HomePage>
-                                        }/>
-                                        <Route path="/setting" element={
-                                            <HomePage>
-                                                <SettingPage/>
-                                            </HomePage>
-                                        }/>
-                                        <Route path="/profile/:username" element={
-                                            <HomePage>
-                                                <ProfilePage/>
-                                            </HomePage>
-                                        }/>
-                                        <Route path="/profile/:username/post/:postId" element={
-                                            <HomePage>
-                                                <PostPage/>
-                                            </HomePage>
-                                        }/>
-                                    </Routes>
-                                </SearchProvider>
-                            </PostProvider>
-                        </SighInProvider>
-                    </SignUpProvider>
-                </NavProvider>
-            </Router>
-        </AuthProvider>
-      </LocalizationProvider>
-  )
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <AuthProvider>
+        <Router>
+          <NavProvider>
+            <SignUpProvider>
+              <SighInProvider>
+                <PostProvider>
+                  <SearchProvider>
+                    <Routes>
+                      <Route
+                        path="/"
+                        element={
+                          <HomePage>
+                            <FeedPage />
+                          </HomePage>
+                        }
+                      />
+                      <Route path="/signin" element={<SigninPage />} />
+                      <Route path="/signup" element={<SignupPage />} />
+                      <Route
+                        path="/notification"
+                        element={
+                          <HomePage>
+                            <NotificationsPage />
+                          </HomePage>
+                        }
+                      />
+                      <Route
+                        path="/setting"
+                        element={
+                          <HomePage>
+                            <SettingPage />
+                          </HomePage>
+                        }
+                      />
+                      <Route
+                        path="/profile/:username"
+                        element={
+                          <HomePage>
+                            <ProfilePage />
+                          </HomePage>
+                        }
+                      />
+                      <Route
+                        path="/profile/:username/post/:postId"
+                        element={
+                          <HomePage>
+                            <PostPage />
+                          </HomePage>
+                        }
+                      />
+                      <Route
+                        path="/profile/:username/following"
+                        element={
+                          <HomePage>
+                            <FollowingPage />
+                          </HomePage>
+                        }
+                      />
+                      <Route
+                        path="/profile/:username/followers"
+                        element={
+                          <HomePage>
+                            <FollowersPage />
+                          </HomePage>
+                        }
+                      />
+                    </Routes>
+                  </SearchProvider>
+                </PostProvider>
+              </SighInProvider>
+            </SignUpProvider>
+          </NavProvider>
+        </Router>
+      </AuthProvider>
+    </LocalizationProvider>
+  );
 }
 
-export default App
+export default App;

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

@@ -22,29 +22,28 @@ export const FollowerListProvider = ({ children }) => {
     }
   };
 
-  useEffect(() => {
+  const handleGetFollowers = async () => {
     try {
-      const fetchFollowerList = async () => {
-        const user_id = Cookies.get("user_id");
-        const response = await axios.get(`/user/followers/${user_id}`);
-
-        if (response.status !== 200) {
-          throw new Error("API response was not okay");
-        }
-
-        setFollowerList(response.data);
-      };
-
-      fetchFollowerList();
+      const user_id = Cookies.get("user_id");
+      const response = await axios.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;
     }
-  }, []);
+  };
 
   return (
     <FollowerListContext.Provider
-      value={{ followerList, setFollowerList, handleDeleteFollower }}
+      value={{
+        followerList,
+        setFollowerList,
+        handleDeleteFollower,
+        handleGetFollowers,
+      }}
     >
       {children}
     </FollowerListContext.Provider>

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

@@ -6,7 +6,7 @@ import FollowerListContext from "./Context/FollowerListProvider";
 
 const FollowerListContainer = () => {
   const navigate = useNavigate();
-  const { followerList } = useContext(FollowerListContext);
+  // const { followerList } = useContext(FollowerListContext);
 
   const handleBack = () => {
     navigate(-1);

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

@@ -0,0 +1,37 @@
+import {
+  Avatar,
+  Button,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Typography,
+  Divider,
+} from "@mui/material";
+
+const FollowingList = ({ follower }) => {
+  return (
+    <>
+      <ListItem sx={{ gap: 5 }}>
+        <ListItemAvatar>
+          <Avatar />
+        </ListItemAvatar>
+        <ListItemText
+          primary={<Typography sx={{ mb: 1 }}>Display Name</Typography>}
+          secondary={
+            <>
+              <Typography sx={{ mb: 1 }}>@Username</Typography>
+              <Typography sx={{ mb: 0.5 }}>Biography</Typography>
+              <Typography>50 Followers</Typography>
+            </>
+          }
+        />
+        <Button variant="outlined" size="small">
+          Unfollow
+        </Button>
+      </ListItem>
+      <Divider variant="inset" component="li" />
+    </>
+  );
+};
+
+export default FollowingList;

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

@@ -1,6 +1,6 @@
 import { Box, Button, List, Typography } from "@mui/material";
 import FollowingList from "./FollowingList";
-// import { useSettings } from "../Context/useSettings";
+
 import { useNavigate } from "react-router-dom";
 import { useContext } from "react";
 import FollowingListContext from "./Context/FollowingListProvider";
@@ -13,11 +13,36 @@ const FollowingListContainer = () => {
     navigate(-1);
   };
   return (
-    <Box>
-      <Typography variant="h5" sx={{ mb: 2, textAlign: "center" }}>
-        People Following
+    <Box
+      sx={{
+        width: "100%",
+        maxWidth: 600,
+        mx: "auto",
+        mt: 4,
+        p: 3,
+        borderRadius: 2,
+        boxShadow: 3,
+        bgcolor: "background.paper", // Uses theme's background color
+      }}
+    >
+      <Typography
+        variant="h5"
+        sx={{
+          mb: 3,
+          textAlign: "center",
+          fontWeight: "bold",
+          color: "primary.main",
+        }}
+      >
+        People Following You
       </Typography>
-      <Button onClick={handleBack}>Back</Button>
+      <Button
+        variant="outlined"
+        sx={{ mb: 3, textTransform: "none" }}
+        onClick={handleBack}
+      >
+        Back
+      </Button>
       <List>
         <FollowingList />
         <FollowingList />

project2-front/src/component/ProfileSettings/SettingsContainer.jsx

@@ -1,6 +1,7 @@
 import { SettingsProvider } from "./Context/SettingsProvider";
 import BioTextField from "./ProfileSettingsFields/BioTextField";
 import Banner from "./ProfileSettingsFields/Banner";
+import ProfilePictureInput from "./ProfileSettingsFields/ProfilePictureInput";
 import DisplayNameField from "./ProfileSettingsFields/DisplayNameField";
 
 import {
@@ -34,21 +35,22 @@ const SettingsContainer = ({ user }) => {
         }}
         onClose={handleCloseDialogBox}
       >
-        <DialogTitle
-          sx={{ textAlign: "center", fontWeight: "bold", fontSize: "23px" }}
-        >
-          Edit my profile
+        <DialogTitle sx={{ textAlign: "center" }}>
+          Edit Your Profile
         </DialogTitle>
         <DialogContent>
-          <Banner user={user} />
-          {/* <ProfilePictureInput user={user} /> */}
-          <DisplayNameField user={user} />
-          <BioTextField user={user} />
+          {" "}
+          <Banner
+            user={user}
+          /> {/* <ProfilePictureInput user={user} /> */}{" "}
+          <DisplayNameField user={user} /> <BioTextField user={user} />
         </DialogContent>
         <DialogActions sx={{ justifyContent: "center" }}>
+          {" "}
           <SubmitButton user={user} />
         </DialogActions>
         <DialogActions sx={{ justifyContent: "center" }}>
+          {" "}
           <CancelButton />
         </DialogActions>
       </Dialog>