From 76957bebfbc556c3622f6150468ffb996ba0bc68 Mon Sep 17 00:00:00 2001 From: arsachin0007 Date: Mon, 20 Jul 2026 00:50:47 +0530 Subject: [PATCH] Add goal icon support and emoji picker --- package-lock.json | 1 + src/api/lib.ts | 2 +- src/api/types.ts | 1 + src/react-app-env.d.ts | 2 + src/ui/features/goalmanager/EmojiPicker.tsx | 24 ++++++++ src/ui/features/goalmanager/GoalManager.tsx | 63 ++++++++++++++++++++- src/ui/pages/Main/goals/GoalCard.tsx | 13 ++++- 7 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 src/ui/features/goalmanager/EmojiPicker.tsx diff --git a/package-lock.json b/package-lock.json index 240aecf2..94349f81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6611,6 +6611,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz", "integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==", + "license": "BSD-3-Clause", "dependencies": { "@babel/runtime": "^7.0.0", "prop-types": "^15.6.0" diff --git a/src/api/lib.ts b/src/api/lib.ts index 3c593ca6..9af5604e 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 f75edad0..b668377e 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 } export interface Tag { diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6431bc5f..9f162bb3 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1,3 @@ /// + +declare module '*.css'; \ No newline at end of file diff --git a/src/ui/features/goalmanager/EmojiPicker.tsx b/src/ui/features/goalmanager/EmojiPicker.tsx new file mode 100644 index 00000000..c508c68b --- /dev/null +++ b/src/ui/features/goalmanager/EmojiPicker.tsx @@ -0,0 +1,24 @@ +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 +} + +export default function EmojiPicker(props: Props) { + const theme = useAppSelector(selectMode) + + return ( + + ) +} \ No newline at end of file diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779ddaf..759936e7 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -1,3 +1,9 @@ +import { BaseEmoji } from 'emoji-mart' +import { faSmile } from '@fortawesome/free-regular-svg-icons' + +import EmojiPicker from './EmojiPicker' +import AddIconButton from './AddIconButton' +import GoalIcon from './GoalIcon' import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @@ -21,6 +27,8 @@ export function GoalManager(props: Props) { 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) @@ -37,6 +45,10 @@ export function GoalManager(props: Props) { setName(goal.name) }, [goal.name]) + useEffect(() => { + setIcon(props.goal.icon) + }, [props.goal.id, props.goal.icon]) + const updateNameOnChange = (event: React.ChangeEvent) => { const nextName = event.target.value setName(nextName) @@ -74,11 +86,56 @@ export function GoalManager(props: Props) { updateGoalApi(props.goal.id, updatedGoal) } } + const hasIcon = () => icon != null - return ( - - +const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) +} + +const goalIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) +} + +const emojiOnClick = (emoji: BaseEmoji) => { + setEmojiPickerIsOpen(false) + setIcon(emoji.native) + + const updatedGoal: Goal = { + ...props.goal, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + icon: emoji.native ?? props.goal.icon, + } + + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) +} + return ( + + + {hasIcon() ? ( + + ) : ( + + )} + + {emojiPickerIsOpen && ( + + )} + + diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a1..ec087c30 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -23,10 +23,12 @@ 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 ( + {goal.icon} ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} @@ -43,9 +45,14 @@ const Container = styled(Card)` margin-left: 2rem; margin-right: 2rem; border-radius: 2rem; - align-items: center; ` + +const Icon = styled.div` + font-size: 3rem; + margin-top: 1rem; +` + const TargetAmount = styled.h2` font-size: 2rem; ` @@ -53,4 +60,4 @@ const TargetAmount = styled.h2` const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; -` +` \ No newline at end of file