💄 Fixed the position of the appbars, and fixed some minor UI bugs

Signed-off-by: Pau Costa <mico@micodev.es>

client/src/app/AppThemeProvider.tsx

@@ -0,0 +1,19 @@
+import { ThemeProvider } from "@emotion/react";
+import React from "react";
+import { useSelector } from "react-redux";
+import { selectDarkMode } from "./loginSlice";
+import { createTheme } from "@mui/material";
+
+const AppThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const darkThemeEnabled = useSelector(selectDarkMode);
+
+  const defaultTheme = createTheme({
+    palette: {
+      mode: darkThemeEnabled ? "dark" : "light",
+    },
+  });
+
+  return <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>;
+};
+
+export default AppThemeProvider;

client/src/app/loginSlice.ts

@@ -13,25 +13,32 @@ interface loginState {
   loggedIn: boolean;
   status: Status;
   error: string | null;
+  darkMode: boolean;
   userInfo: {
     firstName: string;
     lastName: string;
     jwt: string;
     id: number;
     profilePictureId: string;
+    notifications: Notification[];
+    isPrivate: boolean;
   };
 }
+const storageDarkMode = localStorage.getItem("darkMode") === "true";
 
 const initialState: loginState = {
   loggedIn: false,
   status: Status.idle,
+  darkMode: storageDarkMode || false,
   error: null,
   userInfo: {
+    isPrivate: false,
     firstName: "",
     lastName: "",
     jwt: "",
     id: -1,
     profilePictureId: "",
+    notifications: [],
   },
 };
 
@@ -46,6 +53,8 @@ export const loginSlice = createSlice({
       state.userInfo.firstName = action.payload.firstName;
       state.userInfo.lastName = action.payload.lastName;
       state.userInfo.profilePictureId = action.payload.profilePictureId;
+      state.userInfo.notifications = action.payload.notifications;
+      state.userInfo.isPrivate = action.payload.isPrivate;
     },
     logoff: (state) => {
       state.loggedIn = false;
@@ -57,6 +66,12 @@ export const loginSlice = createSlice({
     setError: (state, action) => {
       state.error = action.payload;
     },
+    setDarkMode: (state, action) => {
+      state.darkMode = action.payload;
+    },
+    setPrivate: (state, action) => {
+      state.userInfo.isPrivate = action.payload;
+    },
   },
 });
 
@@ -93,6 +108,7 @@ export const postLogin =
           lastName: userResponse.data.lastName,
           id: userResponse.data.id,
           profilePictureId: userResponse.data.profilePictureId,
+          notifications: userResponse.data.notifications,
         })
       );
       dispatch(setStatus(Status.succeeded));
@@ -120,6 +136,22 @@ export const postSignup =
     }
   };
 
