From 9cd6073480d17d04091ec759ee0f5ea000a7fc6b Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Wed, 6 Nov 2024 23:37:05 +0530 Subject: [PATCH 1/3] add discussions page --- frontend/src/MainContent.jsx | 2 + frontend/src/components/Discussions.jsx | 233 ++++++++++++++++++++++++ frontend/src/pages/Home.jsx | 2 +- 3 files changed, 236 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/Discussions.jsx diff --git a/frontend/src/MainContent.jsx b/frontend/src/MainContent.jsx index bb9d9e03..f56a2d6c 100644 --- a/frontend/src/MainContent.jsx +++ b/frontend/src/MainContent.jsx @@ -44,6 +44,7 @@ import Feedback from './components/Feedback'; import SoilTestingCentres from './components/SoilTestingCenters'; import NewsForum from './components/NewsForum'; import ElectricalElectronicsShops from './components/ElectricalElectronicsShops'; +import DiscussionPage from './components/Discussions'; //AgroRentAI import HeroSectionRent from './AgroRentAI/HeroSectionRent'; import NavigateProducts from './AgroRentAI/NavigateProducts'; @@ -152,6 +153,7 @@ const MainContent = () => { } /> } /> } /> + } /> {/* AgroRentAI Routes */} } /> } /> diff --git a/frontend/src/components/Discussions.jsx b/frontend/src/components/Discussions.jsx new file mode 100644 index 00000000..22f57bd7 --- /dev/null +++ b/frontend/src/components/Discussions.jsx @@ -0,0 +1,233 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; + + +const DiscussionPage = () => { + const [posts, setPosts] = useState([]); + const [newPostContent, setNewPostContent] = useState(""); + const [newCommentContent, setNewCommentContent] = useState(""); + const [selectedPostId, setSelectedPostId] = useState(null); + const [loading, setLoading] = useState(true); + const [alert, setAlert] = useState(null); // For handling success/error messages + + const ApiUrl = process.env.NODE_ENV === "production" + ? "https://yourapiurl.com" + : "http://localhost:8080"; + + // Fetch posts with comments + useEffect(() => { + const fetchPosts = async () => { + try { + const response = await axios.get(`${ApiUrl}/api/discussions/posts`); + setPosts(response.data); + setLoading(false); + } catch (error) { + console.error("Error fetching posts:", error); + setLoading(false); + setAlert({ type: "error", message: "Failed to load posts." }); + } + }; + + fetchPosts(); + }, []); + + // Handle creating a new post + const handlePostSubmit = async (e) => { + e.preventDefault(); + try { + const newPost = { + content: newPostContent, + images: [], // Placeholder for images + author: "6725ba1d61742ceab8724142", // Replace with the current user's ID + }; + + const response = await axios.post(`${ApiUrl}/api/discussions/posts`, newPost); + setPosts((prevPosts) => [response.data.post, ...prevPosts]); // Add new post without reload + setNewPostContent(""); // Clear input field + setAlert({ type: "success", message: "Post created successfully!" }); + } catch (error) { + console.error("Error creating post:", error); + setAlert({ type: "error", message: "Failed to create post." }); + } + }; + + // Handle creating a new comment + const handleCommentSubmit = async (e) => { + e.preventDefault(); + try { + const newComment = { + content: newCommentContent, + author: "6728e52174915a9964fecf5a", // Replace with current user's ID + }; + + const response = await axios.post( + `${ApiUrl}/api/discussions/posts/6729c51729c24c5b6589b8ac/comments`, + newComment + ); + + // Update comments of the selected post + setPosts((prevPosts) => { + return prevPosts.map((post) => + post._id === selectedPostId + ? { ...post, comments: [response.data.comment, ...post.comments] } + : post + ); + }); + + setNewCommentContent(""); // Clear comment input field + setSelectedPostId(null); // Close comment form + setAlert({ type: "success", message: "Comment added successfully!" }); + } catch (error) { + console.error("Error adding comment:", error); + setAlert({ type: "error", message: "Failed to add comment." }); + } + }; + + // Handle deleting a comment + const handleDeleteComment = async (postId, commentId) => { + try { + await axios.delete(`${ApiUrl}/api/discussions/posts/${postId}/comments/${commentId}`); + + // Remove deleted comment from the post's comments array + setPosts((prevPosts) => + prevPosts.map((post) => + post._id === postId + ? { ...post, comments: post.comments.filter((comment) => comment._id !== commentId) } + : post + ) + ); + setAlert({ type: "success", message: "Comment deleted successfully!" }); + } catch (error) { + console.error("Error deleting comment:", error); + setAlert({ type: "error", message: "Failed to delete comment." }); + } + }; + + // Handle closing the alert + const handleAlertClose = () => { + setAlert(null); // Clear the alert state when the user clicks the cancel button + }; + + if (loading) { + return
Loading posts...
; + } + + return ( +
+
+

Discussion Forum

+ + {/* Alert Message with Close Button */} + {alert && ( +
+ {alert.message} + +
+ )} + + {/* Create a new post */} +
+

Create a New Post

+
+ + +
+
+ + {/* Display posts */} +
+ {posts.length > 0 ? ( + posts.map((post) => ( +
+
+

{post.author.firstName} {post.author.lastName}

+

{new Date(post.createdAt).toLocaleString()}

+
+
+

{post.content}

+
+ + {/* Display comments */} + {selectedPostId === post._id && ( +
+

Comments:

+ {post.comments.length > 0 ? ( + post.comments.map((comment) => ( +
+
+

+ {comment.author.firstName} {comment.author.lastName} +

+

{comment.content}

+
+ +
+ )) + ) : ( +

No comments yet. Be the first to comment!

+ )} + +
+ )} + + {/* Add comment form */} + {selectedPostId === post._id ? ( +
+ + +
+ ) : ( + + )} +
+ )) + ) : ( +

No posts available.

+ )} +
+
+
+ + ); +}; + +export default DiscussionPage; diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index ce37314f..1ea2f638 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -25,7 +25,7 @@ export default function Home() { useEffect(() => { const handleScroll = () => setScrollY(window.scrollY); window.addEventListener('scroll', handleScroll); - return () => window.removeEventListener('scroll', handleScroll); + return () => window.EventListener('scroll', handleScroll); }, []); const handleChatBotAuthentication = () => { From b05c6cd6f6283fe338ca68832192f479ee98922b Mon Sep 17 00:00:00 2001 From: Haseeb Zaki <147314463+haseebzaki-07@users.noreply.github.com> Date: Wed, 6 Nov 2024 23:40:49 +0530 Subject: [PATCH 2/3] Update Home.jsx --- frontend/src/pages/Home.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 1ea2f638..ce37314f 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -25,7 +25,7 @@ export default function Home() { useEffect(() => { const handleScroll = () => setScrollY(window.scrollY); window.addEventListener('scroll', handleScroll); - return () => window.EventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); }, []); const handleChatBotAuthentication = () => { From 22923fbe4aae3b22b52caf1b5acb773ec57620d8 Mon Sep 17 00:00:00 2001 From: Haseeb Zaki <147314463+haseebzaki-07@users.noreply.github.com> Date: Wed, 6 Nov 2024 23:42:15 +0530 Subject: [PATCH 3/3] Update Discussions.jsx --- frontend/src/components/Discussions.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Discussions.jsx b/frontend/src/components/Discussions.jsx index 22f57bd7..67ba01f1 100644 --- a/frontend/src/components/Discussions.jsx +++ b/frontend/src/components/Discussions.jsx @@ -38,7 +38,7 @@ const DiscussionPage = () => { const newPost = { content: newPostContent, images: [], // Placeholder for images - author: "6725ba1d61742ceab8724142", // Replace with the current user's ID + author: userId, // Replace with the current user's ID }; const response = await axios.post(`${ApiUrl}/api/discussions/posts`, newPost); @@ -57,11 +57,11 @@ const DiscussionPage = () => { try { const newComment = { content: newCommentContent, - author: "6728e52174915a9964fecf5a", // Replace with current user's ID + author: userId , // Replace with current user's ID }; const response = await axios.post( - `${ApiUrl}/api/discussions/posts/6729c51729c24c5b6589b8ac/comments`, + `${ApiUrl}/api/discussions/posts/${postId}/comments`, newComment );