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={() => (
-
+
)}
/>
)}
/>
+ (
+
+ )}
+ />
} />
} />
} />
} />
} />
} />
- } />
- } />
- } />
+ }
+ />
+ }
+ />
+ }
+ />
Page not found!
} />
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 = () => {
>
Liked
+
+ Bucketlist
+
Logout
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 (
@@ -131,6 +165,16 @@ const Post = (props) => {
)}
{likes_count}
+ {bucketlist_id ? (
+
+
+
+ ) : (
+
+
+
+ )}
+ {bucketlists_count}
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";