feat: Add icon field and emoji picker to Goals

package.json

@@ -10,7 +10,6 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/pickers": "^3.3.10",
     "@reduxjs/toolkit": "^1.5.1",
-    "@types/emoji-mart": "^3.0.5",
     "@types/node": "^17.0.41",
     "@types/react": "^16.9.0",
     "@types/react-redux": "^7.1.7",
@@ -55,8 +54,8 @@
     ]
   },
   "devDependencies": {
-    "@types/emoji-mart": "^3.0.9",
+    "@types/emoji-mart": "^3.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25"
   }
-}
+}

src/api/lib.ts

@@ -2,8 +2,7 @@ import axios from 'axios'
 import { user } from '../data/user'
 import { Goal, Transaction, User } from './types'
 
-export const API_ROOT = 'https://fencer-commbank.azurewebsites.net'
-
+export const API_ROOT = 'http://localhost:5203'
 export async function getUser(): Promise<User | null> {
   try {
     const response = await axios.get(`${API_ROOT}/api/User/${user.id}`)

src/api/types.ts

@@ -20,6 +20,7 @@ export interface Application {
 export interface Goal {
   id: string
   name: string
+  icon?: string
   targetAmount: number
   balance: number
   targetDate: Date

src/ui/components/EmojiPicker.tsx

@@ -3,6 +3,7 @@ import 'emoji-mart/css/emoji-mart.css'
 import { useAppSelector } from '../../store/hooks'
 import { selectMode } from '../../store/themeSlice'
 
+
 type Props = { onClick: (emoji: BaseEmoji, event: React.MouseEvent) => void }
 
 export default function EmojiPicker(props: Props) {

src/ui/features/goalmanager/GoalIcon.tsx

@@ -8,7 +8,7 @@ type Props = { icon: string | null; onClick: (e: React.MouseEvent) => void }
 export default function GoalIcon(props: Props) {
   return (
     <TransparentButton onClick={props.onClick}>
-      <Icon>{props.icon}</Icon>
+      <Icon>{props.icon ?? "🎯"}</Icon>
     </TransparentButton>
   )
 }

src/ui/features/goalmanager/GoalManager.tsx

@@ -11,11 +11,30 @@ 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 EmojiPicker from '../../components/EmojiPicker'
 
 type Props = { goal: Goal }
 export function GoalManager(props: Props) {
   const dispatch = useAppDispatch()
 
+  const [icon, setIcon] = useState<string | null>(props.goal.icon ?? null)
+  const [showPicker, setShowPicker] = useState(false)
+
+  const handleEmojiClick = (emoji: any, event: React.MouseEvent) => {
+    const selectedEmoji = emoji.native
+
+    setIcon(selectedEmoji)
+    setShowPicker(false)
+
+    const updatedGoal: Goal = {
+      ...props.goal,
+      icon: selectedEmoji,
+    }
+
+    dispatch(updateGoalRedux(updatedGoal))
+    updateGoalApi(props.goal.id, updatedGoal)
+  }
+
   const goal = useAppSelector(selectGoalsMap)[props.goal.id]
 
   const [name, setName] = useState<string | null>(null)
@@ -77,6 +96,19 @@ export function GoalManager(props: Props) {
 
   return (
     <GoalManagerContainer>
+
+      <button onClick={() => setShowPicker(!showPicker)}>
+        {icon ?? "🎯 Pick Icon"}
+      </button>
+
+      {showPicker && (
+        <EmojiPicker onClick={handleEmojiClick} />
+      )}
+      {icon && (
+        <div style={{ fontSize: "40px", marginBottom: "10px" }}>
+          {icon}
+        </div>
+      )}
       <NameInput value={name ?? ''} onChange={updateNameOnChange} />
 
       <Group>