+export const updateMe =
+  (isPrivate: boolean): AppThunk =>
+  async (dispatch) => {
+    const userApi = new UsersApi(
+      new Configuration({
+        basePath: process.env.REACT_APP_BACKEND_URL,
+        accessToken: localStorage.getItem("jwt") || "",
+      })
+    );
+    console.log("From inside updateME dispatch, param is:", isPrivate);
+
+    await userApi.usersMePatch({ isPrivate });
+    const userResponse = await userApi.usersMeGet();
+    dispatch(setPrivate(userResponse.data.isPrivate));
+  };
+
 export const postLogout = (): AppThunk => async (dispatch) => {
   localStorage.removeItem("jwt");
   sessionStorage.removeItem("jwt");
@@ -131,7 +163,8 @@ const addJWT = async (token: string) => {
   localStorage.setItem("jwt", token);
 };
 
-export const { login, logoff, setStatus, setError } = loginSlice.actions;
+export const { login, logoff, setStatus, setError, setDarkMode, setPrivate } =
+  loginSlice.actions;
 
 export default loginSlice.reducer;
 
@@ -143,3 +176,6 @@ export const selectUserInfo = (state: { login: loginState }) =>
 
 export const selectErrorMessage = (state: { login: loginState }) =>
   state.login.error;
+
+export const selectDarkMode = (state: { login: loginState }) =>
+  state.login.darkMode;

client/src/app/postSlice.ts

@@ -7,12 +7,14 @@ interface postSliceInterface {
   status: Status;
   followedPosts: Post[];
   globalPosts: Post[];
+  aPost: Post | null;
 }
 
 const initialState: postSliceInterface = {
   status: Status.idle,
   followedPosts: [],
   globalPosts: [],
+  aPost: null,
 };
 
 export const postSlice = createSlice({
@@ -28,6 +30,9 @@ export const postSlice = createSlice({
     setGlobalPosts: (state, action) => {
       state.globalPosts = action.payload;
     },
+    setAPost: (state, action) => {
+      state.aPost = action.payload;
+    },
   },
 });
 
@@ -50,26 +55,99 @@ export const fetchGlobalPosts = (): AppThunk => async (dispatch: any) => {
 };
 
 export const likePost =
-  (postId: number): AppThunk =>
+  (postId: number, postType?: "global" | "followed"): AppThunk =>
   async (dispatch: any) => {
     const postApi = createApi(store);
 
     dispatch(setStatus(Status.loading));
     await postApi.likePost(postId);
     dispatch(setStatus(Status.idle));
+
+    if (postType === "global") {
+      dispatch(fetchGlobalPosts());
+    } else if (postType === "followed") {
+      dispatch(fetchFollowedPosts());
+    } else {
+      dispatch(fetchFollowedPosts());
+      dispatch(fetchGlobalPosts());
+    }
   };
 
 export const unLikePost =
-  (postId: number): AppThunk =>
+  (postId: number, postType?: "global" | "followed"): AppThunk =>
   async (dispatch: any) => {
     const postApi = createApi(store);
 
     dispatch(setStatus(Status.loading));
     await postApi.unlikePost(postId);
     dispatch(setStatus(Status.idle));
+
+    if (postType === "global") {
+      dispatch(fetchGlobalPosts());
+    } else if (postType === "followed") {
+      dispatch(fetchFollowedPosts());
+    } else {
+      dispatch(fetchFollowedPosts());
+      dispatch(fetchGlobalPosts());
+    }
   };
 
-export const { setFollowedPosts, setGlobalPosts, setStatus } =
+export const fetchAPost =
+  (postId: number): AppThunk =>
+  async (dispatch: any) => {
+    const postApi = createApi(store);
+
+    dispatch(setStatus(Status.loading));
+    const response = await postApi.getPost(postId);
+    dispatch(setAPost(response.data));
+    dispatch(setStatus(Status.idle));
+  };
+
+export const commentAPost =
+  (postId: number, comment: string): AppThunk =>
+  async (dispatch: any) => {
+    const postApi = createApi(store);
+
+    dispatch(setStatus(Status.loading));
+    await postApi.commentPost(postId, { content: comment });
+    dispatch(fetchAPost(postId));
+    dispatch(setStatus(Status.idle));
+  };
+
+export const createPost =
+  (title: string, content: string): AppThunk =>
+  async (dispatch: any) => {
+    const postApi = createApi(store);
+
+    dispatch(setStatus(Status.loading));
+    await postApi.createPost({ title, content });
+    dispatch(fetchGlobalPosts());
+    dispatch(setStatus(Status.idle));
+  };
+
+export const updatePost =
+  (postId: number, title: string, content: string): AppThunk =>
+  async (dispatch: any) => {
+    const postApi = createApi(store);
+
+    dispatch(setStatus(Status.loading));
+    await postApi.updatePost(postId, { title, content });
+    dispatch(fetchAPost(postId));
+    dispatch(fetchGlobalPosts());
+    dispatch(setStatus(Status.idle));
+  };
+
+export const deletePost =
+  (postId: number): AppThunk =>
+  async (dispatch: any) => {
+    const postApi = createApi(store);
+
+    dispatch(setStatus(Status.loading));
+    await postApi.deletePost(postId);
+    dispatch(setStatus(Status.idle));
+  };
+
+export const { setFollowedPosts, setGlobalPosts, setStatus, setAPost } =
   postSlice.actions;
 
 export default postSlice.reducer;
@@ -77,6 +155,7 @@ export default postSlice.reducer;
 export const selectFollowedPosts = (state: any) => state.post.followedPosts;
 export const selectAllPosts = (state: any) => state.post.globalPosts;
 export const selectStatus = (state: any) => state.post.status;
+export const selectAPost = (state: any) => state.post.aPost;
 
 function createApi(store: Store) {
   return new PostsApi(

client/src/components/appAvatar.tsx

@@ -3,6 +3,7 @@ import { User, UserWithRelations } from "../api";
 
 interface AppAvatarProps {
   user: User | UserWithRelations;
+  small?: boolean;
 }
 
 export function AppAvatar(props: AppAvatarProps) {
@@ -10,6 +11,10 @@ export function AppAvatar(props: AppAvatarProps) {
     <Avatar
       alt={`${props.user.firstName} ${props.user.lastName}`}
       src={`/images/${props.user.profilePictureId}`}
+      sx={{
+        width: props.small ? "24px" : "42px",
+        height: props.small ? "24px" : "42px",
+      }}
     />
   );
 }

client/src/components/bottomAppBar.tsx

@@ -1,14 +1,19 @@
 import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import FeedIcon from "@mui/icons-material/Feed";
 import GlobalIcon from "@mui/icons-material/Public";
 import AddIcon from "@mui/icons-material/Add";
 import SearchIcon from "@mui/icons-material/Search";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export default function BottomAppBar() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState("");
   const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    setValue(location.pathname.replace("/", ""));
+  }, [location]);
 
   const handleClick = (to: string) => () => {
     navigate(to);
@@ -27,21 +32,25 @@ export default function BottomAppBar() {
       >
         <BottomNavigationAction
           label="My Feed"
+          value="feed"
           icon={<FeedIcon />}
           onClick={handleClick("feed")}
         />
         <BottomNavigationAction
           label="Global Feed"
+          value="global"
           icon={<GlobalIcon />}
           onClick={handleClick("global")}
         />
         <BottomNavigationAction
           label="New Post"
+          value="newpost"
           icon={<AddIcon />}
           onClick={handleClick("newpost")}
         />
         <BottomNavigationAction
           label="Search"
+          value="search"
           icon={<SearchIcon />}
           onClick={handleClick("search")}
         />

client/src/components/notificationBell.tsx

@@ -1,11 +1,16 @@
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { Badge, Tooltip } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 export default function NotificationBell() {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate("/notifications");
+  };
   return (
-    <Badge badgeContent={4} color="secondary">
-      <Tooltip title="Notifications" >
-        <NotificationsIcon />
+    <Badge badgeContent={0} color="secondary">
+      <Tooltip title="Notifications">
+        <NotificationsIcon onClick={handleClick} />
       </Tooltip>
     </Badge>
   );

client/src/components/postListItem.tsx

@@ -21,7 +21,8 @@ import { selectUserInfo } from "../app/loginSlice";
 
 interface PostListItemProps {
   post: Post;
-  postType: "all" | "user";
+  postType: "feed" | "user";
+  feedType?: "global" | "followed";
 }
 
 export default function PostListItem(props: PostListItemProps) {
@@ -40,19 +41,19 @@ export default function PostListItem(props: PostListItemProps) {
       props.post.likedBy?.some((user) => user.id === userInfo.id) || false
     );
     setNumberOfLikes(props.post.likedBy?.length || 0);
-  }, [props.post.likedBy, userInfo.id]);
+  }, [props.post, userInfo.id]);
 
   const handleLike = () => {
     if (!liked) {
       setNumberOfLikes(numberOfLikes + 1);
-      dispatch(likePost(props.post.id as number));
+      dispatch(likePost(props.post.id as number, props.feedType));
     }
     // If the user has already liked the post, unlike it
     else {
       setNumberOfLikes(numberOfLikes - 1);
-      dispatch(unLikePost(props.post.id as number));
+      dispatch(unLikePost(props.post.id as number, props.feedType));
     }
-    setLiked((prevState) => !prevState);
+    setLiked(!liked);
   };
 
   const handlePostClick = () => {

client/src/components/topAppBar.tsx

@@ -12,6 +12,7 @@ import {useSelector} from "react-redux";
 import { postLogout, selectUserInfo } from "../app/loginSlice";
 import { useAppDispatch } from "../app/store";
 import { AppAvatar } from "./appAvatar";
+import { useNavigate } from "react-router-dom";
 
 interface TopAppBarProps {
   height: number;
@@ -19,12 +20,12 @@ interface TopAppBarProps {
 
 function TopAppBar(props: TopAppBarProps) {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
   const userInfo = useSelector(selectUserInfo);
   const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
     null
   );
 
-
   const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget);
   };
@@ -38,9 +39,19 @@ function TopAppBar(props: TopAppBarProps) {
     setAnchorElUser(null);
   };
 
+  const handleProfileClick = () => {
+    navigate("/me");
+    setAnchorElUser(null);
+  };
+
+  const handleSettingsClick = () => {
+    navigate("/settings");
+    setAnchorElUser(null);
+  };
+
   return (
     <AppBar
-      position="absolute"
+      position="fixed"
       sx={{ zIndex: 1600, height: `${props.height}px` }}
     >
       <Toolbar disableGutters>
@@ -94,10 +105,10 @@ function TopAppBar(props: TopAppBarProps) {
             open={Boolean(anchorElUser)}
             onClose={handleCloseUserMenu}
           >
-            <MenuItem key={"profile"} onClick={handleCloseUserMenu}>
+            <MenuItem key={"profile"} onClick={handleProfileClick}>
               <Typography textAlign="center">{"Profile"}</Typography>
             </MenuItem>
-            <MenuItem key={"settings"} onClick={handleCloseUserMenu}>
+            <MenuItem key={"settings"} onClick={handleSettingsClick}>
               <Typography textAlign="center">{"Settings"}</Typography>
             </MenuItem>
             <MenuItem key={"logout"} onClick={handleLogout}>

client/src/index.tsx

@@ -6,7 +6,7 @@ import "@fontsource/roboto";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Root from "./routes/root";
 import ErrorPage from "./error-page";
-import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
+import {  CssBaseline } from "@mui/material";
 import Login from "./routes/Auth/login";
 import Register from "./routes/Auth/register";
 import AuthRoot from "./routes/Auth/authRoot";
@@ -14,20 +14,17 @@ import { Provider } from "react-redux";
 import { store } from "./app/store";
 import PostList from "./routes/postList";
 import Profile from "./routes/profile";
-import Post from "./routes/post";
+import PostView from "./routes/post";
 import NewPost from "./routes/newPost";
 import Search from "./routes/search";
+import Settings from "./routes/settings";
+import ANotification from "./routes/notification";
+import AppThemeProvider from "./app/AppThemeProvider";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 
-const defaultTheme = createTheme({
-  palette: {
-    mode: "light",
-  },
-});
-
 const router = createBrowserRouter([
   {
     path: "/",
@@ -36,11 +33,11 @@ const router = createBrowserRouter([
     children: [
       {
         path: "feed",
-        element: <PostList type="user" />,
+        element: <PostList type="feed" feedType="followed" />,
       },
       {
         path: "global",
-        element: <PostList type="all" />,
+        element: <PostList type="feed" feedType="global" />,
       },
       {
         path: "me",
@@ -52,7 +49,11 @@ const router = createBrowserRouter([
       },
       {
         path: "post/:id",
-        element: <Post />,
+        element: <PostView />,
+      },
+      {
+        path: "post/:id/edit",
+        element: <NewPost />,
       },
       {
         path: "search",
@@ -62,6 +63,14 @@ const router = createBrowserRouter([
         path: "newpost",
         element: <NewPost />,
       },
+      {
+        path: "settings",
+        element: <Settings />,
+      },
+      {
+        path: "notifications",
+        element: <ANotification />,
+      },
     ],
   },
   {
@@ -84,10 +93,10 @@ const router = createBrowserRouter([
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <ThemeProvider theme={defaultTheme}>
+      <AppThemeProvider>
         <CssBaseline />
         <RouterProvider router={router} />
-      </ThemeProvider>
+      </AppThemeProvider>
     </Provider>
   </React.StrictMode>
 );

client/src/routes/newPost.tsx

@@ -1,3 +1,93 @@
+import { Box, Button, TextField, Typography } from "@mui/material";
+import { useAppDispatch } from "../app/store";
+import React, { useEffect } from "react";
+import {
+  createPost,
+  selectAPost,
+  updatePost,
+} from "../app/postSlice";
+import { useNavigate, useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+
 export default function NewPost() {
-  return <>New Post</>;
+  const { id } = useParams();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const [newPostText, setNewPostText] = React.useState("");
+  const [newPostTitle, setNewPostTitle] = React.useState("");
+  const aPost = useSelector(selectAPost);
+
+  useEffect(() => {
+    if (id) {
+      setNewPostText(aPost.content);
+      setNewPostTitle(aPost.title);
+    }
+  }, [aPost, id]);
+
+  const handleCreatePost = () => {
+    if (newPostText === "" || newPostTitle === "") return;
+
+    dispatch(createPost(newPostTitle, newPostText));
+    setNewPostText("");
+    setNewPostTitle("");
+    navigate("/global");
+  };
+
+  const handleUpdatePost = () => {
+    if (newPostText === "" || newPostTitle === "") return;
+    if (!id) return;
+
+    dispatch(updatePost(parseInt(id), newPostTitle, newPostText));
+    setNewPostText("");
+    setNewPostTitle("");
+    navigate("/global");
+  };
+
+  return (
+    <Box
+      sx={{
+        margin: "auto",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Typography variant="h4" sx={{ marginBottom: 2 }}>
+        Share your thoughts!
+      </Typography>
+      <TextField
+        label="Title"
+        value={newPostTitle}
+        multiline
+        onChange={(e) => setNewPostTitle(e.target.value)}
+        sx={{ marginBottom: 2 }}
+      />
+      <TextField
+        label="Post"
+        value={newPostText}
+        onChange={(e) => setNewPostText(e.target.value)}
+        multiline
+        rows={4}
+        sx={{ marginBottom: 2 }}
+      />
+      {id ? (
+        <Button
+          variant="contained"
+          color="success"
+          fullWidth
+          onClick={handleUpdatePost}
+        >
+          Update
+        </Button>
+      ) : (
+        <Button
+          variant="contained"
+          color="primary"
+          fullWidth
+          onClick={handleCreatePost}
+        >
+          Create
+        </Button>
+      )}
+    </Box>
+  );
 }

client/src/routes/notification.tsx

@@ -1,3 +1,31 @@
-export default function Notification() {
-  return <>Notification</>;
+import { useSelector } from "react-redux";
+import { selectUserInfo } from "../app/loginSlice";
+import { Box, List, ListItem, Paper } from "@mui/material";
+
+export default function ANotification() {
+  const userInfo = useSelector(selectUserInfo);
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <List sx={{ width: "100%" }}>
+        {userInfo.notifications.length === 0 ? (
+          <ListItem sx={{ width: "100%" }}>No notifications</ListItem>
+        ) : (
+          userInfo.notifications.map((notification: any) => (
+            <ListItem key={notification.id} sx={{ width: "100%" }}>
+              <Paper
+                sx={{
+                  width: "100%",
+                  margin: "1rem",
+                  padding: "0.2rem 1rem 0.2rem 1rem",
+                }}
+              >
+                {notification.message}
+              </Paper>
+            </ListItem>
+          ))
+        )}
+      </List>
+    </Box>
+  );
 }

client/src/routes/post.tsx

@@ -1,3 +1,155 @@
-export default function Post() {
-  return <>Post</>;
+import { useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  commentAPost,
+  deletePost,
+  fetchAPost,
+  selectAPost,
+} from "../app/postSlice";
+import { useAppDispatch } from "../app/store";
+import { useEffect } from "react";
+import React from "react";
+import { Post } from "../api";
+import {
+  Box,
+  Button,
+  Divider,
+  Paper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { AppAvatar } from "../components/appAvatar";
+import { selectUserInfo } from "../app/loginSlice";
+
+export default function PostView() {
+  const postId = useParams<{ id: string }>().id;
+  const storePost = useSelector(selectAPost);
+  const selfUser = useSelector(selectUserInfo);
+  const [postToDisplay, setPostToDisplay] = React.useState<Post | null>(null);
+  const [newComentText, setNewCommentText] = React.useState("");
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    dispatch(fetchAPost(parseInt(postId!, 10)));
+  }, []);
+
+  useEffect(() => {
+    setPostToDisplay(storePost);
+  }, [storePost]);
+
+  const handleCommentPost = () => {
+    if (newComentText.length > 0) {
+      dispatch(commentAPost(postToDisplay!.id!, newComentText));
+      setNewCommentText("");
+    }
+  };
+
+  const handleCancelComment = () => {
+    setNewCommentText("");
+  };
+
+  const handleDeletePost = () => {
+    dispatch(deletePost(postToDisplay!.id!));
+    navigate("/global");
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "60%",
+        margin: "auto",
+        minWidth: "330px",
+      }}
+    >
+      <Box sx={{ width: "100%" }}>
+        <Paper>
+          <Box sx={{ margin: "1rem" }}>
+            <Box
+              sx={{ display: "flex", alignItems: "center", paddingTop: "1rem" }}
+            >
+              {postToDisplay?.createdBy && (
+                <AppAvatar user={postToDisplay?.createdBy!} />
+              )}
+              <Typography
+                variant="subtitle2"
+                sx={{ mb: "0.2rem", ml: "0.3rem" }}
+              >
+                {postToDisplay?.createdBy?.firstName}{" "}
+                {postToDisplay?.createdBy?.lastName}
+              </Typography>
+            </Box>
+            <Divider sx={{ mb: "0.3rem" }} />
+            <Typography variant="h4">{postToDisplay?.title}</Typography>
+            <Typography variant="body1">{postToDisplay?.content}</Typography>
+          </Box>
+        </Paper>
+      </Box>
+      <Box sx={{ width: "100%" }}>
+        {postToDisplay?.createdBy?.id === selfUser?.id && (
+          <Box>
+            <Button onClick={() => navigate("edit")}>Edit</Button>
+            <Button color="warning" onClick={handleDeletePost}>
+              Delete
+            </Button>
+          </Box>
+        )}
+        <TextField
+          label="Add a comment..."
+          fullWidth
+          multiline
+          value={newComentText}
+          onChange={(e) => setNewCommentText(e.target.value)}
+          InputProps={{
+            endAdornment: (
+              <>
+                <Button
+                  variant="contained"
+                  onClick={handleCommentPost}
+                  sx={{
+                    display: `${newComentText.length > 0 ? "inherit" : "none"}`,
+                  }}
+                >
+                  Accept
+                </Button>
+                <Button
+                  variant="outlined"
+                  onClick={handleCancelComment}
+                  sx={{
+                    display: `${newComentText.length > 0 ? "inherit" : "none"}`,
+                    ml: "0.5rem",
+                  }}
+                >
+                  Cancel
+                </Button>
+              </>
+            ),
+          }}
+          sx={{
+            mb: "1rem",
+          }}
+        />
+        <Box>
+          {postToDisplay?.comments?.map((comment) => (
+            <Paper>
+              <Box sx={{ margin: "1rem" }}>
+                <Box sx={{ display: "flex", mb: "0.3rem" }}>
+                  <AppAvatar user={comment.createdBy!} small />
+                  <Typography variant="subtitle2" sx={{ ml: "0.5rem" }}>
+                    {comment.createdBy?.firstName} {comment.createdBy?.lastName}
+                  </Typography>
+                </Box>
+                <Divider sx={{ mb: "0.3rem" }} />
+                <Typography variant="body1">{comment.content}</Typography>
+              </Box>
+            </Paper>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
 }

client/src/routes/postList.tsx

@@ -14,7 +14,8 @@ import PostListItem from "../components/postListItem";
 import { Status } from "../util/types";
 
 interface PostListProps {
-  type: "all" | "user";
+  type: "feed" | "user";
+  feedType?: "global" | "followed";
 }
 
 export default function PostList(props: PostListProps) {
@@ -25,13 +26,33 @@ export default function PostList(props: PostListProps) {
   const [posts, setPosts] = useState<Post[]>([]);
 
   useEffect(() => {
-    dispatch(fetchGlobalPosts());
-    dispatch(fetchFollowedPosts());
-  }, []);
+    if (props.feedType === "global") {
+      dispatch(fetchGlobalPosts());
+    } else {
+      dispatch(fetchFollowedPosts());
+    }
+  }, [props.feedType]);
 
   useEffect(() => {
-    setPosts(props.type === "all" ? globalPosts : followedPosts);
-  }, [followedPosts, globalPosts, props.type]);
+    let postsToDisplay: Post[];
+    if (props.feedType === "global") {
+      postsToDisplay = globalPosts;
+    } else {
+      postsToDisplay = followedPosts;
+    }
+    let sortedPosts: Post[] = [];
+
+    if (postsToDisplay.length > 0) {
+      sortedPosts = [...postsToDisplay].sort((a: Post, b: Post) => {
+        return b.createdAt! > a.createdAt!
+          ? 1
+          : b.createdAt! < a.createdAt!
+          ? -1
+          : 0;
+      });
+    }
+    setPosts(sortedPosts);
+  }, [followedPosts, globalPosts, props.feedType]);
 
   return (
     <Box
@@ -46,17 +67,27 @@ export default function PostList(props: PostListProps) {
         <CircularProgress />
       ) : (
         <>
-          {props.type === "all" && (
+          {props.feedType === "global" && (
             <List>
               {posts.map((post: Post) => (
-                <PostListItem post={post} postType="all" key={post.id} />
+                <PostListItem
+                  post={post}
+                  postType="feed"
+                  feedType="global"
+                  key={post.id}
+                />
               ))}
             </List>
           )}
-          {props.type === "user" && (
+          {props.feedType === "followed" && (
             <List>
               {followedPosts.map((post: Post) => (
-                <PostListItem post={post} postType="user" key={post.id} />
+                <PostListItem
+                  post={post}
+                  postType="feed"
+                  feedType="followed"
+                  key={post.id}
+                />
               ))}
               {followedPosts.length === 0 && (
                 <Box

client/src/routes/search.tsx

@@ -62,7 +62,7 @@ export default function Search() {
       <Paper>
         <List>
           {displayUserList.map((user) => (
-            <>
+            <Box key={user.id}>
               <ListItem key={user.id}>
                 <Button
                   fullWidth
@@ -78,7 +78,7 @@ export default function Search() {
                 </Button>
               </ListItem>
               <Divider sx={{ mb: "0.3rem" }} />
-            </>
+            </Box>
           ))}
         </List>
       </Paper>

client/src/routes/settings.tsx

@@ -0,0 +1,56 @@
+import { Box, Checkbox, Divider, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import {
+  selectDarkMode,
+  selectUserInfo,
+  setDarkMode,
+  updateMe,
+} from "../app/loginSlice";
+import { useAppDispatch } from "../app/store";
+import { useEffect, useState } from "react";
+
+export default function Settings() {
+  const userInfo = useSelector(selectUserInfo);
+  const darkModeState = useSelector(selectDarkMode);
+  const dispatch = useAppDispatch();
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [darkModeLocal, setDarkModeLocal] = useState(false);
+
+  useEffect(() => {
+    setIsPrivate(userInfo.isPrivate);
+  }, [userInfo]);
+
+  useEffect(() => {
+    setDarkModeLocal(darkModeState);
+  }, [darkModeState]);
+
+  const handleDarkChange = () => {
+    dispatch(setDarkMode(!darkModeLocal));
+    localStorage.setItem("darkMode", darkModeLocal ? "false" : "true");
+  };
+
+  const handlePrivateChange = () => {
+    dispatch(updateMe(!isPrivate));
+  };
+
+  return (
+    <Box>
+      <Box>
+        <Checkbox checked={isPrivate} onChange={handlePrivateChange} /> Private
+        profile
+      </Box>
+
+      <Divider />
+      <Box>
+        <Checkbox checked={darkModeLocal} onChange={handleDarkChange} /> Dark
+        mode
+      </Box>
+
+      <Divider />
+      <Box>
+        <Typography variant="h4">More Settings</Typography>
+        <Typography variant="body1">Coming soon...</Typography>
+      </Box>
+    </Box>
+  );
+}

server/src/controller/UserController.ts

@@ -213,8 +213,9 @@ export class UserController {
           notifications: true,
         },
       });
-
-      user.isPrivate = req.body.isPrivate || user.isPrivate;
+      // Strict check, as we are dealing with a boolean value in this field
+      user.isPrivate =
+        req.body.isPrivate === undefined ? user.isPrivate : req.body.isPrivate;
       user.profilePictureId =
         req.body.profilePictureId || user.profilePictureId;
       await this.userRepository.save(user);

server/src/controller/postController.ts

@@ -53,18 +53,16 @@ export class PostController {
     const filteredPosts = posts.filter((post) => {
       let followStatus = false;
 
-      if(post.createdBy.followers){
+      // Get if the req user is in the follower list
+      if (post.createdBy.followers) {
         followStatus = post.createdBy.followers.some(
-           (follower) => follower.id === req.user.id
-        );
-      }
-      
-      if (post.createdBy.isPrivate && !followStatus) {
-        return post.createdBy.followers.some(
           (follower) => follower.id === req.user.id
         );
       }
-      return true;
+
+      return !(post.createdBy.isPrivate && !followStatus);
+
+
     });
 
     res.status(200).send(filteredPosts);
@@ -141,20 +139,32 @@ export class PostController {
     const user = await this.userRepository.findOne({
       where: { id: req.user.id },
       relations: {
-        followed: true,
-        posts: { likedBy: true, comments: true },
+        followed: { posts: { likedBy: true, comments: true } },
+        posts: {
+          likedBy: true,
+          comments: true,
+          createdBy: true,
+        },
       },
     });
 
+    // Get all posts from the followed users
     const followedPosts = user.followed
-      .map((followedUser) => followedUser.posts)
+      .map((followedUser) => {
+        followedUser.deleteSensitiveFields();
+        if (followedUser.posts) {
+          return followedUser.posts.map((post) => {
+            if (post.likedBy.length > 0) {
+              post.likedBy.forEach((user) => user.deleteSensitiveFields());
+            }
+            return {
+              ...post,
+              createdBy: followedUser,
+            };
+          });
+        }
+      })
       .flat();
-
-    // Remove sensitive fields
-    followedPosts.forEach((post) => {
-      post.deleteSensitiveFields();
-    });
-
     res.send(followedPosts);
   });
 

server/src/entity/Post.ts

@@ -28,11 +28,17 @@ export class Post {
 
     public deleteSensitiveFields(){
         this.createdBy.deleteSensitiveFields()
-        if(this.likedBy.length > 0){
-            this.likedBy.forEach(user => user.deleteSensitiveFields())
+        if (this.likedBy) {
+          if (this.likedBy.length > 0) {
+            this.likedBy.forEach((user) => user.deleteSensitiveFields());
+          }
         }
-        if(this.comments.length > 0){
-            this.comments.forEach(comment => comment.createdBy.deleteSensitiveFields())
+        if (this.comments) {
+          if (this.comments.length > 0) {
+            this.comments.forEach((comment) =>
+              comment.createdBy.deleteSensitiveFields()
+            );
+          }
         } 
 
     }