Support icons

package.json

@@ -14,7 +14,7 @@
     "@types/node": "^17.0.41",
     "@types/react": "^16.9.0",
     "@types/react-redux": "^7.1.7",
-    "axios": "^0.27.2",
+    "axios": "^1.18.1",
     "css-in-js-media": "^2.0.1",
     "date-fns": "^2.28.0",
     "emoji-mart": "^3.0.1",
@@ -23,7 +23,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "sass": "^1.52.3",
     "styled-components": "^5.3.5",
     "typescript": "^4.7.3",
@@ -59,4 +59,4 @@
     "@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 {
@@ -43,11 +43,14 @@ export async function createGoal(): Promise<Goal | null> {
   }
 }
 
-export async function updateGoal(goalId: string, updatedGoal: Goal): Promise<boolean> {
+export async function updateGoal(
+  goalId: string,
+  updatedGoal: Goal
+): Promise<boolean> {
   try {
     await axios.put(`${API_ROOT}/api/Goal/${goalId}`, updatedGoal)
     return true
   } catch (error: any) {
     return false
   }
-}
+}

src/api/types.ts

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

src/ui/components/EmojiPicker.tsx

@@ -1,19 +1,23 @@
+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 }
+type Props = {
+  onClick: (emoji: BaseEmoji, event: React.MouseEvent) => void
+}
 
-export default function EmojiPicker(props: Props) {
+export default function EmojiPicker({ onClick }: Props) {
   const theme = useAppSelector(selectMode)
 
   return (
     <Picker
       theme={theme}
       showPreview={false}
       showSkinTones={false}
-      onClick={props.onClick}
+      onClick={onClick}
       color="primary"
     />
   )

src/ui/features/goalmanager/GoalIcon.tsx

@@ -1,9 +1,11 @@
-import 'date-fns'
 import React from 'react'
 import styled from 'styled-components'
 import { TransparentButton } from '../../components/TransparentButton'
 
-type Props = { icon: string | null; onClick: (e: React.MouseEvent) => void }
+type Props = {
+  icon: string | null
+  onClick: (event: React.MouseEvent) => void
+}
 
 export default function GoalIcon(props: Props) {
   return (
@@ -16,4 +18,6 @@ export default function GoalIcon(props: Props) {
 const Icon = styled.h1`
   font-size: 6rem;
   cursor: pointer;
-`
+  margin: 0;
+  user-select: none;
+`

src/ui/features/goalmanager/GoalManager.tsx

@@ -1,5 +1,5 @@
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
-import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { faDollarSign, faSmile, IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date'
 import 'date-fns'
@@ -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 { setContent as setContentRedux, setIsOpen as setIsOpenRedux, setType as setTypeRedux } from '../../../store/modalSlice'
+import { TransparentButton } from '../../components/TransparentButton'
 type Props = { goal: Goal }
 export function GoalManager(props: Props) {
   const dispatch = useAppDispatch()
@@ -21,16 +24,30 @@ 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)
+
+  const hasIcon = () => icon != null
+  const addIconOnClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    setEmojiPickerIsOpen(true)
+  }
+
+  useEffect(() => {
+    setIcon(props.goal.icon)
+  }, [props.goal.id, props.goal.icon])
 
   useEffect(() => {
     setName(props.goal.name)
     setTargetDate(props.goal.targetDate)
     setTargetAmount(props.goal.targetAmount)
+    setIcon(props.goal.icon)
   }, [
     props.goal.id,
     props.goal.name,
     props.goal.targetDate,
     props.goal.targetAmount,
+    props.goal.icon,
   ])
 
   useEffect(() => {
@@ -75,6 +92,28 @@ export function GoalManager(props: Props) {
     }
   }
 
+  const pickEmojiOnClick = (emoji: BaseEmoji, event: MouseEvent) => {
+    event.stopPropagation()
+
+    const nextIcon = emoji.native ?? null
+    setIcon(nextIcon)
+    setEmojiPickerIsOpen(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,
+    }
+
+    updateGoalApi(props.goal.id, updatedGoal)
+
+    dispatch(updateGoalRedux(updatedGoal))
+
+    // TODO(TASK-3) Update database
+  }
+
   return (
     <GoalManagerContainer>
       <NameInput value={name ?? ''} onChange={updateNameOnChange} />
@@ -110,6 +149,7 @@ export function GoalManager(props: Props) {
   )
 }
 
+
 type FieldProps = { name: string; icon: IconDefinition }
 type AddIconButtonContainerProps = { shouldShow: boolean }
 type GoalIconContainerProps = { shouldShow: boolean }

src/ui/pages/Main/Main.tsx

@@ -16,11 +16,14 @@ export default function Main() {
         <Navbar />
 
         <Content>
-          <Group>
+          <LeftSection>
             <AccountsSection />
             <GoalsSection />
-          </Group>
-          <TransactionsSection />
+          </LeftSection>
+
+          <RightSection>
+            <TransactionsSection />
+          </RightSection>
         </Content>
       </MainSection>
     </Container>
@@ -29,50 +32,45 @@ export default function Main() {
 
 const Container = styled.div`
   display: flex;
-  flex-direction: row;
   width: 100vw;
   height: 100vh;
-  background-color: rgb(var(--background));
+  background: rgb(var(--background));
   overflow: hidden;
 `
 
-const MainSection = styled.div`
+const MainSection = styled.main`
+  flex: 1;
   display: flex;
   flex-direction: column;
-  width: calc(100% - 250px);
-  height: 100%;
-
-  ${media('<=tablet')} {
-    width: 100%;
-    overflow: scroll;
-  }
+  overflow: hidden;
 `
 
 const Content = styled.div`
+  flex: 1;
   display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-  justify-content: space-around;
-  align-items: center;
+  gap: 30px;
+  padding: 25px;
+  overflow-y: auto;
 
   ${media('<desktop')} {
     flex-direction: column;
-    justify-content: flex-start;
-    flex-wrap: none;
-    overflow-y: scroll;
+    padding: 20px;
   }
 `
 
-const Group = styled.div`
+const LeftSection = styled.div`
+  flex: 1;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  gap: 24px;
+`
 
-  ${media('<=tablet')} {
+const RightSection = styled.div`
+  width: 420px;
+  display: flex;
+  flex-direction: column;
+
+  ${media('<desktop')} {
     width: 100%;
-    justify-content: flex-start;
   }
-`
+`

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

@@ -23,12 +23,16 @@ 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}>
       <TargetAmount>${goal.targetAmount}</TargetAmount>
+
       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
+
+      <Icon>{goal.icon}</Icon>
     </Container>
   )
 }
@@ -43,9 +47,9 @@ const Container = styled(Card)`
   margin-left: 2rem;
   margin-right: 2rem;
   border-radius: 2rem;
-
   align-items: center;
 `
+
 const TargetAmount = styled.h2`
   font-size: 2rem;
 `
@@ -54,3 +58,7 @@ const TargetDate = styled.h4`
   color: rgba(174, 174, 174, 1);
   font-size: 1rem;
 `
+
+const Icon = styled.h1`
+  font-size: 5.5rem;
+`