Add icon field to Goal model

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

package.json

@@ -4,13 +4,13 @@
   "private": true,
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
-    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@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 +55,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,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

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

src/data/Goal.ts

@@ -0,0 +1,12 @@
+export interface Goal {
+    id: string;
+    name: string;
+    icon?: string;
+    targetAmount: number;
+    targetDate: string;
+    balance: number;
+    created: string;
+    transactionIds: string[];
+    tagIds: string[];
+    userId: string;
+}

src/ui/features/goalmanager/GoalManager.tsx

@@ -4,6 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date'
 import 'date-fns'
 import React, { useEffect, useState } from 'react'
+import { Picker } from 'emoji-mart'
+import 'emoji-mart/css/emoji-mart.css'
 import styled from 'styled-components'
 import { updateGoal as updateGoalApi } from '../../../api/lib'
 import { Goal } from '../../../api/types'
@@ -21,16 +23,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)
+  const [icon, setIcon] = useState<string | null>(null)
+  const [isPickerOpen, setIsPickerOpen] = 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,
     props.goal.targetDate,
     props.goal.targetAmount,
+    props.goal.icon,
   ])
 
   useEffect(() => {
@@ -75,10 +81,32 @@ export function GoalManager(props: Props) {
     }
   }
 
+  const onEmojiSelect = (emoji: any) => {
+    const nextIcon = emoji.native
+    setIcon(nextIcon)
+    setIsPickerOpen(false)
+    const updatedGoal: Goal = {
+      ...props.goal,
+      icon: nextIcon,
+    }
+    dispatch(updateGoalRedux(updatedGoal))
+    updateGoalApi(props.goal.id, updatedGoal)
+  }
+
   return (
     <GoalManagerContainer>
       <NameInput value={name ?? ''} onChange={updateNameOnChange} />
 
+      <IconButton onClick={() => setIsPickerOpen(!isPickerOpen)}>
+        {icon ? icon : '+ Add Icon'}
+      </IconButton>
+
+      {isPickerOpen && (
+        <EmojiPickerContainer>
+          <Picker onSelect={onEmojiSelect} />
+        </EmojiPickerContainer>
+      )}
+
       <Group>
         <Field name="Target Date" icon={faCalendarAlt} />
         <Value>
@@ -111,9 +139,6 @@ export function GoalManager(props: Props) {
 }
 
 type FieldProps = { name: string; icon: IconDefinition }
-type AddIconButtonContainerProps = { shouldShow: boolean }
-type GoalIconContainerProps = { shouldShow: boolean }
-type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean }
 
 const Field = (props: FieldProps) => (
   <FieldContainer>
@@ -139,6 +164,7 @@ const Group = styled.div`
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 `
+
 const NameInput = styled.input`
   display: flex;
   background-color: transparent;
@@ -149,12 +175,30 @@ const NameInput = styled.input`
   color: ${({ theme }: { theme: Theme }) => theme.text};
 `
 
+const IconButton = styled.button`
+  background: transparent;
+  border: 1px solid rgba(174, 174, 174, 1);
+  border-radius: 0.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+  color: ${({ theme }: { theme: Theme }) => theme.text};
+`
+
+const EmojiPickerContainer = styled.div`
+  position: absolute;
+  top: 12rem;
+  z-index: 100;
+`
+
 const FieldName = styled.h1`
   font-size: 1.8rem;
   margin-left: 1rem;
   color: rgba(174, 174, 174, 1);
   font-weight: normal;
 `
+
 const FieldContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -165,10 +209,12 @@ const FieldContainer = styled.div`
     color: rgba(174, 174, 174, 1);
   }
 `
+
 const StringValue = styled.h1`
   font-size: 1.8rem;
   font-weight: bold;
 `
+
 const StringInput = styled.input`
   display: flex;
   background-color: transparent;

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

@@ -27,6 +27,7 @@ export default function GoalCard(props: Props) {
 
   return (
     <Container key={goal.id} onClick={onClick}>
+      {goal.icon && <Icon>{goal.icon}</Icon>}
       <TargetAmount>${goal.targetAmount}</TargetAmount>
       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
     </Container>
@@ -43,9 +44,11 @@ const Container = styled(Card)`
   margin-left: 2rem;
   margin-right: 2rem;
   border-radius: 2rem;
-
   align-items: center;
 `
+const Icon = styled.p`
+  font-size: 2rem;
+`
 const TargetAmount = styled.h2`
   font-size: 2rem;
 `

src/ui/surfaces/drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import { faChartLine, faGear, faRocket } from '@fortawesome/free-solid-svg-icons'
+import { faChartLine, faCog, faRocket } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import styled from 'styled-components'
@@ -26,7 +26,7 @@ export default function Navbar() {
 
       <Section>
         <DrawerItem isSelected={false}>
-          <FontAwesomeIcon icon={faGear} size="2x" />
+         <FontAwesomeIcon icon={faCog} size="2x" />
           <span>Settings</span>
         </DrawerItem>
       </Section>