feat(category): enabling selecting colors only for goals(color) (#23)

1. Add `CategoryPicker` to pick a category on the left inside the goal input box. 2. Adjust `useGoalsUpdater`, and add `category` field for future `addGoal`. --------- Co-authored-by: ZL Asica <[email protected]>
392-f24 · Nov 7, 2024 · 64db766 · 64db766
1 parent d0e922b
commit 64db766
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 13 deletions.
diff --git a/src/components/Home/AddItem.jsx b/src/components/Home/AddItem.jsx
@@ -1,27 +1,51 @@
+// @ts-check
+
+import CategoryPicker from '@/components/Home/CategoryPicker'
 import AddIcon from '@mui/icons-material/Add'
 import { IconButton, InputAdornment, TextField } from '@mui/material'
 import { useState } from 'react'
 
 const AddItem = ({ label, onAdd }) => {
   const [inputValue, setInputValue] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('#000000')
 
   const handleAdd = async () => {
     if (inputValue.trim()) {
-      await onAdd(inputValue)
+      await onAdd(
+        inputValue.trim(),
+        label === 'New Goal' ? selectedCategory : null
+      )
       setInputValue('')
+      setSelectedCategory('#000000')
     }
   }
 
+  // Conditionally render the category picker
+  const startAdornment =
+    label === 'New Goal' ? (
+      <CategoryPicker
+        selectedCategory={selectedCategory}
+        setSelectedCategory={setSelectedCategory}
+      />
+    ) : null
+
   return (
     <TextField
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+      }}
       variant='outlined'
       label={label}
+      placeholder={`Enter ${label.toLowerCase()}...`}
       value={inputValue}
       onChange={(e) => setInputValue(e.target.value)}
-      fullWidth
       onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
+      fullWidth
       slotProps={{
         input: {
+          startAdornment,
           endAdornment: (
             <InputAdornment position='end'>
               <IconButton

diff --git a/src/components/Home/CategoryPicker.jsx b/src/components/Home/CategoryPicker.jsx
@@ -0,0 +1,67 @@
+// @ts-check
+
+import { Box, InputAdornment, MenuItem, Select } from '@mui/material'
+
+const colors = [
+  '#000000',
+  '#FF6F61',
+  '#FFD700',
+  '#00CED1',
+  '#B57EDC',
+  '#98FF98',
+  '#FFAB91',
+  '#87CEEB',
+  '#FFD59A',
+  '#FFB6C1',
+  '#8FBC8F',
+  '#E6E6FA',
+  '#4682B4',
+  '#AAF0D1',
+  '#FF7F50',
+  '#DA70D6',
+]
+
+const ColorCircle = ({ color }) => (
+  <Box
+    sx={{
+      width: 26,
+      height: 26,
+      borderRadius: '50%',
+      backgroundColor: color,
+    }}
+    aria-label={`Color: ${color}`}
+  />
+)
+
+const CategoryPicker = ({ selectedCategory, setSelectedCategory }) => (
+  <InputAdornment position='start' sx={{ marginRight: 1 }}>
+    <Select
+      value={selectedCategory}
+      onChange={(e) => setSelectedCategory(e.target.value)}
+      displayEmpty
+      variant='standard' // no outline
+      sx={{
+        minWidth: 0,
+        padding: 0,
+        '&:before, &:after': { display: 'none' }, // no underline
+      }}
+      renderValue={(value) => <ColorCircle color={value} />}
+    >
+      {colors.map((color, index) => (
+        <MenuItem
+          key={index}
+          value={color}
+          sx={{
+            display: 'inline-flex',
+            width: 'auto',
+            padding: 1,
+          }}
+        >
+          <ColorCircle color={color} />
+        </MenuItem>
+      ))}
+    </Select>
+  </InputAdornment>
+)
+
+export default CategoryPicker
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: [] },

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -11,10 +11,22 @@ const Home = () => {
   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} />
-      ))}
+
+      {/* Render existing goals */}
+      <Box sx={{ mt: 2 }}>
+        {user.goals.map((goal, index) => (
+          <Box
+            key={index}
+            sx={{
+              borderLeft: `5px solid ${goal.category || '#000'}`,
+              paddingLeft: 2,
+              mb: 2,
+            }}
+          >
+            <MacroGoal macroGoal={goal} macroGoalIndex={index} />
+          </Box>
+        ))}
+      </Box>
     </Box>
   )
 }