Add goal icon support and emoji picker

src/api/lib.ts

@@ -2,7 +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 {

src/api/types.ts

@@ -27,6 +27,7 @@ export interface Goal {
   accountId: string
   transactionIds: string[]
   tagIds: string[]
+  icon: string
 }
 
 export interface Tag {

src/react-app-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+
+declare module '*.css';

src/ui/features/goalmanager/EmojiPicker.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { BaseEmoji, Picker } from 'emoji-mart'
+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) {
+  const theme = useAppSelector(selectMode)
+
+  return (
+    <Picker
+      theme={theme}
+      showPreview={false}
+      showSkinTones={false}
+      onClick={props.onClick}
+      color="primary"
+    />
+  )
+}

src/ui/features/goalmanager/GoalManager.tsx

@@ -1,3 +1,9 @@
+import { BaseEmoji } from 'emoji-mart'
+import { faSmile } from '@fortawesome/free-regular-svg-icons'
+
+import EmojiPicker from './EmojiPicker'
+import AddIconButton from './AddIconButton'
+import GoalIcon from './GoalIcon'
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
 import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -21,6 +27,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 [icon, setIcon] = useState<string | null>(null)
+  const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false)
 
   useEffect(() => {
     setName(props.goal.name)
@@ -37,6 +45,10 @@ export function GoalManager(props: Props) {
     setName(goal.name)
   }, [goal.name])
 
+  useEffect(() => {
+  setIcon(props.goal.icon)
+  }, [props.goal.id, props.goal.icon])
+
   const updateNameOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const nextName = event.target.value
     setName(nextName)
@@ -74,11 +86,56 @@ export function GoalManager(props: Props) {
       updateGoalApi(props.goal.id, updatedGoal)
     }
   }
+  const hasIcon = () => icon != null
 
-  return (
-    <GoalManagerContainer>
-      <NameInput value={name ?? ''} onChange={updateNameOnChange} />
+const addIconOnClick = (event: React.MouseEvent) => {
+  event.stopPropagation()
+  setEmojiPickerIsOpen(true)
+}
+
+const goalIconOnClick = (event: React.MouseEvent) => {
+  event.stopPropagation()
+  setEmojiPickerIsOpen(true)
+}
+
+const emojiOnClick = (emoji: BaseEmoji) => {
+  setEmojiPickerIsOpen(false)
+  setIcon(emoji.native)
+
+  const updatedGoal: Goal = {
+    ...props.goal,
+    name: name ?? props.goal.name,
+    targetDate: targetDate ?? props.goal.targetDate,
+    targetAmount: targetAmount ?? props.goal.targetAmount,
+    icon: emoji.native ?? props.goal.icon,
+  }
+
+  dispatch(updateGoalRedux(updatedGoal))
+  updateGoalApi(props.goal.id, updatedGoal)
+}
 
+ return (
+  <GoalManagerContainer>
+
+    {hasIcon() ? (
+      <GoalIcon
+        icon={icon}
+        onClick={goalIconOnClick}
+      />
+    ) : (
+      <AddIconButton
+        hasIcon={false}
+        onClick={addIconOnClick}
+      />
+    )}
+
+    {emojiPickerIsOpen && (
+      <EmojiPicker
+        onClick={emojiOnClick}
+      />
+    )}
+
+    <NameInput value={name ?? ''} onChange={updateNameOnChange} />
       <Group>
         <Field name="Target Date" icon={faCalendarAlt} />
         <Value>

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

@@ -23,10 +23,12 @@ export default function GoalCard(props: Props) {
     dispatch(setIsOpenRedux(true))
   }
 
-  const asLocaleDateString = (date: Date) => new Date(date).toLocaleDateString()
+  const asLocaleDateString = (date: Date) =>
+    new Date(date).toLocaleDateString()
 
   return (
     <Container key={goal.id} onClick={onClick}>
+      <Icon>{goal.icon}</Icon>
       <TargetAmount>${goal.targetAmount}</TargetAmount>
       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
     </Container>
@@ -43,14 +45,19 @@ const Container = styled(Card)`
   margin-left: 2rem;
   margin-right: 2rem;
   border-radius: 2rem;
-
   align-items: center;
 `
+
+const Icon = styled.div`
+  font-size: 3rem;
+  margin-top: 1rem;
+`
+
 const TargetAmount = styled.h2`
   font-size: 2rem;
 `
 
 const TargetDate = styled.h4`
   color: rgba(174, 174, 174, 1);
   font-size: 1rem;
-`
+`