feat: Add bookmark feature to posts

- Implement bookmark button component
- Integrate bookmark functionality in Posts and PostCard components
- Add bookmark list page to view all bookmarked posts
- Include state management for bookmarks using useState
- Update routes in App component to include /app/bookmarks
- Ensure posts can be filtered by tags with the new filter dialog
- Improve UX with conditional rendering of loader and error messages

README.md

@@ -27,7 +27,7 @@ Style Share is a collaborative platform designed to streamline the process of cr
 2. Run the following commands in the backend folder
 
    ```sh
-   npm install
+   npm install 
    npm run build
    npm run dev
    ```

frontend/src/App.tsx

@@ -14,10 +14,20 @@ import AuthenticatedRoute from "./components/AuthenticatedRoute";
 import Profile from "./pages/Profile";
 import React from "react";
 import Loader from "./components/Loader";
+import BookmarkList from './components/BookmarkList';
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
 function App() {
+  const [bookmarks, setBookmarks] = useState<string[]>([]);
+
+  const handleBookmark = (item: string) => {
+    setBookmarks((prevBookmarks) =>
+      prevBookmarks.includes(item)
+        ? prevBookmarks.filter((bookmark) => bookmark !== item)
+        : [...prevBookmarks, item]
+    );
+  };
   return (
     <BrowserRouter>
       <RecoilRoot>

frontend/src/components/BookmarkButton.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+interface BookmarkButtonProps {
+  item: string;
+  onBookmark: (item: string) => void;
+  isBookmarked: boolean;
+}
+
+const BookmarkButton: React.FC<BookmarkButtonProps> = ({ item, onBookmark, isBookmarked }) => {
+  return (
+    <button onClick={() => onBookmark(item)}>
+      {isBookmarked ? 'Remove Bookmark' : 'Add Bookmark'}
+    </button>
+  );
+};
+
+export default BookmarkButton;

frontend/src/components/BookmarkList.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface BookmarkListProps {
+  bookmarks: string[];
+  onRemove: (item: string) => void;
+}
+
+const BookmarkList: React.FC<BookmarkListProps> = ({ bookmarks, onRemove }) => {
+  return (
+    <div>
+      <h2>Bookmarked Items</h2>
+      <ul>
+        {bookmarks.map((bookmark, index) => (
+          <li key={index}>
+            {bookmark} <button onClick={() => onRemove(bookmark)}>Remove</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default BookmarkList;

frontend/src/pages/Posts.tsx

@@ -3,8 +3,15 @@ import axios from 'axios';
 import { IPost } from '../types';
 import Loader from '../components/Loader';
 import PostCard from '../components/PostCard';
+import BookmarkButton from '../components/BookmarkButton';
+import React from 'react';
 
-const Posts = () => {
+interface PostsProps {
+  onBookmark: (item: string) => void;
+  bookmarks: string[];
+}
+
+const Posts: React.FC<PostsProps> = ({ onBookmark, bookmarks }) => {
   const [posts, setPosts] = useState<IPost[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -68,7 +75,7 @@ const Posts = () => {
   );
 
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   if (error) {
@@ -129,7 +136,13 @@ const Posts = () => {
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
         {filteredPosts.map((post) => (
-          <PostCard post={post} />
+          <PostCard key={post.id} post={post}>
+            <BookmarkButton
+              item={post.id}
+              onBookmark={onBookmark}
+              isBookmarked={bookmarks.includes(post.id)}
+            />
+          </PostCard>
         ))}
       </div>
     </div>