From 7e725274402a63d92a8200b22111222f63b20a23 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Sat, 1 Jul 2023 12:23:06 +0000
Subject: [PATCH] #27 Add bucketlist to post and navbar

---
 src/App.js                   | 32 +++++++++++++++++++++-----
 src/components/NavBar.js     |  7 ++++++
 src/pages/posts/Post.js      | 44 ++++++++++++++++++++++++++++++++++++
 src/pages/posts/PostsPage.js |  1 -
 4 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index d97e7f7..0be1712 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index fb54ed9..c5b661d 100644
--- a/src/components/NavBar.js
+++ b/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>
diff --git a/src/pages/posts/Post.js b/src/pages/posts/Post.js
index 06b4b95..4434fc5 100644
--- a/src/pages/posts/Post.js
+++ b/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>
diff --git a/src/pages/posts/PostsPage.js b/src/pages/posts/PostsPage.js
index 1ead133..f64b9ed 100644
--- a/src/pages/posts/PostsPage.js
+++ b/src/pages/posts/PostsPage.js
@@ -7,7 +7,6 @@ import Container from "react-bootstrap/Container";
 import Post from "./Post";
 import Asset from "../../components/Asset";
 
-import appStyles from "../../App.module.css";
 import styles from "../../styles/PostsPage.module.css";
 import { useLocation } from "react-router-dom";
 import { axiosReq } from "../../api/axiosDefaults";