Implement emoji picker and add goal controller tests

src/api/types.ts

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

src/ui/components/EmojiPicker.tsx

@@ -1,5 +1,5 @@
+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'
 

src/ui/features/goalmanager/AddIconButton.tsx

@@ -1,3 +1,4 @@
+
 import { faSmile } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'date-fns'

src/ui/features/goalmanager/GoalManager.tsx

@@ -3,6 +3,10 @@ import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date'
 import 'date-fns'
+import { BaseEmoji } from 'emoji-mart'
+import EmojiPicker from '../../components/EmojiPicker'
+import GoalIcon from './GoalIcon'
+import AddIconButton from './AddIconButton'
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { updateGoal as updateGoalApi } from '../../../api/lib'
@@ -21,17 +25,20 @@ 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)
-
-  useEffect(() => {
-    setName(props.goal.name)
-    setTargetDate(props.goal.targetDate)
-    setTargetAmount(props.goal.targetAmount)
-  }, [
-    props.goal.id,
-    props.goal.name,
-    props.goal.targetDate,
-    props.goal.targetAmount,
-  ])
+  const [icon, setIcon] = useState<string | null>(null)
+  const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false)
+
+useEffect(() => {
+  setName(goal.name)
+  setTargetDate(goal.targetDate)
+  setTargetAmount(goal.targetAmount)
+  setIcon(goal.icon ?? null)
+}, [
+  goal.name,
+  goal.targetDate,
+  goal.targetAmount,
+  goal.icon,
+])
 
   useEffect(() => {
     setName(goal.name)
@@ -74,10 +81,54 @@ export function GoalManager(props: Props) {
       updateGoalApi(props.goal.id, updatedGoal)
     }
   }
+const hasIcon = () => icon != null
+
+const addIconOnClick = (event: React.MouseEvent) => {
+  event.stopPropagation()
+  setEmojiPickerIsOpen(true)
+}
 
+const pickEmojiOnClick = (emoji: any, event: React.MouseEvent) => {
+  event.stopPropagation()
+
+  setIcon(emoji.native)
+  console.log('Selected emoji:', emoji.native)
+  setEmojiPickerIsOpen(false)
+
+  const updatedGoal: Goal = {
+    ...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))
+  console.log(updatedGoal)
+  updateGoalApi(props.goal.id, updatedGoal)
+}
   return (
-    <GoalManagerContainer>
-      <NameInput value={name ?? ''} onChange={updateNameOnChange} />
+<GoalManagerContainer>
+  <GoalIconContainer shouldShow={hasIcon()}>
+    <GoalIcon icon={icon} onClick={addIconOnClick} />
+  </GoalIconContainer>
+
+   <EmojiPickerContainer 
+     isOpen={emojiPickerIsOpen} 
+
+     hasIcon={hasIcon()} 
+     onClick={(event: React.MouseEvent) => event.stopPropagation()}>
+    <EmojiPicker onClick={pickEmojiOnClick} />
+  </EmojiPickerContainer>
+
+  <AddIconButtonContainer shouldShow={hasIcon()}>
+    <AddIconButton
+      hasIcon={hasIcon()}
+      onClick={addIconOnClick}
+    />
+  </AddIconButtonContainer>
+
+  <NameInput value={name ?? ''} onChange={updateNameOnChange} />
 
       <Group>
         <Field name="Target Date" icon={faCalendarAlt} />
@@ -131,7 +182,19 @@ const GoalManagerContainer = styled.div`
   width: 100%;
   position: relative;
 `
+const GoalIconContainer = styled.div<GoalIconContainerProps>`
+  display: ${(props) => (props.shouldShow ? 'flex' : 'none')};
+`
 
+const AddIconButtonContainer = styled.div<AddIconButtonContainerProps>`
+  display: ${(props) => (props.shouldShow ? 'none' : 'flex')};
+`
+const EmojiPickerContainer = styled.div<EmojiPickerContainerProps>`
+  display: ${(props) => (props.isOpen ? 'flex' : 'none')};
+  position: absolute;
+  top: ${(props) => (props.hasIcon ? '10rem' : '2rem')};
+  left: 0;
+`
 const Group = styled.div`
   display: flex;
   flex-direction: row;
@@ -172,6 +235,7 @@ const StringValue = styled.h1`
 const StringInput = styled.input`
   display: flex;
   background-color: transparent;
+
   outline: none;
   border: none;
   font-size: 1.8rem;

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

@@ -27,6 +27,7 @@ export default function GoalCard(props: Props) {
 
   return (
     <Container key={goal.id} onClick={onClick}>
+      <h1>{goal.icon}</h1>
       <TargetAmount>${goal.targetAmount}</TargetAmount>
       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
     </Container>