#27 Add bucketlist to post and navbar

src/App.js

@@ -28,9 +28,7 @@ function App() {
             exact
             path="/"
             render={() => (
-              <PostsPage
-                message="No results found. Adjust the search keyword."
-              />
+              <PostsPage message="No results found. Adjust the search keyword." />
             )}
           />
           <Route
@@ -53,15 +51,37 @@ function App() {
               />
             )}
           />
+          <Route
+            exact
+            path="/bucketlist"
+            render={() => (
+              <PostsPage
+                message="No results found. Adjust the search keyword or add a post to your bucketlist."
+                filter={`bucketlist__owner=${traveler_id}&ordering=-created_at&`}
+              />
+            )}
+          />
           <Route exact path="/login" render={() => <LoginForm />} />
           <Route exact path="/signup" render={() => <SignUpForm />} />
           <Route exact path="/posts/create" render={() => <PostCreateForm />} />
           <Route exact path="/posts/:id/edit" render={() => <PostEditForm />} />
           <Route exact path="/posts/:id" render={() => <PostPage />} />
           <Route exact path="/travelers/:id" render={() => <TravelerPage />} />
-          <Route exact path="/travelers/:id/edit/username" render={() => <UsernameForm />} />
-          <Route exact path="/travelers/:id/edit/password" render={() => <UserPasswordForm />} />
-          <Route exact path="/travelers/:id/edit" render={() => <TravelerEditForm />} />
+          <Route
+            exact
+            path="/travelers/:id/edit/username"
+            render={() => <UsernameForm />}
+          />
+          <Route
+            exact
+            path="/travelers/:id/edit/password"
+            render={() => <UserPasswordForm />}
+          />
+          <Route
+            exact
+            path="/travelers/:id/edit"
+            render={() => <TravelerEditForm />}
+          />
           <Route render={() => <p>Page not found!</p>} />
         </Switch>
       </Container>

src/components/NavBar.js

@@ -60,6 +60,13 @@ const NavBar = () => {
       >
         <i className="fa-solid fa-heart"></i>Liked
       </NavLink>
+      <NavLink
+        to="/bucketlist"
+        className={styles.NavLink}
+        activeClassName={styles.Active}
+      >
+        <i class="fa-solid fa-bucket"></i>Bucketlist
+      </NavLink>
       <NavLink to="/" onClick={handleSignOut} className={styles.NavLink}>
         <i className="fa-solid fa-door-closed"></i>Logout
       </NavLink>

src/pages/posts/Post.js

@@ -22,6 +22,8 @@ const Post = (props) => {
     comments_count,
     likes_count,
     like_id,
+    bucketlists_count,
+    bucketlist_id,
     title,
     content,
     image,
@@ -64,6 +66,22 @@ const Post = (props) => {
       console.log(err);
     }
   };
+
+  const handleBucketlist = async () => {
+    try {
+      const { data } = await axiosReq.post("/bucketlist/", { post: id });
+      setPosts((prevPosts) => ({
+        ...prevPosts,
+        results: prevPosts.results.map((post) => {
+          return post.id === id
+            ? { ...post, bucketlists_count: post.bucketlists_count + 1, bucketlist_id: data.id }
+            : post;
+        }),
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
   const handleUnlike = async () => {
     try {
@@ -81,6 +99,22 @@ const Post = (props) => {
     }
   };
 
+  const handleRemoveFromBucketlist = async () => {
+    try {
+      await axiosReq.delete(`/bucketlist/${bucketlist_id}/`);
+      setPosts((prevPosts) => ({
+        ...prevPosts,
+        results: prevPosts.results.map((post) => {
+          return post.id === id
+            ? { ...post, bucketlists_count: post.bucketlists_count - 1, bucketlist_id: null }
+            : post;
+        }),
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <Card className={styles.Post}>
       <Card.Body>
@@ -131,6 +165,16 @@ const Post = (props) => {
             </OverlayTrigger>
           )}
           {likes_count}
+            {bucketlist_id ? (
+            <span onClick={handleRemoveFromBucketlist}>
+              <i className={`fa-solid fa-bucket ${styles.Heart}`} />
+            </span>
+            ) : (
+              <span onClick={handleBucketlist}>
+              <i className={`fa-solid fa-bucket ${styles.HeartOutline}`} />
+              </span>
+            )}
+          {bucketlists_count}
           <Link to={`/posts/${id}`}>
             <i className="far fa-comments" />
           </Link>