refactor(updateGoal): Enable update goal name and/or category after set.

392-f24 · Nov 8, 2024 · efe3a21 · efe3a21
1 parent 7341e76
commit efe3a21
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 80 deletions.
diff --git a/src/components/Home/AddItem.jsx b/src/components/Home/AddItem.jsx
@@ -3,19 +3,33 @@
 import CategoryPicker from '@/components/Home/CategoryPicker'
 import { DateTimePicker } from '@/components/Home/DateTimePickers'
 import AddIcon from '@mui/icons-material/Add'
+import CheckIcon from '@mui/icons-material/Check'
 import { IconButton, InputAdornment, TextField } from '@mui/material'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
-const AddItem = ({ label, onAdd }) => {
-  const [inputValue, setInputValue] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState('#000000') // For 'New Goal'
+const AddItem = ({
+  label,
+  onAdd,
+  presetValue = '',
+  presetCategory = '#000000',
+  sx = {},
+}) => {
+  const [inputValue, setInputValue] = useState(presetValue)
+  const [selectedCategory, setSelectedCategory] = useState(presetCategory) // For 'New Goal'
   const [dueDate, setDueDate] = useState(null) // For 'New Task'
 
+  useEffect(() => {
+    if (presetValue) {
+      setInputValue(presetValue)
+      setSelectedCategory(presetCategory)
+    }
+  }, [presetValue, presetCategory])
+
   const handleAdd = async () => {
     if (inputValue.trim()) {
       let attributes = null
 
-      if (label === 'New Goal') {
+      if (label === 'New Goal' || label === 'Edit Goal') {
         attributes = selectedCategory
       } else if (label === 'New Task') {
         attributes = dueDate
@@ -30,7 +44,7 @@ const AddItem = ({ label, onAdd }) => {
 
   // Conditionally render the category picker
   const getStartAdornment = () => {
-    if (label === 'New Goal') {
+    if (label === 'New Goal' || label === 'Edit Goal') {
       return (
         <CategoryPicker
           selectedCategory={selectedCategory}
@@ -49,6 +63,7 @@ const AddItem = ({ label, onAdd }) => {
         display: 'flex',
         alignItems: 'center',
         gap: 2,
+        ...sx,
       }}
       variant='outlined'
       label={label}
@@ -67,7 +82,7 @@ const AddItem = ({ label, onAdd }) => {
                 onClick={handleAdd}
                 disabled={!inputValue.trim()}
               >
-                <AddIcon />
+                {label === 'Edit Goal' ? <CheckIcon /> : <AddIcon />}
               </IconButton>
             </InputAdornment>
           ),

diff --git a/src/components/Home/CategoryPicker.jsx b/src/components/Home/CategoryPicker.jsx
@@ -50,7 +50,6 @@ const CategoryPicker = ({ selectedCategory, setSelectedCategory }) => (
       {colors.map((color, index) => (
         <MenuItem
           key={index}
-          className={'color-menu'}
           value={color}
           sx={{
             display: 'inline-flex',

diff --git a/src/hooks/useGoalsUpdater/addOperations.js b/src/hooks/useGoalsUpdater/addOperations.js
@@ -50,20 +50,17 @@ export const addTask = async (
   )
 }
 
-export const updateGoalCategory = async (
-  userContext,
-  goalIndex,
-  newCategory,
-  goals
-) => {
-  goals[goalIndex] = {
-    ...goals[goalIndex],
-    category: newCategory,
+export const updateGoal = async (userContext, goalIndex, name, category) => {
+  const updatedGoals = [...userContext.user.goals]
+  updatedGoals[goalIndex] = {
+    ...updatedGoals[goalIndex],
+    name,
+    category,
   }
 
   await updateGoalsAndStreak(
     userContext,
-    goals,
+    updatedGoals,
     'Goal category updated successfully.'
   )
 }
diff --git a/src/hooks/useGoalsUpdater/index.js b/src/hooks/useGoalsUpdater/index.js
@@ -1,12 +1,7 @@
 // @ts-check
 
 import { useUser } from '@/contexts/UserContext'
-import {
-  addGoal,
-  addMicrogoal,
-  addTask,
-  updateGoalCategory,
-} from './addOperations'
+import { addGoal, addMicrogoal, addTask, updateGoal } from './addOperations'
 import { deleteItem } from './deleteOperations'
 import { toggleExpansion, toggleTaskCompletion } from './toggleOperations'
 
@@ -25,7 +20,7 @@ const useGoalsUpdater = () => {
 
     /**
      * Adds a new microgoal under a specified goal.
-     * @param {number} goalIndex - Index of the goal to add the microgoal to.
+     * @param {string} goalIndex - Index of the goal to add the microgoal to.
      * @param {string} microGoalName - Name of the microgoal.
      * @returns {Promise<void>}
      */
@@ -34,7 +29,7 @@ const useGoalsUpdater = () => {
 
     /**
      * Adds a new task under a specified microgoal.
-     * @param {number} goalIndex - Index of the goal.
+     * @param {string} goalIndex - Index of the goal.
      * @param {number} microGoalIndex - Index of the microgoal.
      * @param {string} taskName - Name of the task.
      * @param {Date} dueDate - Due date for the task.
@@ -45,12 +40,13 @@ const useGoalsUpdater = () => {
 
     /**
      * Updates the category color for a specified goal.
-     * @param {number} goalIndex - Index of the goal.
-     * @param {string} newCategory - New HEX color code for the goal category.
+     * @param {string} goalIndex - Index of the goal.
+     * @param {string} name - New name for the goal.
+     * @param {string} category - New category color for the goal.
      * @returns {Promise<void>}
      */
-    updateGoalCategory: (goalIndex, newCategory) =>
-      updateGoalCategory(userContext, goalIndex, newCategory, user.goals),
+    updateGoal: (goalIndex, name, category) =>
+      updateGoal(userContext, goalIndex, name, category),
 
     /**
      * Deletes a specified goal, microgoal, or task.

diff --git a/src/pages/GoalDetails.jsx b/src/pages/GoalDetails.jsx
@@ -1,18 +1,34 @@
+// @ts-check
+
 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 EditIcon from '@mui/icons-material/Edit'
+import {
+  Box,
+  Collapse,
+  darken,
+  IconButton,
+  List,
+  Paper,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 const GoalDetails = () => {
+  const [editGoalInput, setEditGoalInput] = useState(false)
   const { macroGoalIndex } = useParams()
   const { user } = useUser()
-  const { addMicrogoal } = useGoalsUpdater()
+  const { addMicrogoal, updateGoal } = useGoalsUpdater()
 
   const macroGoal = user.goals[macroGoalIndex]
+  const categoryColor = macroGoal.category || '#000'
+
+  // @ts-ignore
   const progress = calculateProgress(macroGoal.microgoals)
 
   return (
@@ -24,15 +40,38 @@ const GoalDetails = () => {
           mb: 3,
           borderRadius: 2,
           border: '2px solid',
-          borderColor: macroGoal.category ? macroGoal.category : '#000',
+          borderColor: categoryColor,
         }}
       >
-        <Box display='flex' alignItems='center'>
+        <Box
+          display='flex'
+          alignItems='center'
+          onClick={() => setEditGoalInput(!editGoalInput)} // Click to edit goal name
+        >
           <ProgressIndicator value={progress} size={50} thickness={4} />
-          <Typography variant='h5' sx={{ ml: 2 }}>
+          <Typography variant='h5' sx={{ ml: 2, flexGrow: 1 }}>
             {macroGoal.name}
           </Typography>
+          <IconButton
+            aria-label='Edit Goal'
+            onClick={() => setEditGoalInput(!editGoalInput)}
+            sx={{ color: darken(categoryColor, 0.3) }}
+          >
+            <EditIcon />
+          </IconButton>
         </Box>
+        <Collapse in={editGoalInput} timeout='auto' unmountOnExit>
+          <AddItem
+            label='Edit Goal'
+            onAdd={(name, category) => {
+              updateGoal(macroGoalIndex, name, category)
+              setEditGoalInput(false)
+            }}
+            presetValue={macroGoal.name}
+            presetCategory={categoryColor}
+            sx={{ mt: 2 }}
+          />
+        </Collapse>
       </Paper>
 
       <AddItem
@@ -41,6 +80,7 @@ const GoalDetails = () => {
       />
 
       <List sx={{ mt: 3 }}>
+        {/* @ts-ignore */}
         {macroGoal.microgoals.map((microGoal, microGoalIndex) => (
           <MicroGoal
             key={microGoalIndex}

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,44 +1,12 @@
 import AddItem from '@/components/Home/AddItem'
-import CategoryPicker from '@/components/Home/CategoryPicker'
 import MacroGoal from '@/components/Home/MacroGoal'
 import { useUser } from '@/contexts/UserContext'
 import useGoalsUpdater from '@/hooks/useGoalsUpdater'
 import { Box } from '@mui/material'
-import { useEffect, useState } from 'react'
 
 const Home = () => {
   const { user } = useUser()
-  const { addGoal, updateGoalCategory } = useGoalsUpdater()
-  const [editingCategoryIndex, setEditingCategoryIndex] = useState(null)
-
-  // Function to handle click outside of CategoryPicker, goal container, color menu
-  const handleClickOutside = (event) => {
-    if (
-      !event.target.closest('.category-picker') &&
-      !event.target.closest('.goal-container') &&
-      !event.target.closest('.color-menu')
-    ) {
-      setEditingCategoryIndex(null)
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [])
-
-  const handleCategoryClick = (index) => {
-    setEditingCategoryIndex(index)
-  }
-
-  const handleCategoryChange = (newCategory) => {
-    if (editingCategoryIndex !== null) {
-      updateGoalCategory(editingCategoryIndex, newCategory)
-      setEditingCategoryIndex(null)
-    }
-  }
+  const { addGoal } = useGoalsUpdater()
 
   return (
     <Box sx={{ maxWidth: 800, margin: 'auto', padding: 3 }}>
@@ -49,25 +17,13 @@ const Home = () => {
         {user.goals.map((goal, index) => (
           <Box
             key={index}
-            className='goal-container'
             sx={{
               borderLeft: `5px solid ${goal.category || '#000'}`,
               paddingLeft: 2,
               mb: 2,
             }}
-            onClick={() => handleCategoryClick(index)}
           >
             <MacroGoal macroGoal={goal} macroGoalIndex={index} />
-
-            {/* Conditionally render CategoryPicker when category is being edited */}
-            {editingCategoryIndex === index && (
-              <div className='category-picker'>
-                <CategoryPicker
-                  selectedCategory={goal.category}
-                  setSelectedCategory={handleCategoryChange}
-                />
-              </div>
-            )}
           </Box>
         ))}
       </Box>