From 7733a31939ee61385fe0339fc5665823b53941b6 Mon Sep 17 00:00:00 2001 From: Arsalan Ahmed Date: Fri, 26 Jun 2026 17:34:06 +0500 Subject: [PATCH] Support goal icons --- src/api/lib.ts | 2 +- src/api/types.ts | 1 + src/ui/features/goalmanager/GoalManager.tsx | 99 +++++++++++++++++++-- src/ui/pages/Main/goals/GoalCard.tsx | 5 ++ 4 files changed, 101 insertions(+), 6 deletions(-) diff --git a/src/api/lib.ts b/src/api/lib.ts index 3c593ca..9af5604 100644 --- a/src/api/lib.ts +++ b/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 { try { diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..711bc31 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -20,6 +20,7 @@ export interface Application { export interface Goal { id: string name: string + icon: string | null targetAmount: number balance: number targetDate: Date diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..d49404d 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -2,6 +2,7 @@ import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date' +import { BaseEmoji } from 'emoji-mart' import 'date-fns' import React, { useEffect, useState } from 'react' import styled from 'styled-components' @@ -10,17 +11,22 @@ import { Goal } from '../../../api/types' import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/goalsSlice' import { useAppDispatch, useAppSelector } from '../../../store/hooks' import DatePicker from '../../components/DatePicker' +import EmojiPicker from '../../components/EmojiPicker' import { Theme } from '../../components/Theme' +import AddIconButton from './AddIconButton' +import GoalIcon from './GoalIcon' type Props = { goal: Goal } + export function GoalManager(props: Props) { const dispatch = useAppDispatch() - const goal = useAppSelector(selectGoalsMap)[props.goal.id] const [name, setName] = useState(null) const [targetDate, setTargetDate] = useState(null) const [targetAmount, setTargetAmount] = useState(null) + const [icon, setIcon] = useState(null) + const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false) useEffect(() => { setName(props.goal.name) @@ -33,30 +39,68 @@ export function GoalManager(props: Props) { props.goal.targetAmount, ]) + useEffect(() => { + setIcon(props.goal.icon) + }, [props.goal.id, props.goal.icon]) + useEffect(() => { setName(goal.name) }, [goal.name]) + const hasIcon = () => icon != null + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + + const pickEmojiOnClick = (emoji: BaseEmoji, event: React.MouseEvent) => { + event.stopPropagation() + + const selectedIcon = emoji.native + if (!selectedIcon) return + + setIcon(selectedIcon) + setEmojiPickerIsOpen(false) + + const updatedGoal: Goal = { + ...props.goal, + icon: selectedIcon, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + } + + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) + } + const updateNameOnChange = (event: React.ChangeEvent) => { const nextName = event.target.value setName(nextName) + const updatedGoal: Goal = { ...props.goal, name: nextName, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } - const updateTargetAmountOnChange = (event: React.ChangeEvent) => { + const updateTargetAmountOnChange = ( + event: React.ChangeEvent + ) => { const nextTargetAmount = parseFloat(event.target.value) setTargetAmount(nextTargetAmount) + const updatedGoal: Goal = { ...props.goal, name: name ?? props.goal.name, targetDate: targetDate ?? props.goal.targetDate, targetAmount: nextTargetAmount, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } @@ -64,12 +108,14 @@ export function GoalManager(props: Props) { const pickDateOnChange = (date: MaterialUiPickersDate) => { if (date != null) { setTargetDate(date) + const updatedGoal: Goal = { ...props.goal, name: name ?? props.goal.name, - targetDate: date ?? props.goal.targetDate, + targetDate: date, targetAmount: targetAmount ?? props.goal.targetAmount, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } @@ -79,6 +125,22 @@ export function GoalManager(props: Props) { + + + + + + + + + event.stopPropagation()} + > + + + @@ -89,7 +151,10 @@ export function GoalManager(props: Props) { - + @@ -103,7 +168,9 @@ export function GoalManager(props: Props) { - {new Date(props.goal.created).toLocaleDateString()} + + {new Date(props.goal.created).toLocaleDateString()} + @@ -132,6 +199,24 @@ const GoalManagerContainer = styled.div` position: relative; ` +const AddIconButtonContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; + margin-top: 1rem; +` + +const GoalIconContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; + margin-top: 1rem; +` + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; + z-index: 10; +` + const Group = styled.div` display: flex; flex-direction: row; @@ -139,6 +224,7 @@ const Group = styled.div` margin-top: 1.25rem; margin-bottom: 1.25rem; ` + const NameInput = styled.input` display: flex; background-color: transparent; @@ -155,6 +241,7 @@ const FieldName = styled.h1` color: rgba(174, 174, 174, 1); font-weight: normal; ` + const FieldContainer = styled.div` display: flex; flex-direction: row; @@ -165,10 +252,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; diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..15d2db7 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -27,6 +27,7 @@ export default function GoalCard(props: Props) { return ( + {goal.icon} ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} @@ -54,3 +55,7 @@ const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; ` + +const Icon = styled.h1` + font-size: 5.5rem; +` \ No newline at end of file