diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..6193f2a 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -27,6 +27,7 @@ export interface Goal { accountId: string transactionIds: string[] tagIds: string[] + icon?: string } export interface Tag { diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..ffe2fcd 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -11,6 +11,9 @@ import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/go import { useAppDispatch, useAppSelector } from '../../../store/hooks' import DatePicker from '../../components/DatePicker' import { Theme } from '../../components/Theme' +import GoalIcon from './GoalIcon' +import EmojiPicker from '../../components/EmojiPicker' +import { BaseEmoji } from 'emoji-mart' type Props = { goal: Goal } export function GoalManager(props: Props) { @@ -21,11 +24,14 @@ export function GoalManager(props: Props) { const [name, setName] = useState(null) const [targetDate, setTargetDate] = useState(null) const [targetAmount, setTargetAmount] = useState(null) + const [icon, setIcon] = useState(goal?.icon ?? null) + const[showPicker, setShowPicker] = useState(false) useEffect(() => { setName(props.goal.name) setTargetDate(props.goal.targetDate) setTargetAmount(props.goal.targetAmount) + setIcon(props.goal.icon ?? null) }, [ props.goal.id, props.goal.name, @@ -106,6 +112,24 @@ export function GoalManager(props: Props) { {new Date(props.goal.created).toLocaleDateString()} + + + + setShowPicker(!showPicker)} + /> + {showPicker && ( + { + const selected = emoji.native + setIcon(selected) + setShowPicker(false) + dispatch(updateGoalRedux({ ...goal, icon: selected })) + updateGoalApi(goal.id, { ...goal, icon: selected }) +}} /> + )} + + ) }