Merge pull request #520 from bounswe/fix/FE-tags-mockPosts

View tags on posts
bounswe · Dec 16, 2024 · 32c31ce · 32c31ce
2 parents cfc9f70 + ca2808c
commit 32c31ce
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 51 deletions.
diff --git a/frontend/src/components/alert/AlertModal.js b/frontend/src/components/alert/AlertModal.js
@@ -1,7 +1,14 @@
 import React, { useEffect } from "react";
 import "../../styles/AlertModal.css";
 
-const AlertModal = ({ message, onConfirm, onCancel, isDanger, textCancel = "Cancel", textConfirm = "Confirm" }) => {
+const AlertModal = ({
+  message,
+  onConfirm,
+  onCancel,
+  isDanger,
+  textCancel = "Cancel",
+  textConfirm = "Confirm",
+}) => {
   useEffect(() => {
     document.body.style.overflow = "hidden";
     return () => {
@@ -14,16 +21,23 @@ const AlertModal = ({ message, onConfirm, onCancel, isDanger, textCancel = "Canc
       <div className="custom-modal-content">
         <h2>{message}</h2>
         <div className="custom-modal-actions">
-          <button className="cancel-btn" onClick={onCancel}>
-            {textCancel}
-          </button>
-          <button className={isDanger ? "danger-btn" : "confirm-btn"} onClick={onConfirm}>
-            {textConfirm}
-          </button>
+          {textCancel && (
+            <button className="cancel-btn" onClick={onCancel}>
+              {textCancel}
+            </button>
+          )}
+          {onConfirm && (
+            <button
+              className={isDanger ? "danger-btn" : "confirm-btn"}
+              onClick={onConfirm}
+            >
+              {textConfirm}
+            </button>
+          )}
         </div>
       </div>
     </div>
   );
 };
 
-export default AlertModal;
+export default AlertModal;
diff --git a/frontend/src/components/community/CommunityPage.js b/frontend/src/components/community/CommunityPage.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import mockPosts from "../../data/mockPosts";
 import { FaSearch } from "react-icons/fa";
 import "../../styles/community/CommunityPage.css";
 import PostCard from "./PostCard";
@@ -64,24 +63,13 @@ const CommunityPage = () => {
         setPosts(transformedPosts);
       } catch (error) {
         console.error("Error fetching posts:", error);
-        setPosts(mockPosts);
       }
     };
 
     fetchPosts();
   }, []);
 
-  const filteredPosts = [...mockPosts, ...posts]
-    .map((post) => {
-      if (mockPosts.some((mock) => mock["post-id"] === post["post-id"])) {
-        return post;
-      } else {
-        return {
-          ...post,
-          user: users[post.author] || post.user,
-        };
-      }
-    })
+  const filteredPosts = posts
     .filter((post) =>
       post.title.toLowerCase().includes(searchTerm.toLowerCase())
     )

diff --git a/frontend/src/components/community/CreatePostPage.js b/frontend/src/components/community/CreatePostPage.js
@@ -3,9 +3,11 @@ import { useNavigate } from "react-router-dom";
 import "../../styles/community/CreatePostPage.css";
 import { apiClient } from "../../service/apiClient";
 import userService from "../../service/userService";
+import { useAlertModal } from "../alert/AlertModalContext";
 
 const CreatePostPage = () => {
   const navigate = useNavigate();
+  const { showModal } = useAlertModal();
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [token, setToken] = useState("");
   const [availableTags, setAvailableTags] = useState([]);
@@ -15,6 +17,7 @@ const CreatePostPage = () => {
   const [showTagSuggestions, setShowTagSuggestions] = useState(false);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
+  const [navigation, setNavigation] = useState(false);
   const tagSearchRef = useRef(null);
   const colors = ["#3498db", "#e74c3c", "#2ecc71", "#f1c40f", "#9b59b6"];
 
@@ -24,10 +27,19 @@ const CreatePostPage = () => {
       setToken(storedToken);
       setIsLoggedIn(true);
     } else {
-      alert("You must be logged in to create a post.");
-      navigate("/login");
+      if (!navigation) {
+        showModal(
+          "You must be logged in to create a post.",
+          () => navigate("/login"),
+          () => navigate("/home"),
+          true,
+          "Home",
+          "Login"
+        );
+        setNavigation(true);
+      }
     }
-  }, [navigate]);
+  }, [navigate, showModal, navigation]);
 
   useEffect(() => {
     const fetchTags = async () => {
@@ -38,7 +50,6 @@ const CreatePostPage = () => {
         console.error("Failed to fetch tags!", error);
       }
     };
-
     fetchTags();
   }, []);
 
