Add goal icon support, emoji updates and test coverage

src/api/types.ts

@@ -24,6 +24,7 @@ export interface Goal {
   balance: number
   targetDate: Date
   created: Date
+  icon?: string
   accountId: string
   transactionIds: string[]
   tagIds: string[]

src/ui/features/goalmanager/GoalManager.tsx

@@ -11,7 +11,10 @@ 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 { BaseEmoji } from 'emoji-mart'
+import EmojiPicker from '../../components/EmojiPicker'
+import GoalIcon from './GoalIcon'
+import AddIconButton from './AddIconButton'
 type Props = { goal: Goal }
 export function GoalManager(props: Props) {
   const dispatch = useAppDispatch()
@@ -21,6 +24,8 @@ export function GoalManager(props: Props) {
   const [name, setName] = useState<string | null>(null)
   const [targetDate, setTargetDate] = useState<Date | null>(null)
   const [targetAmount, setTargetAmount] = useState<number | null>(null)
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
+  const [icon, setIcon] = useState<string | null>(props.goal.icon ?? null)
 
   useEffect(() => {
     setName(props.goal.name)
@@ -74,9 +79,39 @@ export function GoalManager(props: Props) {
       updateGoalApi(props.goal.id, updatedGoal)
     }
   }
+  const pickEmojiOnClick = () => (emoji: BaseEmoji, event: React.MouseEvent) => {
+  setIcon(emoji.native)
+  setIsEmojiPickerOpen(false)
+
+  const updatedGoal: Goal = {
+    ...props.goal,
+    icon: emoji.native ?? props.goal.icon,
+    name: name ?? props.goal.name,
+    targetDate: targetDate ?? props.goal.targetDate,
+    targetAmount: targetAmount ?? props.goal.targetAmount,
+  }
+
+  dispatch(updateGoalRedux(updatedGoal))
+  updateGoalApi(props.goal.id, updatedGoal)
+}
 
   return (
     <GoalManagerContainer>
+      {icon ? (
+    <GoalIcon
+      icon={icon}
+      onClick={() => setIsEmojiPickerOpen(!isEmojiPickerOpen)}
+    />
+  ) : (
+    <AddIconButton
+      hasIcon={false}
+      onClick={() => setIsEmojiPickerOpen(true)}
+    />
+  )}
+
+  {isEmojiPickerOpen && (
+    <EmojiPicker onClick={pickEmojiOnClick()} />
+  )}
       <NameInput value={name ?? ''} onChange={updateNameOnChange} />
 
       <Group>

src/ui/pages/Main/goals/GoalCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import GoalIcon from '../../../features/goalmanager/GoalIcon'
 import styled from 'styled-components'
 import { selectGoalsMap } from '../../../../store/goalsSlice'
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks'
@@ -27,6 +28,7 @@ export default function GoalCard(props: Props) {
 
   return (
     <Container key={goal.id} onClick={onClick}>
+      <GoalIcon icon={goal.icon ?? '🎯'} onClick={() => {}} />
       <TargetAmount>${goal.targetAmount}</TargetAmount>
       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
     </Container>