Icons

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vs/VSWorkspaceState.json
+.vs/CommBank-Web/v17/.wsuo
+.vs/CommBank-Web/v17/DocumentLayout.json

my_patch.patch

@@ -0,0 +1,206 @@
+diff --git a/.gitignore b/.gitignore
+index 4d29575..98087f4 100644
+--- a/.gitignore
++++ b/.gitignore
+@@ -21,3 +21,6 @@
+ npm-debug.log*
+ yarn-debug.log*
+ yarn-error.log*
++.vs/VSWorkspaceState.json
++.vs/CommBank-Web/v17/.wsuo
++.vs/CommBank-Web/v17/DocumentLayout.json
+diff --git a/src/api/types.ts b/src/api/types.ts
+index f75edad..8cbabc0 100644
+--- a/src/api/types.ts
++++ b/src/api/types.ts
+@@ -27,6 +27,7 @@ export interface Goal {
+   accountId: string
+   transactionIds: string[]
+   tagIds: string[]
++  icon: string | null
+ }
+
+ export interface Tag {
+diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx
+index 0779dda..d6d0fbd 100644
+--- a/src/ui/features/goalmanager/GoalManager.tsx
++++ b/src/ui/features/goalmanager/GoalManager.tsx
+@@ -11,12 +11,41 @@ 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 '../../../ui/pages/EmojiPicker'
++import { BaseEmoji, Picker } from 'emoji-mart'
++import { TransparentButton } from '../../components/TransparentButton';
++import GoalIcon from './GoalIcon';
++
++import { faSmile } from '@fortawesome/free-solid-svg-icons';
++
+
+ type Props = { goal: Goal }
+ export function GoalManager(props: Props) {
+-  const dispatch = useAppDispatch()
+-
++  const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false)
++  const [icon, setIcon] = useState<string | null>(null)
++  const hasIcon = () => icon != null
+   const goal = useAppSelector(selectGoalsMap)[props.goal.id]
++  useEffect(() => {
++    setIcon(props.goal.icon)
++  }, [props.goal.id, props.goal.icon])
++
++  const addIconOnClick = (event: React.MouseEvent) => {
++    event.stopPropagation()
++    setEmojiPickerIsOpen(true)
++  }
++
++  const pickEmojiOnClick = (emoji: BaseEmoji) => {
++    setIcon(emoji.native)
++    setEmojiPickerIsOpen(false)
++    const updatedGoal: Goal = {
++      ...props.goal,
++      icon: emoji.native,
++    }
++    dispatch(updateGoalRedux(updatedGoal))
++    updateGoalApi(props.goal.id, updatedGoal)
++  }
++
++  const dispatch = useAppDispatch()
+
+   const [name, setName] = useState<string | null>(null)
+   const [targetDate, setTargetDate] = useState<Date | null>(null)
+@@ -61,18 +90,16 @@ export function GoalManager(props: Props) {
+     updateGoalApi(props.goal.id, updatedGoal)
+   }
+
+-  const pickDateOnChange = (date: MaterialUiPickersDate) => {
+-    if (date != null) {
+-      setTargetDate(date)
+-      const updatedGoal: Goal = {
+-        ...props.goal,
+-        name: name ?? props.goal.name,
+-        targetDate: date ?? props.goal.targetDate,
+-        targetAmount: targetAmount ?? props.goal.targetAmount,
+-      }
+-      dispatch(updateGoalRedux(updatedGoal))
+-      updateGoalApi(props.goal.id, updatedGoal)
++  const pickDateOnChange = (date: Date | null) => {
++    setTargetDate(date)
++    const updatedGoal: Goal = {
++      ...props.goal,
++      name: name ?? props.goal.name,
++      targetDate: date ?? props.goal.targetDate,
++      targetAmount: targetAmount ?? props.goal.targetAmount,
+     }
++    dispatch(updateGoalRedux(updatedGoal))
++    updateGoalApi(props.goal.id, updatedGoal)
+   }
+
+   return (
+@@ -92,6 +119,15 @@ export function GoalManager(props: Props) {
+           <StringInput value={targetAmount ?? ''} onChange={updateTargetAmountOnChange} />
+         </Value>
+       </Group>
++      <AddIconButtonContainer hasIcon={hasIcon()}>
++      <TransparentButton onClick={addIconOnClick}>
++        <FontAwesomeIcon icon={faSmile} size="2x" />
++        <AddIconButtonText>Add icon</AddIconButtonText>
++      </TransparentButton>
++    </AddIconButtonContainer>
++    <GoalIconContainer shouldShow={hasIcon()}>
++      <GoalIcon icon={goal.icon} onClick={addIconOnClick} />
++    </GoalIconContainer>
+
+       <Group>
+         <Field name="Balance" icon={faDollarSign} />
+@@ -106,14 +142,20 @@ export function GoalManager(props: Props) {
+           <StringValue>{new Date(props.goal.created).toLocaleDateString()}</StringValue>
+         </Value>
+       </Group>
++
++      <EmojiPickerContainer isOpen={emojiPickerIsOpen}>
++        <EmojiPicker onClick={pickEmojiOnClick} />
++      </EmojiPickerContainer>
+     </GoalManagerContainer>
+   )
+ }
+
+-type FieldProps = { name: string; icon: IconDefinition }
+-type AddIconButtonContainerProps = { shouldShow: boolean }
++type FieldProps = { name: string; icon: any }
++type AddIconButtonContainerProps = { hasIcon?: boolean }
+ type GoalIconContainerProps = { shouldShow: boolean }
+-type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean }
++
++
++type EmojiPickerContainerProps = { isOpen: boolean }
+
+ const Field = (props: FieldProps) => (
+   <FieldContainer>
+@@ -122,6 +164,28 @@ const Field = (props: FieldProps) => (
+   </FieldContainer>
+ )
+
++const AddIconButtonContainer = styled.div<AddIconButtonContainerProps>`
++  display: ${(props) => (props.hasIcon ? 'none' : 'flex')};
++  align-items: center;
++`
++
++const AddIconButtonText = styled.span`
++  margin-left: 0.5rem;
++`
++
++const GoalIconContainer = styled.div<GoalIconContainerProps>`
++  display: ${(props) => (props.shouldShow ? 'flex' : 'none')};
++`
++
++const Icon = styled.h1`
++  font-size: 5.5rem;
++  cursor: pointer;
++`
++
++const EmojiPickerContainer = styled.div<EmojiPickerContainerProps>`
++  display: ${(props) => (props.isOpen ? 'flex' : 'none')};
++`
++
+ const GoalManagerContainer = styled.div`
+   display: flex;
+   flex-direction: column;
+@@ -139,6 +203,7 @@ const Group = styled.div`
+   margin-top: 1.25rem;
+   margin-bottom: 1.25rem;
+ `
++
+ const NameInput = styled.input`
+   display: flex;
+   background-color: transparent;
+diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx
+index e8f6d0a..10d9e6b 100644
+--- a/src/ui/pages/Main/goals/GoalCard.tsx
++++ b/src/ui/pages/Main/goals/GoalCard.tsx
+@@ -8,13 +8,16 @@ import {
+   setType as setTypeRedux
+ } from '../../../../store/modalSlice'
+ import { Card } from '../../../components/Card'
+-
++const Icon = styled.h1`
++  font-size: 5.5rem;
++`
+ type Props = { id: string }
+
+ export default function GoalCard(props: Props) {
+   const dispatch = useAppDispatch()
+
+   const goal = useAppSelector(selectGoalsMap)[props.id]
++  console.log(goal)
+
+   const onClick = (event: React.MouseEvent) => {
+     event.stopPropagation()
+@@ -29,6 +32,7 @@ export default function GoalCard(props: Props) {
+     <Container key={goal.id} onClick={onClick}>
+       <TargetAmount>${goal.targetAmount}</TargetAmount>
+       <TargetDate>{asLocaleDateString(goal.targetDate)}</TargetDate>
++      <Icon>{goal.icon}</Icon>
+     </Container>
+   )
+ }