Skip to content

Commit

Permalink
refactor(addItem): Extract category selector to CategoryPicker.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZL-Asica
ZL-Asica committed Nov 7, 2024
1 parent c258bb0 commit 0f74ebe
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 137 deletions.
161 changes: 49 additions & 112 deletions src/components/Home/AddItem.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,128 +1,65 @@
// @ts-check

import CategoryPicker from '@/components/Home/CategoryPicker'
import AddIcon from '@mui/icons-material/Add'
import {
Box,
FormControl,
IconButton,
InputAdornment,
MenuItem,
Select,
TextField,
} from '@mui/material'
import { IconButton, InputAdornment, 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
const [selectedCategory, setSelectedCategory] = useState('#000000')

// 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()) {
const item =
label === 'New Goal'
? { text: inputValue, category: selectedCategory }
: inputValue
await onAdd(item)
await onAdd(
inputValue.trim(),
label === 'New Goal' ? selectedCategory : null
)
setInputValue('')
setSelectedCategory('#000000') // Reset after adding
setSelectedCategory('#000000')
}
}

return (
<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>
),
},
}}
// Conditionally render the category picker
const startAdornment =
label === 'New Goal' ? (
<CategoryPicker
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/>
</Box>
) : 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)}
onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
fullWidth
slotProps={{
input: {
startAdornment,
endAdornment: (
<InputAdornment position='end'>
<IconButton
color='primary'
onClick={handleAdd}
disabled={!inputValue.trim()}
>
<AddIcon />
</IconButton>
</InputAdornment>
),
},
}}
/>
)
}

Expand Down
67 changes: 67 additions & 0 deletions src/components/Home/CategoryPicker.jsx
View file
Original file line number Diff line number Diff line change
@@ -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
38 changes: 13 additions & 25 deletions src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,24 @@ const Home = () => {
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={handleAddGoal} />
<AddItem label='New Goal' onAdd={addGoal} />

{/* 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>
)
})}
{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>
)
Expand Down

0 comments on commit 0f74ebe

Please sign in to comment.