Feature/new post system

project2-back/src/main/java/net/revature/project1/repository/PostRepo.java

@@ -23,7 +23,7 @@ public interface PostRepo extends JpaRepository<Post, Long> {
             "p.postAt) " +
             "FROM Post p WHERE p.id = :id")
     Optional<PostSmallResponseDto> getUserPost(@Param("id") Long id);
-
+  
     @Query("""
     SELECT new net.revature.project1.dto.PostResponseDto(
         p.id,

project2-front/src/component/Navbar/NavContext/NavContext.jsx

@@ -1,12 +1,41 @@
-import {createContext, useState} from "react";
+import {createContext, useEffect, useState} from "react";
 import PropTypes from 'prop-types';
 import Cookies from "js-cookie";
 import { projectApi } from "../../../util/axios";
+import {useLocation, useNavigate} from "react-router-dom";
 
 const NavContext = createContext(null);
 
 export const NavProvider = ({children}) => {
-    const [currentNav, setCurrentNav] = useState('home');
+  const [currentNav, setCurrentNav] = useState('home');
+  const [history, setHistory] = useState([]);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    setHistory((prevStack) => {
+      if (prevStack[prevStack.length - 1] === location.pathname) {
+        return prevStack;
+      }
+      return [...prevStack, location.pathname];
+    });
+  }, [location]);
+
+  const handleBack = (steps = 1) => {
+    if (steps >= history.length) {
+      console.warn("Cannot go back further than the beginning of history.");
+      return;
+    }
+
+    const newHistoryStack = [...history];
+    for (let i = 0; i < steps; i++) {
+      newHistoryStack.pop();
+    }
+
+    const previousPath = newHistoryStack[newHistoryStack.length - 1];
+    setHistory(newHistoryStack);
+    navigate(previousPath);
+  };
 
     const getUser = async () => {
         const token = Cookies.get('jwt');    
@@ -25,9 +54,11 @@ export const NavProvider = ({children}) => {
         }
 
     const value = {
-        currentNav,
-        setCurrentNav,
-        getUser
+      currentNav,
+      setCurrentNav,
+      getUser,
+      history,
+      handleBack,
     }
 
     return (

project2-front/src/component/Post/Context/PostProvider.jsx

@@ -253,32 +253,50 @@ export const PostProvider = ({ children }) => {
         }
     }
 
-    const value = {
-        listPostData,
-        setListPostData,
-        file: postData.file,
-        previewUrl: postData.previewUrl,
-        comment: postData.comment,
-        isVideo: postData.isVideo,
-        handleImageSelect: handleMediaSelect,
-        handleYouTubeSelect: handleYouTubeSelect,
-        setComment,
-        submitPost,
-        resetPost,
-        getPost,
-        deletePost,
-        editPost,
-        likePost,
-        isUserLike,
-        getChildren,
-        getUserPost
-    };
+  const getPostUnique = async (postId) => {
+    if(!postId){
+      return;
+    }
 
-    return (
-        <PostContext.Provider value={value}>
-            {children}
-        </PostContext.Provider>
-    );
+    try {
+      const response  = await projectApi.get(`/post/${postId}`, {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      return response.data;
+    } catch (e) {
+      console.error('Error getting likes for post: ', e.status);
+    }
+  }
+
+  const value = {
+    listPostData,
+    setListPostData,
+    file: postData.file,
+    previewUrl: postData.previewUrl,
+    comment: postData.comment,
+    isVideo: postData.isVideo,
+    handleImageSelect: handleMediaSelect,
+    handleYouTubeSelect: handleYouTubeSelect,
+    setComment,
+    submitPost,
+    resetPost,
+    getPost,
+    deletePost,
+    editPost,
+    likePost,
+    isUserLike,
+    getChildren,
+    getUserPost,
+    getPostUnique
+  };
+
+  return (
+      <PostContext.Provider value={value}>
+          {children}
+      </PostContext.Provider>
+  );
 };
 
 PostProvider.propTypes = {

project2-front/src/component/Post/CreatePost/CreatePost.jsx

@@ -7,18 +7,19 @@ import MediaContainer from "../MediaContainer.jsx";
 import PostInteractiveBar from "./PostInteractiveBar.jsx";
 import {usePost} from "../Context/UsePost.jsx";
 import PropTypes from "prop-types";
+import ReplyContainer from "./ReplyContainer.jsx";
 import "./CreatePost.css"
 
-const CreatePost = ({handleOpen, child}) => {
+const CreatePost = ({handleOpen, child, isReply = false, post}) => {
     const {resetPost, previewUrl, isVideo, submitPost, getPost} = usePost();
 
     const cancelPost = () => {
-        resetPost();
-        handleOpen();
+      resetPost();
+      handleOpen();
     }
 
     const handleSubmit = async () => {
-        handleOpen();
+      handleOpen();
         if(child === undefined || child === null) {
             await submitPost(null);
         } else {
@@ -37,16 +38,17 @@ const CreatePost = ({handleOpen, child}) => {
         >
             <Box
                 sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  width: '600px',
-                  height: 'auto',
-                  maxHeight: '85vh',
-                  borderRadius: '15px',
-                  backgroundColor: 'white',
-                  padding: '10px',
-                  overflowX: 'hidden',
-                  overflowY: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minWidth: '550px',
+                    maxWidth: '550px',
+                    minHeight: '400px',
+                    maxHeight: '90vh',
+                    height: 'auto',
+                    borderRadius: '15px',
+                    backgroundColor: 'white',
+                    padding: '10px',
+                    overflow: 'hidden',
                 }}
             >
                 <Box
@@ -80,6 +82,8 @@ const CreatePost = ({handleOpen, child}) => {
                     </Button>
                 </Box>
 
+              {isReply && <ReplyContainer post={post}/>}
+
                 <Box sx={{
                     width: '100%',
                     display: 'flex',
@@ -113,15 +117,34 @@ const CreatePost = ({handleOpen, child}) => {
                 >
                     {previewUrl ? <MediaContainer className="MediaContainerCreatePost" media={previewUrl} isVideo={isVideo}/> : null}
                 </Box>
+              <Box
+                sx={{
+                  marginTop: 'auto',
+                }}
+              >
                 <PostInteractiveBar/>
+              </Box>
             </Box>
         </Backdrop>
     )
 }
 
 CreatePost.propTypes = {
-    handleOpen: PropTypes.func,
-    child: PropTypes.number,
+  handleOpen: PropTypes.func,
+  child: PropTypes.number,
+  isReply: PropTypes.bool,
+  post: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    username: PropTypes.string.isRequired,
+    profile_pic: PropTypes.string,
+    profilePic: PropTypes.string,
+    displayName: PropTypes.string,
+    postAt: PropTypes.string,
+    comment: PropTypes.string.isRequired,
+    commentCount: PropTypes.number,
+    likeCount: PropTypes.number,
+    media: PropTypes.string,
+  })
 };
 
 export default CreatePost;

project2-front/src/component/Post/CreatePost/ReplyContainer.jsx

@@ -0,0 +1,110 @@
+import PropTypes from "prop-types";
+import {Box, Typography} from "@mui/material";
+import UserAvatar from "../../AvatarComponent/UserAvatar.jsx";
+import {HorizontalRule} from "@mui/icons-material";
+import MediaContainer from "../MediaContainer.jsx";
+
+const ReplyContainer = ({post}) => {
+  return (
+    <Box
+      sx={{
+        marginTop: '10px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        <Box
+          sx={{
+            marginLeft: '10px',
+          }}
+        >
+          <UserAvatar username={post.username} width={50} height={50} image={post.profilePic}/>
+        </Box>
+
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <Typography
+            variant="h6"
+            color="secondary"
+            sx={{
+              marginLeft: "5px",
+              marginBottom: "5px",
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              fontSize: "15px",
+              color: "rgb(11, 15, 20)",
+              paddingLeft: "5px",
+            }}
+          >
+            {post.displayName}
+          </Typography>
+
+          <Typography
+            variant="h6"
+            color="secondary"
+            sx={{
+              marginLeft: "5px",
+              marginBottom: "5px",
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "400",
+              fontSize: "15px",
+              color: "rgb(11, 15, 20)",
+              paddingLeft: "5px",
+            }}
+          >
+            {post.comment}
+          </Typography>
+        </Box>
+
+        {post.media ? <Box
+          sx={{
+            display: "flex",
+            marginLeft: "auto",
+            width: "70px",
+            height: "70px",
+            paddingRight: '20px',
+          }}
+        >
+          <MediaContainer media={post.media}/>
+        </Box> : null}
+      </Box>
+      <HorizontalRule
+        sx={{
+          marginTop: '15px',
+          marginBottom: '5px',
+          color: 'rgb(212,217,225)',
+          width: '100%',
+          height: '1px',
+          backgroundColor: 'rgb(212,217,225)',
+        }}
+      />
+    </Box>
+  )
+}
+
+ReplyContainer.propTypes = {
+  post: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    username: PropTypes.string.isRequired,
+    profile_pic: PropTypes.string,
+    profilePic: PropTypes.string,
+    displayName: PropTypes.string,
+    postAt: PropTypes.string,
+    comment: PropTypes.string.isRequired,
+    commentCount: PropTypes.number,
+    likeCount: PropTypes.number,
+    media: PropTypes.string,
+  }).isRequired,
+}
+
+export default ReplyContainer;