From 0d0631629e04bd97f72f5290f0f01f1843921205 Mon Sep 17 00:00:00 2001 From: Ekow Yawson Date: Fri, 22 Dec 2023 18:46:44 -0500 Subject: [PATCH 1/2] Last edits fornt-end --- src/App.jsx | 4 +- src/components/Goals/GoalItem.jsx | 6 +- src/components/Goals/Goals.jsx | 4 +- src/components/Goals/NewGoalForm.jsx | 2 - src/components/SideBar.jsx | 3 +- src/pages/AI.jsx | 0 src/pages/About.jsx | 18 ----- src/pages/Comments.jsx | 101 +++++++++++++++++++++++++++ src/utils/createData.jsx | 4 +- src/utils/updateData.jsx | 4 -- 10 files changed, 111 insertions(+), 35 deletions(-) delete mode 100644 src/pages/AI.jsx delete mode 100644 src/pages/About.jsx diff --git a/src/App.jsx b/src/App.jsx index 4ae0190..8530973 100644 --- a/src/App.jsx +++ b/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 }) {
} /> + } /> {auth0.isAuthenticated && ( <> } /> diff --git a/src/components/Goals/GoalItem.jsx b/src/components/Goals/GoalItem.jsx index a1fef7b..f9250ad 100644 --- a/src/components/Goals/GoalItem.jsx +++ b/src/components/Goals/GoalItem.jsx @@ -4,8 +4,6 @@ import { deleteGoal } from '../features/goals/goalSlice' function GoalItem({ goal }) { const dispatch = useDispatch() - console.log(goal) - return (
{new Date(goal.createdAt).toLocaleString('en-US')}
@@ -13,9 +11,9 @@ function GoalItem({ goal }) { - + {goal.isCompleted ?

COMPLETED

:

Not Completed

} - +
) } diff --git a/src/components/Goals/Goals.jsx b/src/components/Goals/Goals.jsx index 391b136..848140d 100644 --- a/src/components/Goals/Goals.jsx +++ b/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 = { @@ -65,7 +64,6 @@ function Goals({ isCompleted: isCompleted } const res = updateData(`/api/goals/${goalId}`, data) - console.log(res) 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({
{/* DISPLAY GOALS */} - + {goalData && goalData.map((goal, idx) => ( <> diff --git a/src/components/Goals/NewGoalForm.jsx b/src/components/Goals/NewGoalForm.jsx index c71c026..8450a95 100644 --- a/src/components/Goals/NewGoalForm.jsx +++ b/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' } diff --git a/src/components/SideBar.jsx b/src/components/SideBar.jsx index c6140fa..e497ded 100644 --- a/src/components/SideBar.jsx +++ b/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 }) {
  • - Add Comment + Add Comment
  • Play Snake diff --git a/src/pages/AI.jsx b/src/pages/AI.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/About.jsx b/src/pages/About.jsx deleted file mode 100644 index d82cc3e..0000000 --- a/src/pages/About.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { Button, Card, Col, Row, Modal } from 'react-bootstrap' -import { withAuth0 } from '@auth0/auth0-react' -import SideBar from '../components/SideBar' - -function About({ auth0 }) { - return ( - <> - {auth0.isAuthenticated && ( -
    - -
    - )} - - ) -} - -export default withAuth0(About) diff --git a/src/pages/Comments.jsx b/src/pages/Comments.jsx index e69de29..e30c884 100644 --- a/src/pages/Comments.jsx +++ b/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 ( +
    +

    Comments

    + {auth0.isAuthenticated ? ( +
    + + +
    + ) : ( +

    Please log in to post comments.

    + )} +
    + {comments && comments.map((comment) => ( +
    +

    {comment.createdAt}

    +

    {comment.user.nickname}

    +

    {comment.text}

    +
    + ))} +
    +
    + ); +}; +export default Comments; \ No newline at end of file diff --git a/src/utils/createData.jsx b/src/utils/createData.jsx index 0617811..7e658b1 100644 --- a/src/utils/createData.jsx +++ b/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; diff --git a/src/utils/updateData.jsx b/src/utils/updateData.jsx index 0e41515..dc2d799 100644 --- a/src/utils/updateData.jsx +++ b/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) } From b21527ccf5d1cb6b9679e7a36662b3955aed7b7b Mon Sep 17 00:00:00 2001 From: Ekow Yawson Date: Fri, 22 Dec 2023 18:57:13 -0500 Subject: [PATCH 2/2] Last last commit --- src/components/Goals/Goals.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Goals/Goals.jsx b/src/components/Goals/Goals.jsx index 848140d..74b2d53 100644 --- a/src/components/Goals/Goals.jsx +++ b/src/components/Goals/Goals.jsx @@ -63,7 +63,7 @@ function Goals({ status: status, isCompleted: isCompleted } - const res = updateData(`/api/goals/${goalId}`, data) + 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)