feat(goalDetails): Goals list redirects to goalDetails pages (#26)

- Add `goalDetials` page. Use `react-router-dom` to redirect to a new page. - Add multiple style refines for UX. - Remove: - `expanded` for `goal` since nouse for that property anymore. - `toggleGoalExpansion ` since we will not use that anymore. - Rename: - `toggleMicroGoalExpansion` to `toggleExpansion` for consistency. --------- Co-authored-by: ZL Asica <[email protected]>
392-f24 · Nov 7, 2024 · 229455a · 229455a
1 parent 3910db1
commit 229455a
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 85 deletions.
diff --git 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={<ProtectedRoute element={<Streak />} />}
                 />
+                <Route
+                  path='/goals/:macroGoalIndex'
+                  element={<GoalDetails />}
+                />
               </Routes>
             </div>
 

diff --git 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 (
     <Paper elevation={2} sx={{ p: 2, mb: 3, borderRadius: 2 }}>
-      <Box display='flex' alignItems='center'>
+      <Box
+        display='flex'
+        alignItems='center'
+        onClick={handleNavigateToMicroGoals}
+        sx={{ cursor: 'pointer' }}
+      >
         <ProgressIndicator value={progress} size={40} thickness={3} />
         <Typography variant='h6' sx={{ flexGrow: 1, ml: 2 }}>
           {macroGoal.name}
         </Typography>
         <DeleteItem goalIndex={macroGoalIndex} />
-        <IconButton
-          onClick={() => toggleGoalExpansion(macroGoalIndex)}
-          size='small'
-        >
-          {macroGoal.expanded ? <ExpandLess /> : <ExpandMore />}
-        </IconButton>
       </Box>
-      <Collapse in={macroGoal.expanded} timeout='auto' unmountOnExit>
-        <Divider sx={{ my: 1 }} />
-        <AddItem
-          label='New Microgoal'
-          onAdd={(microGoalName) => addMicrogoal(macroGoalIndex, microGoalName)}
-        />
-        <List>
-          {macroGoal.microgoals.map((microGoal, microGoalIndex) => (
-            <MicroGoal
-              key={microGoalIndex}
-              microGoal={microGoal}
-              macroGoalIndex={macroGoalIndex}
-              microGoalIndex={microGoalIndex}
-            />
-          ))}
-        </List>
-      </Collapse>
     </Paper>
   )
 }

diff --git a/src/components/Home/MicroGoal.jsx b/src/components/Home/MicroGoal.jsx
@@ -8,20 +8,20 @@ import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import {
   Box,
   Collapse,
+  Divider,
   IconButton,
   List,
   Paper,
   Typography,
 } from '@mui/material'
 
 const MicroGoal = ({ microGoal, macroGoalIndex, microGoalIndex }) => {
-  const { addTask, toggleMicroGoalExpansion, toggleTaskCompletion } =
-    useGoalsUpdater()
+  const { addTask, toggleExpansion, toggleTaskCompletion } = useGoalsUpdater()
   const progress = calculateProgress([microGoal])
 
   return (
     <Paper
-      elevation={1}
+      elevation={5}
       sx={{ p: 1, mb: 2, bgcolor: 'background.default', borderRadius: 1 }}
     >
       <Box display='flex' alignItems='center'>
@@ -34,16 +34,15 @@ const MicroGoal = ({ microGoal, macroGoalIndex, microGoalIndex }) => {
           microGoalIndex={microGoalIndex}
         />
         <IconButton
-          onClick={() =>
-            toggleMicroGoalExpansion(macroGoalIndex, microGoalIndex)
-          }
+          onClick={() => toggleExpansion(macroGoalIndex, microGoalIndex)}
           size='small'
         >
           {microGoal.expanded ? <ExpandLess /> : <ExpandMore />}
         </IconButton>
       </Box>
       <Collapse in={microGoal.expanded} timeout='auto' unmountOnExit>
-        <List sx={{ pl: 2 }}>
+        <Divider sx={{ mt: 2 }} />
+        <List sx={{ pl: 2, pb: 3 }}>
           {microGoal.tasks.map((task, taskIndex) => (
             <Task
               key={taskIndex}

diff --git a/src/hooks/useGoalsUpdater.test.js b/src/hooks/useGoalsUpdater.test.js
@@ -47,7 +47,6 @@ describe('useGoalsUpdater', () => {
     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
@@ -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
@@ -55,20 +55,13 @@ 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<void>}
-     */
-    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<void>}
      */
-    toggleMicroGoalExpansion: (goalIndex, microGoalIndex) =>
+    toggleExpansion: (goalIndex, microGoalIndex) =>
       toggleExpansion(userContext, goalIndex, microGoalIndex),
   }
 }

diff --git 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
@@ -0,0 +1,57 @@
+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, List, Paper, Typography } from '@mui/material'
+import { useParams } from 'react-router-dom'
+
+const GoalDetails = () => {
+  const { macroGoalIndex } = useParams()
+  const { user } = useUser()
+  const { addMicrogoal } = useGoalsUpdater()
+
+  const macroGoal = user.goals[macroGoalIndex]
+  const progress = calculateProgress(macroGoal.microgoals)
+
+  return (
+    <Box sx={{ p: 4 }}>
+      <Paper
+        elevation={3}
+        sx={{
+          p: 2,
+          mb: 3,
+          borderRadius: 2,
+          border: '2px solid',
+          borderColor: macroGoal.category ? macroGoal.category : '#000',
+        }}
+      >
+        <Box display='flex' alignItems='center'>
+          <ProgressIndicator value={progress} size={50} thickness={4} />
+          <Typography variant='h5' sx={{ ml: 2 }}>
+            {macroGoal.name}
+          </Typography>
+        </Box>
+      </Paper>
+
+      <AddItem
+        label='New MicroGoal'
+        onAdd={(microGoalName) => addMicrogoal(macroGoalIndex, microGoalName)}
+      />
+
+      <List sx={{ mt: 3 }}>
+        {macroGoal.microgoals.map((microGoal, microGoalIndex) => (
+          <MicroGoal
+            key={microGoalIndex}
+            microGoal={microGoal}
+            macroGoalIndex={macroGoalIndex}
+            microGoalIndex={microGoalIndex}
+          />
+        ))}
+      </List>
+    </Box>
+  )
+}
+
+export default GoalDetails
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -9,7 +9,7 @@ const Home = () => {
   const { addGoal } = useGoalsUpdater()
 
   return (
-    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 2 }}>
+    <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3 }}>
       <AddItem label='New Goal' onAdd={addGoal} />
 
       {/* Render existing goals */}