@@ -85,7 +96,14 @@ const CreatePostPage = () => {
 
   const handlePost = async () => {
     if (!isLoggedIn) {
-      alert("You must be logged in to create a post.");
+      showModal(
+        "You must be logged in to create a post.",
+        () => navigate("/login"),
+        () => navigate("/home"),
+        true,
+        "Home",
+        "Login"
+      );
       return;
     }
 
@@ -103,8 +121,14 @@ const CreatePostPage = () => {
     try {
       const response = await apiClient.post("/posts/", postData);
       console.log("Post created successfully:", response.data);
-      alert("Post created successfully!");
-      navigate("/community");
+      showModal(
+        "Post created successfully!",
+        () => navigate("/community"),
+        null,
+        false,
+        "",
+        "Ok"
+      );
     } catch (error) {
       console.error("Error creating post:", error);
 
@@ -199,7 +223,10 @@ const CreatePostPage = () => {
 
       <div className="right-section">
         <div className="action-buttons">
-          <button className="cancel-button" onClick={() => navigate("/home")}>
+          <button
+            className="cancel-button"
+            onClick={() => navigate("/community")}
+          >
             Cancel
           </button>
           <button className="preview-button">Preview</button>

diff --git a/frontend/src/components/community/PostView.js b/frontend/src/components/community/PostView.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import mockPosts from "../../data/mockPosts";
 import FinancialGraph from "./FinancialGraph";
 import "../../styles/community/PostView.css";
 import { apiClient } from "../../service/apiClient";
@@ -24,6 +23,7 @@ const PostView = () => {
   const [commentText, setCommentText] = useState("");
   const [tags, setTags] = useState([]);
   const [isLikedByUser, setIsLikedByUser] = useState(false);
+
   const getUserName = async (userID) => {
     try {
       const userData = await apiClient.get(`/users/${userID}`);
@@ -64,10 +64,8 @@ const PostView = () => {
           })
         );
 
-        console.log("backedn, comment", backendComments);
         const loggedInUser = parseInt(UserService.getUserId(), 10);
         const userHasLiked = backendPost.liked_by.includes(loggedInUser);
-
         const normalizedPost = {
           "post-id": backendPost.id,
           user: await getUserName(backendPost.author),
@@ -82,6 +80,7 @@ const PostView = () => {
         };
         setIsLikedByUser(userHasLiked);
         setPost(normalizedPost);
+        setTags(backendPost.tags);
       } catch (error) {
         console.error("Error fetching post:", error);
         setPost(null);
@@ -91,22 +90,10 @@ const PostView = () => {
     };
 
     if (postId) {
-      const fetchData = async () => {
-        const mockPost = mockPosts.find(
-          (post) => post["post-id"] === parseInt(postId)
-        );
-        if (mockPost) {
-          setPost(mockPost);
-          setTags(mockPost.tags);
-          setLoading(false);
-        } else {
-          await fetchBackendPost();
-        }
-      };
-
-      fetchData();
+      fetchBackendPost();
     }
   }, [postId]);
+
   const handleCommentChange = (e) => setCommentText(e.target.value);
 
   const handleSubmitComment = async () => {
@@ -189,7 +176,7 @@ const PostView = () => {
                 color: "#ffffff",
               }}
             >
-              {tag}
+              {tag.name}
             </span>
           ))
         ) : (
@@ -268,9 +255,6 @@ const PostView = () => {
         >
           <FaThumbsUp /> {isLikedByUser ? " Liked" : " Like"}
         </button>
-        <button className="comment-button">
-          <FaComment /> Comment
-        </button>
       </div>
     </div>
   );

diff --git a/frontend/src/styles/AlertModal.css b/frontend/src/styles/AlertModal.css
@@ -26,7 +26,12 @@
 .custom-modal-actions {
   margin-top: 20px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 10px;
+}
+
+.custom-modal-actions button {
+  min-width: 80px;
 }
 
 .cancel-btn,
@@ -37,6 +42,7 @@
   border-radius: 4px;
   cursor: pointer;
   transition: transform 0.2s, background-color 0.2s;
+  text-align: center;
 }
 
 .cancel-btn {
@@ -69,6 +75,9 @@
   transform: scale(1.05);
 }
 
+.custom-modal-actions.single-button {
+  justify-content: flex-end;
+}
 @keyframes fadeIn {
   from {
     opacity: 0;