From a5372fbaa7230d6f8e7b620736644a8848896c50 Mon Sep 17 00:00:00 2001 From: MC2b6 Date: Thu, 7 Nov 2024 14:09:43 -0600 Subject: [PATCH 1/2] format: goals list redirects to goal pages --- src/App.jsx | 5 +++ src/components/Home/MacroGoal.jsx | 51 ++++++------------------ src/hooks/useGoalsUpdater/index.js | 3 ++ src/pages/GoalDetails.jsx | 64 ++++++++++++++++++++++++++++++ 4 files changed, 85 insertions(+), 38 deletions(-) create mode 100644 src/pages/GoalDetails.jsx diff --git a/src/App.jsx b/src/App.jsx index 0d355aa..0305bdf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import Footer from '@/components/common/Footer' import Header from '@/components/common/Header' import LoadingCircle from '@/components/common/LoadingCircle' import { UserProvider, useUser } from '@/contexts/UserContext' +import GoalDetails from '@/pages/GoalDetails' import Home from '@/pages/Home' import Streak from '@/pages/Streak' import { theme } from '@/utils/theme' @@ -49,6 +50,10 @@ const App = () => { path='/streak' element={} />} /> + } + /> diff --git a/src/components/Home/MacroGoal.jsx b/src/components/Home/MacroGoal.jsx index a912aa4..e206bb6 100644 --- a/src/components/Home/MacroGoal.jsx +++ b/src/components/Home/MacroGoal.jsx @@ -1,56 +1,31 @@ -import AddItem from '@/components/Home/AddItem' import DeleteItem from '@/components/Home/DeleteItem' -import MicroGoal from '@/components/Home/MicroGoal' import ProgressIndicator from '@/components/Home/ProgressIndicator' -import useGoalsUpdater from '@/hooks/useGoalsUpdater' import { calculateProgress } from '@/utils/calculateProgress' -import { ExpandLess, ExpandMore } from '@mui/icons-material' -import { - Box, - Collapse, - Divider, - IconButton, - List, - Paper, - Typography, -} from '@mui/material' +import { Box, Paper, Typography } from '@mui/material' +import { useNavigate } from 'react-router-dom' const MacroGoal = ({ macroGoal, macroGoalIndex }) => { - const { addMicrogoal, toggleGoalExpansion } = useGoalsUpdater() const progress = calculateProgress(macroGoal.microgoals) + const navigate = useNavigate() + + const handleNavigateToMicroGoals = () => { + navigate(`/goals/${macroGoalIndex}`) + } return ( - + {macroGoal.name} - toggleGoalExpansion(macroGoalIndex)} - size='small' - > - {macroGoal.expanded ? : } - - - - addMicrogoal(macroGoalIndex, microGoalName)} - /> - - {macroGoal.microgoals.map((microGoal, microGoalIndex) => ( - - ))} - - ) } diff --git a/src/hooks/useGoalsUpdater/index.js b/src/hooks/useGoalsUpdater/index.js index c9d751f..2138fae 100644 --- a/src/hooks/useGoalsUpdater/index.js +++ b/src/hooks/useGoalsUpdater/index.js @@ -70,6 +70,9 @@ const useGoalsUpdater = () => { */ toggleMicroGoalExpansion: (goalIndex, microGoalIndex) => toggleExpansion(userContext, goalIndex, microGoalIndex), + + // Gets list of goals for current user + goals: user.goals, } } diff --git a/src/pages/GoalDetails.jsx b/src/pages/GoalDetails.jsx new file mode 100644 index 0000000..a442a7e --- /dev/null +++ b/src/pages/GoalDetails.jsx @@ -0,0 +1,64 @@ +import AddItem from '@/components/Home/AddItem' +import MicroGoal from '@/components/Home/MicroGoal' +import ProgressIndicator from '@/components/Home/ProgressIndicator' +import useGoalsUpdater from '@/hooks/useGoalsUpdater' +import { calculateProgress } from '@/utils/calculateProgress' +import { Box, CircularProgress, List, Paper, Typography } from '@mui/material' +import { useParams } from 'react-router-dom' + +const GoalDetails = () => { + const { macroGoalIndex } = useParams() + const { goals, addMicrogoal } = useGoalsUpdater() + + // Check if goals are loaded and the specific goal exists + if (!goals || !goals[macroGoalIndex]) { + return ( + + + + ) + } + + const macroGoal = goals[macroGoalIndex] + const progress = calculateProgress(macroGoal.microgoals) + + return ( + + + + + + {macroGoal.name} + + + + + + {macroGoal.microgoals.map((microGoal, microGoalIndex) => ( + + ))} + + + addMicrogoal(macroGoalIndex, microGoalName)} + /> + + ) +} + +export default GoalDetails From ea9e809dacc3b2acabb5ec8efb293a0ac3b61b9a Mon Sep 17 00:00:00 2001 From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com> Date: Thu, 7 Nov 2024 17:47:36 -0600 Subject: [PATCH 2/2] refactor(goalpages): Refine styles, remove unused code. --- src/components/Home/MicroGoal.jsx | 13 ++++---- src/hooks/useGoalsUpdater.test.js | 26 +--------------- src/hooks/useGoalsUpdater/addOperations.js | 2 +- src/hooks/useGoalsUpdater/index.js | 12 +------ src/hooks/useGoalsUpdater/toggleOperations.js | 7 ++--- src/pages/GoalDetails.jsx | 31 +++++++------------ src/pages/Home.jsx | 2 +- 7 files changed, 24 insertions(+), 69 deletions(-) diff --git a/src/components/Home/MicroGoal.jsx b/src/components/Home/MicroGoal.jsx index d67c14e..dfb3e4b 100644 --- a/src/components/Home/MicroGoal.jsx +++ b/src/components/Home/MicroGoal.jsx @@ -8,6 +8,7 @@ import { ExpandLess, ExpandMore } from '@mui/icons-material' import { Box, Collapse, + Divider, IconButton, List, Paper, @@ -15,13 +16,12 @@ import { } from '@mui/material' const MicroGoal = ({ microGoal, macroGoalIndex, microGoalIndex }) => { - const { addTask, toggleMicroGoalExpansion, toggleTaskCompletion } = - useGoalsUpdater() + const { addTask, toggleExpansion, toggleTaskCompletion } = useGoalsUpdater() const progress = calculateProgress([microGoal]) return ( @@ -34,16 +34,15 @@ const MicroGoal = ({ microGoal, macroGoalIndex, microGoalIndex }) => { microGoalIndex={microGoalIndex} /> - toggleMicroGoalExpansion(macroGoalIndex, microGoalIndex) - } + onClick={() => toggleExpansion(macroGoalIndex, microGoalIndex)} size='small' > {microGoal.expanded ? : } - + + {microGoal.tasks.map((task, taskIndex) => ( { expect(user.goals).toContainEqual({ name: goalName, category, - expanded: false, microgoals: [], }) @@ -129,28 +128,6 @@ describe('useGoalsUpdater', () => { ) }) - it('should toggle goal expansion', async () => { - const goalIndex = 0 - - // Add initial goal to user data - user.goals.push({ - name: 'Goal 1', - category: '#000000', - expanded: false, - microgoals: [], - }) - - await goalsUpdater.toggleGoalExpansion(goalIndex) - - expect(user.goals[goalIndex].expanded).toBe(true) - - expect(updateProfile).toHaveBeenCalledWith( - expect.objectContaining({ - goals: user.goals, - }) - ) - }) - it('should toggle microgoal expansion', async () => { const goalIndex = 0 const microGoalIndex = 0 @@ -159,11 +136,10 @@ describe('useGoalsUpdater', () => { user.goals.push({ name: 'Goal 1', category: '#000000', - expanded: false, microgoals: [{ name: 'MicroGoal 1', expanded: false, tasks: [] }], }) - await goalsUpdater.toggleMicroGoalExpansion(goalIndex, microGoalIndex) + await goalsUpdater.toggleExpansion(goalIndex, microGoalIndex) expect(user.goals[goalIndex].microgoals[microGoalIndex].expanded).toBe(true) diff --git a/src/hooks/useGoalsUpdater/addOperations.js b/src/hooks/useGoalsUpdater/addOperations.js index 98c49b4..eb639b5 100644 --- a/src/hooks/useGoalsUpdater/addOperations.js +++ b/src/hooks/useGoalsUpdater/addOperations.js @@ -6,7 +6,7 @@ import { updateGoalsAndStreak } from './updateHelpers' export const addGoal = async (userContext, goalName, category) => { const updatedGoals = [ ...userContext.user.goals, - { name: goalName, category, expanded: false, microgoals: [] }, + { name: goalName, category, microgoals: [] }, ] await updateGoalsAndStreak( userContext, diff --git a/src/hooks/useGoalsUpdater/index.js b/src/hooks/useGoalsUpdater/index.js index 2138fae..535011d 100644 --- a/src/hooks/useGoalsUpdater/index.js +++ b/src/hooks/useGoalsUpdater/index.js @@ -55,24 +55,14 @@ const useGoalsUpdater = () => { toggleTaskCompletion: (goalIndex, microGoalIndex, taskIndex) => toggleTaskCompletion(userContext, goalIndex, microGoalIndex, taskIndex), - /** - * Toggles the expansion status of a specified goal. - * @param {number} goalIndex - Index of the goal. - * @returns {Promise} - */ - toggleGoalExpansion: (goalIndex) => toggleExpansion(userContext, goalIndex), - /** * Toggles the expansion status of a specified microgoal. * @param {number} goalIndex - Index of the goal. * @param {number} microGoalIndex - Index of the microgoal. * @returns {Promise} */ - toggleMicroGoalExpansion: (goalIndex, microGoalIndex) => + toggleExpansion: (goalIndex, microGoalIndex) => toggleExpansion(userContext, goalIndex, microGoalIndex), - - // Gets list of goals for current user - goals: user.goals, } } diff --git a/src/hooks/useGoalsUpdater/toggleOperations.js b/src/hooks/useGoalsUpdater/toggleOperations.js index 91f09d3..f33d23f 100644 --- a/src/hooks/useGoalsUpdater/toggleOperations.js +++ b/src/hooks/useGoalsUpdater/toggleOperations.js @@ -23,13 +23,10 @@ export const toggleTaskCompletion = async ( export const toggleExpansion = async ( userContext, goalIndex, - microGoalIndex = undefined + microGoalIndex ) => { const updatedGoals = [...userContext.user.goals] - const target = - microGoalIndex !== undefined - ? updatedGoals[goalIndex].microgoals[microGoalIndex] - : updatedGoals[goalIndex] + const target = updatedGoals[goalIndex].microgoals[microGoalIndex] target.expanded = !target.expanded await updateGoalsAndStreak( userContext, diff --git a/src/pages/GoalDetails.jsx b/src/pages/GoalDetails.jsx index a442a7e..5686d80 100644 --- a/src/pages/GoalDetails.jsx +++ b/src/pages/GoalDetails.jsx @@ -1,29 +1,22 @@ import AddItem from '@/components/Home/AddItem' import MicroGoal from '@/components/Home/MicroGoal' import ProgressIndicator from '@/components/Home/ProgressIndicator' +import { useUser } from '@/contexts/UserContext' import useGoalsUpdater from '@/hooks/useGoalsUpdater' import { calculateProgress } from '@/utils/calculateProgress' -import { Box, CircularProgress, List, Paper, Typography } from '@mui/material' +import { Box, List, Paper, Typography } from '@mui/material' import { useParams } from 'react-router-dom' const GoalDetails = () => { const { macroGoalIndex } = useParams() - const { goals, addMicrogoal } = useGoalsUpdater() + const { user } = useUser() + const { addMicrogoal } = useGoalsUpdater() - // Check if goals are loaded and the specific goal exists - if (!goals || !goals[macroGoalIndex]) { - return ( - - - - ) - } - - const macroGoal = goals[macroGoalIndex] + const macroGoal = user.goals[macroGoalIndex] const progress = calculateProgress(macroGoal.microgoals) return ( - + { - + addMicrogoal(macroGoalIndex, microGoalName)} + /> + + {macroGoal.microgoals.map((microGoal, microGoalIndex) => ( { /> ))} - - addMicrogoal(macroGoalIndex, microGoalName)} - /> ) } diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index d5a9830..b658e1e 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -9,7 +9,7 @@ const Home = () => { const { addGoal } = useGoalsUpdater() return ( - + {/* Render existing goals */}