added liked reviews with dynamic update

394-w25 · Jan 24, 2025 · 9c6dfac · 9c6dfac
1 parent 20da5b4
commit 9c6dfac
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 10 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -32,6 +32,7 @@ function App() {
   const [friends, setFriends] = useState([]);
   const [filteredPost, setFilteredPost] = useState([]);
   const [authLoaded, setAuthLoaded] = useState(false);
+  const [likedPosts, setLikedPosts] = useState([]);
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (curUser) => {
@@ -114,8 +115,7 @@ function App() {
           ) : (
             <Route path="/" element={<Feed friends={friends} />} />
           )}
-
-          <Route path="/feed" element={isAuthenticated ? <Feed friends={friends} /> : <Navigate to="/" />} />
+          <Route path="/feed" element={isAuthenticated ? <Feed friends={friends} setLikedPosts={setLikedPosts} /> : <Navigate to="/" />} />
           <Route path="/submission" element={isAuthenticated ? <Submission userName={user} /> : <Navigate to="/" />} />
           <Route path="/search" element={user ? <SearchPage userUID={user.uid} /> : <Navigate to="/" />} />
           <Route 
@@ -128,12 +128,14 @@ function App() {
                 friends={friends}
                 filteredPost={filteredPost}
                 setFilteredPost={setFilteredPost} 
+                likedPosts={likedPosts}
               /> 
               : <Navigate to="/" />} 
           />
           <Route path="/my-friends" element={isAuthenticated ? <MyFriends user={user} friends={friends} /> : <Navigate to="/" />} />
           <Route path="/rating-history" element={isAuthenticated ? <RatingHistory userName={user} profilePic={profilePic} filteredPost={filteredPost} setFilteredPost={setFilteredPost}/> : <Navigate to="/" />} />
-          <Route path="/comment/:post_id" element={isAuthenticated ? <Comment userName={user} profilePic={profilePic} /> : <Navigate to="/" />} />
+          <Route path="/comment/:post_id" element={isAuthenticated ? <Comment userName={user} profilePic={profilePic} setLikedPosts={setLikedPosts} /> : <Navigate to="/" />} />
+          <Route path="/liked-posts" element={isAuthenticated ? <Feed friends={friends} likedPosts={likedPosts} setLikedPosts={setLikedPosts} /> : <Navigate to="/" />} />
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>
       </Router>

diff --git a/src/components/Account/Account.jsx b/src/components/Account/Account.jsx
@@ -13,7 +13,8 @@ function Account({
   userName,
   userEmail,
   profilePic,
-  filteredPost
+  filteredPost,
+  likedPosts,
 }) {
   const navigate = useNavigate();
   const [friendCount, setFriendCount] = useState(0);
@@ -71,6 +72,7 @@ function Account({
         <Button
           variant="contained"
           className="liked-reviews-btn"
+          onClick={() => navigate("/liked-reviews")}
           endIcon={<FavoriteBorderIcon />}
         >
           Liked Reviews

diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx
@@ -9,7 +9,7 @@ import Post from '../Post/Post';
 import { useParams } from 'react-router-dom';
 import './Comment.css';
 
-function Comment({ userName, profilePic }) {
+function Comment({ userName, profilePic, setLikedPosts }) {
     const post_id = useParams().post_id;
     const [postInfo, setPostInfo] = useState(null);
     const [body, setBody] = useState("");
@@ -92,7 +92,7 @@ function Comment({ userName, profilePic }) {
                     Comments for {post_id}
                 </Typography> */}
                 {postInfo ? (
-                    <Post post={postInfo} friends={[]} />
+                    <Post post={postInfo} setLikedPosts={setLikedPosts} friends={[]} />
                 ) : (
                     <p>Loading post information...</p>
                 )}

diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx
@@ -11,6 +11,7 @@ import { collection, getDocs } from "firebase/firestore";
 import {db} from "../../utilities/firebase";
 import "./Feed.css";
 import AppBar from '../AppBar/AppBar';
+import { set } from 'firebase/database';
 
 async function getPostsFromDB() {
   const querySnapshot = await getDocs(collection(db, "posts"));
@@ -23,7 +24,7 @@ async function getPostsFromDB() {
 
 const fake_friends = ["Alice", "Bob", "Charlie", "David"];
 
-function Feed({ friends }) {
+function Feed({ friends, setLikedPosts }) {
   const [posts, setPosts] = useState([]);
   const [search, setSearch] = useState("");
   const [filteredPosts, setFilteredPosts] = useState([]);
@@ -80,7 +81,7 @@ function Feed({ friends }) {
               .sort((a, b) => b.date.seconds - a.date.seconds)
               .map((post) => (
                 <div key={post.id}>
-                  <Post post={post} isPublic={tabValue === 0} />
+                  <Post post={post} setLikedPosts={setLikedPosts} isPublic={tabValue === 0} />
                 </div>
               ))
           )}

diff --git a/src/components/LikedReviews/LikedReviews.css b/src/components/LikedReviews/LikedReviews.css
diff --git a/src/components/LikedReviews/LikedReviews.jsx b/src/components/LikedReviews/LikedReviews.jsx
diff --git a/src/components/Post/Post.jsx b/src/components/Post/Post.jsx
@@ -7,6 +7,7 @@ import StarBorderIcon from '@mui/icons-material/StarBorder';
 import Heart from "react-heart";
 import ModeCommentOutlinedIcon from '@mui/icons-material/ModeCommentOutlined';
 import "./Post.css";
+import { set } from 'firebase/database';
 
 const courseClassMap = {
   CS: "post-bar-cs",
@@ -53,7 +54,7 @@ function abbreviateCount(num) {
   return val < 10 ? `${val}k` : `${Math.round(val)}k`;
 }
 
-function Post({ post, isPublic }) {
+function Post({ post, isPublic, setLikedPosts }) {
   const navigate = useNavigate();
 
   // Show anonymous name only for public feed, otherwise show actual username
@@ -67,6 +68,19 @@ function Post({ post, isPublic }) {
   // const [isLiked, setIsLiked] = React.useState(false);
   const [active, setActive] = React.useState(false);
 
+  function handleLikedPost(post, setActive, setLikedPosts) {
+    setActive(!active);
+    console.log("Liked post: ", post.id);
+    setLikedPosts((prevLikedPosts) => {
+      if (active) {
+        console.log("Unliking post: ", post.id);
+        return prevLikedPosts.filter((likedPost) => likedPost !== post.id);
+      } else {
+        return [...prevLikedPosts, post.id];
+      }
+    })
+  }
+
   return (
     <div className="post-wrapper" onClick={() => navigate(`/comment/${post.id}`)}>
       <div className={`post-top-bar ${getCourseBarClass(post.course_name)}`}>
@@ -107,7 +121,9 @@ function Post({ post, isPublic }) {
             </div>
             <div className="post-icons">
               <ModeCommentOutlinedIcon className="post-icon" />
-              <Heart className="heart-icon" isActive={active} onClick={() => setActive(!active)} />
+              <Heart className="heart-icon" isActive={active} onClick={() => {
+                handleLikedPost(post, setActive, setLikedPosts)}
+               } />
             </div>
           </div>
         </div>