Last edits fornt-end

src/App.jsx

@@ -4,9 +4,10 @@ import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import { withAuth0 } from '@auth0/auth0-react';
 
+import Comments from './pages/Comments'
+import Dashboard from './pages/Dashboard'
 import NewHeader from './components/NewHeader'
 import NewGoalForm from './components/Goals/NewGoalForm'
-import Dashboard from './pages/Dashboard'
 import Welcome from './components/Welcome'
 import ImageGenerator from './components/ImageGenerator'
 // import Snake from './pages/Snake'
@@ -21,6 +22,7 @@ function App({ auth0 }) {
         <div className='container'>
           <Routes>
             <Route path='/' element={<Dashboard auth0={auth0} />} />
+            <Route path='/comments' element={<Comments auth0={auth0} />} />
             {auth0.isAuthenticated && (
               <>
                 <Route path='/goalForm' element={<NewGoalForm auth0={auth0} />} />

src/components/Goals/GoalItem.jsx

@@ -4,18 +4,16 @@ import { deleteGoal } from '../features/goals/goalSlice'
 function GoalItem({ goal }) {
   const dispatch = useDispatch()
 
-  console.log(goal)
-
   return (
     <div className='goal'>
       <div>{new Date(goal.createdAt).toLocaleString('en-US')}</div>
       <h2>{goal.description}</h2>
       <button onClick={() => dispatch(deleteGoal(goal._id))} className='close'>
         X
       </button>
-      
+
       {goal.isCompleted ? <p> COMPLETED </p> : <p>Not Completed</p>}
-      
+
     </div>
   )
 }

src/components/Goals/Goals.jsx

@@ -55,7 +55,6 @@ function Goals({
     };
 
     const handleMarkComplete = async (e, goalId, description, status, isCompleted = false) => {
-        console.log(e.target)
 
         try {
             let data = {
@@ -64,8 +63,7 @@ function Goals({
                 status: status,
                 isCompleted: isCompleted
             }
-            const res = updateData(`/api/goals/${goalId}`, data)
-            console.log(res)
+            const res = await updateData(`/api/goals/${goalId}`, data)
             e.target.classList.replace('btn-warning', 'btn-success')
         } catch (error) {
             console.error('Error updating data in DB. Received:', error)
@@ -85,7 +83,7 @@ function Goals({
 
             <section className='heading'>
                 {/* DISPLAY GOALS */}
-                <Row xs={1} md={1} lg={2} xl={3} className='g-4 shadow-md'>
+                <Row xs={3} md={3} lg={3} xl={3} className='g-4 shadow-md'>
                     {goalData && goalData.map((goal, idx) => (
                         <>
                             <Col key={goal._id} >

src/components/Goals/NewGoalForm.jsx

@@ -28,7 +28,6 @@ function NewGoalForm({ auth0, handleGetData }) {
                 return
             }
             const token = claim.__raw
-            console.log(tasks)
             await createData(token, POST_GOALS, {
                 "description": text,
                 "status": status,
@@ -63,7 +62,6 @@ function NewGoalForm({ auth0, handleGetData }) {
             if (taskInput !== '') {
                 setTasks([...tasks, taskInput.trim()])
             }
-            console.log(tasks)
             setTaskInput('')
             e.placeholder = 'Task Added. Press Add Goal to save'
         }

src/components/SideBar.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Link } from 'react-router-dom';
 import ImageGenerator from './ImageGenerator'
 
 function SideBar({ auth0, handleShowGoalModal }) {
@@ -18,7 +19,7 @@ function SideBar({ auth0, handleShowGoalModal }) {
                         </a>
                     </li>
                     <li>
-                        <a href='#'>Add Comment</a>
+                        <Link to='/comments'>Add Comment</Link>
                     </li>
                     <li>
                         <a href='#'>Play Snake</a>

src/pages/Comments.jsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import createData from '../utils/createData';
+import fetchData from '../utils/fetchData';
+import { withAuth0 } from '@auth0/auth0-react';
+// import deleteData from '../utils/deleteData'
+
+const API_URL = `${import.meta.env.VITE_SERVER_URL}`;
+
+// Comments.jsx
+const Comments = ({ auth0 }) => {
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState('');
+  // Fetch comments initially and when dependencies change
+
+  const postComment = async (path, body, userId) => {
+    const claim = await auth0.getIdTokenClaims()
+    if (!claim) {
+      console.log('Token claim is undefined.')
+      return
+    }
+    try {
+      const token = claim.__raw
+      const response = await createData(token, path, body, userId)
+      if (response.status === 200) {
+        return response.data
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+
+  useEffect(() => {
+    const getComments = async () => {
+      const claim = await auth0.getIdTokenClaims()
+      if (!claim) {
+        console.log('Token claim is undefined.')
+        return
+      }
+      try {
+        const token = claim.__raw
+        const response = await fetchData(token, `/api/comments`)
+        return response
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    const loadComments = async () => {
+      const fetchedComments = await getComments();
+      setComments(fetchedComments);
+    };
+    if (auth0.isAuthenticated) {
+      loadComments();
+    }
+  }, []);
+
+
+  // Handle new comment submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!newComment.trim()) return;
+    const postedComment = await postComment(
+      `/api/comments`,
+      { text: newComment }
+    )
+
+    if (postedComment) {
+      setComments([...comments, postedComment])
+      setNewComment('')
+    }
+  }
+  return (
+    <div>
+      <h3>Comments</h3>
+      {auth0.isAuthenticated ? (
+        <form onSubmit={handleSubmit}>
+          <textarea
+            name='text'
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            placeholder="Write a comment..."
+          ></textarea>
+          <button type="submit">Post Comment</button>
+        </form>
+      ) : (
+        <p>Please log in to post comments.</p>
+      )}
+      <div>
+        {comments && comments.map((comment) => (
+          <div key={comment._id}>
+            <p>{comment.createdAt}</p>
+            <p>{comment.user.nickname}</p>
+            <p>{comment.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export default Comments;

src/utils/createData.jsx

@@ -10,8 +10,8 @@ const createData = async (token, path, body) => {
   };
 
   try {
-    const response = await axios.post(`${API_URL}${path}`, body, config);
-    return response.data;
+    const response = await axios.post(`${API_URL}${path}`, body, config)
+    return response
   } catch (error) {
     console.error('Error fetching data:', error);
     throw error;

src/utils/updateData.jsx

@@ -31,10 +31,6 @@ const handleUpdateData = async (path, goalId, auth0, body) => {
         }
         const token = claim.__raw
         const response = await updateData(token, `${path}/${goalId}`, body)
-
-        if (response.status === 200) {
-            console.log(response.data)
-        }
     } catch (error) {
         console.error('Error fetching data from DB. Received:', error)
     }