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] 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 (
     <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
index b5e8706..626fafc 100644
--- 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
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<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),
-
-    // 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 (
-      <Box display='flex' justifyContent='center' mt={4}>
-        <CircularProgress />
-      </Box>
-    )
-  }
-
-  const macroGoal = goals[macroGoalIndex]
+  const macroGoal = user.goals[macroGoalIndex]
   const progress = calculateProgress(macroGoal.microgoals)
 
   return (
-    <Box sx={{ p: 2 }}>
+    <Box sx={{ p: 4 }}>
       <Paper
         elevation={3}
         sx={{
@@ -42,7 +35,12 @@ const GoalDetails = () => {
         </Box>
       </Paper>
 
-      <List>
+      <AddItem
+        label='New MicroGoal'
+        onAdd={(microGoalName) => addMicrogoal(macroGoalIndex, microGoalName)}
+      />
+
+      <List sx={{ mt: 3 }}>
         {macroGoal.microgoals.map((microGoal, microGoalIndex) => (
           <MicroGoal
             key={microGoalIndex}
@@ -52,11 +50,6 @@ const GoalDetails = () => {
           />
         ))}
       </List>
-
-      <AddItem
-        label='New MicroGoal'
-        onAdd={(microGoalName) => addMicrogoal(macroGoalIndex, microGoalName)}
-      />
     </Box>
   )
 }
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 (
-    <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 */}