build(category): enabling selecting colors only for goals(color)

1. seperate the AddItem logic to add categories only for goals 2. add color indicator to the goals
392-f24 · Nov 7, 2024 · 86eb91e · 86eb91e
1 parent 2cf1cab
commit 86eb91e
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 37 deletions.
diff --git a/src/components/Home/AddItem.jsx b/src/components/Home/AddItem.jsx
@@ -1,41 +1,128 @@
 import AddIcon from '@mui/icons-material/Add'
-import { IconButton, InputAdornment, TextField } from '@mui/material'
+import {
+  Box,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material'
 import { useState } from 'react'
 
 const AddItem = ({ label, onAdd }) => {
   const [inputValue, setInputValue] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('#000000') // Default color is black
 
+  // Hardcoded color categories
+  const colors = [
+    '#FF6F61',
+    '#FFD700',
+    '#00CED1',
+    '#B57EDC',
+    '#98FF98',
+    '#FFAB91',
+    '#87CEEB',
+    '#FFD59A',
+    '#FFB6C1',
+    '#8FBC8F',
+    '#E6E6FA',
+    '#4682B4',
+    '#AAF0D1',
+    '#FF7F50',
+    '#DA70D6',
+  ]
   const handleAdd = async () => {
     if (inputValue.trim()) {
-      await onAdd(inputValue)
+      const item =
+        label === 'New Goal'
+          ? { text: inputValue, category: selectedCategory }
+          : inputValue
+      await onAdd(item)
       setInputValue('')
+      setSelectedCategory('#000000') // Reset after adding
     }
   }
 
   return (
-    <TextField
-      variant='outlined'
-      label={label}
-      value={inputValue}
-      onChange={(e) => setInputValue(e.target.value)}
-      fullWidth
-      onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
-      slotProps={{
-        input: {
-          endAdornment: (
-            <InputAdornment position='end'>
-              <IconButton
-                color='primary'
-                onClick={handleAdd}
-                disabled={!inputValue.trim()}
-              >
-                <AddIcon />
-              </IconButton>
-            </InputAdornment>
-          ),
-        },
-      }}
-    />
+    <Box display='flex' alignItems='center' gap={2}>
+      <TextField
+        variant='outlined'
+        label={label}
+        placeholder={label === 'New Goal' ? 'New Goal' : ''} // Add placeholder only for "New Goal"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
+        fullWidth
+        slotProps={{
+          input: {
+            startAdornment:
+              label === 'New Goal' ? ( // Show color picker only if label is "New Goal"
+                <InputAdornment position='start' sx={{ marginRight: 1 }}>
+                  <FormControl sx={{ minWidth: 36 }}>
+                    <Select
+                      value={selectedCategory}
+                      onChange={(e) => setSelectedCategory(e.target.value)}
+                      displayEmpty
+                      sx={{
+                        width: 60,
+                        height: 30,
+                        padding: 0,
+                        '.MuiSelect-select': {
+                          display: 'flex',
+                          alignItems: 'center',
+                          padding: 0,
+                        },
+                      }}
+                      renderValue={(value) => (
+                        <Box
+                          sx={{
+                            width: 16,
+                            height: 16,
+                            borderRadius: '50%',
+                            backgroundColor: value || '#000000',
+                            margin: '0 auto',
+                          }}
+                        />
+                      )}
+                    >
+                      {colors.map((color, index) => (
+                        <MenuItem key={index} value={color}>
+                          <Box display='flex' alignItems='center'>
+                            <Box
+                              sx={{
+                                width: 16,
+                                height: 16,
+                                borderRadius: '50%',
+                                backgroundColor: color,
+                                marginRight: 1,
+                              }}
+                            />
+                          </Box>
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </InputAdornment>
+              ) : null,
+            endAdornment: (
+              <InputAdornment position='end'>
+                <IconButton
+                  color='primary'
+                  onClick={handleAdd}
+                  disabled={
+                    !inputValue.trim() ||
+                    (label === 'New Goal' && !selectedCategory)
+                  }
+                >
+                  <AddIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+    </Box>
   )
 }
 

diff --git a/src/components/Home/GoalTracker.jsx b/src/components/Home/GoalTracker.jsx
@@ -8,13 +8,37 @@ export default function GoalTracker() {
   const { user } = useUser()
   const { addGoal } = useGoalsUpdater()
 
+  const handleAddGoal = async (goal) => {
+    if (goal.text && goal.category) {
+      await addGoal(goal.text, goal.category) // Pass goal name and category name to addGoal
+    } else {
+      console.error('Goal name or category is missing')
+    }
+  }
+
   return (
     <Box sx={{ maxWidth: 800, margin: 'auto', padding: 2 }}>
-      <AddItem label='New Goal' onAdd={addGoal} />
-      <Box sx={{ height: 16 }} />
-      {user.goals.map((macroGoal, index) => (
-        <MacroGoal key={index} macroGoal={macroGoal} macroGoalIndex={index} />
-      ))}
+      <AddItem label='New Goal' onAdd={handleAddGoal} />
+
+      {/* Render existing goals */}
+      <Box sx={{ mt: 2 }}>
+        {user.goals.map((goal, index) => {
+          const borderColor = goal.category ? goal.category : '#000'
+
+          return (
+            <Box
+              key={index}
+              sx={{
+                borderLeft: `5px solid ${borderColor}`,
+                paddingLeft: 2,
+                mb: 2,
+              }}
+            >
+              <MacroGoal key={index} macroGoal={goal} macroGoalIndex={index} />
+            </Box>
+          )
+        })}
+      </Box>
     </Box>
   )
 }
diff --git a/src/hooks/useGoalsUpdater.js b/src/hooks/useGoalsUpdater.js
@@ -7,8 +7,8 @@ const useGoalsUpdater = () => {
   // Function to update both goals and optionally streak in the user profile
   const updateGoalsAndStreak = async (
     updatedGoals,
-    countChange = 0,
-    message
+    message,
+    countChange = 0
   ) => {
     try {
       // If countChange is not 0, update the streak days
@@ -97,8 +97,8 @@ const useGoalsUpdater = () => {
 
     await updateGoalsAndStreak(
       updatedGoals,
-      task.completed ? 1 : -1,
-      'Task completion status toggled successfully.'
+      'Task completion status toggled successfully.',
+      task.completed ? 1 : -1
     )
   }
 
@@ -125,9 +125,16 @@ const useGoalsUpdater = () => {
   }
 
   return {
-    // Add new goal, microgoal, or task
-    addGoal: (goalName) =>
-      addItem({ name: goalName, expanded: false, microgoals: [] }, 'goal'),
+    addGoal: (goalName, category) =>
+      addItem(
+        {
+          name: goalName,
+          category: category, // Store only category name
+          expanded: false,
+          microgoals: [],
+        },
+        'goal'
+      ),
     addMicrogoal: (goalIndex, microGoalName) =>
       addItem(
         { name: microGoalName, expanded: false, tasks: [] },
@@ -142,6 +149,13 @@ const useGoalsUpdater = () => {
         microGoalIndex
       ),
 
+    // Delete a goal, microgoal, or task
+    deleteGoal: (goalIndex) => deleteItem(goalIndex),
+    deleteMicrogoal: (goalIndex, microGoalIndex) =>
+      deleteItem(goalIndex, microGoalIndex),
+    deleteTask: (goalIndex, microGoalIndex, taskIndex) =>
+      deleteItem(goalIndex, microGoalIndex, taskIndex),
+
     // Delete
     deleteItem,
     toggleTaskCompletion,