From 49aac89ab0eb617901e9c3cb8c75b34728e29132 Mon Sep 17 00:00:00 2001 From: parnika0110 Date: Thu, 18 Jun 2026 00:16:53 +0530 Subject: [PATCH] Add goal icons and emoji picker support --- package-lock.json | 1 + src/api/lib.ts | 2 +- src/api/types.ts | 4 +- src/ui/features/goalmanager/GoalManager.tsx | 101 +++++++++++++++++--- src/ui/pages/Main/goals/GoalCard.tsx | 14 ++- src/ui/pages/Main/goals/GoalsSection.tsx | 11 ++- 6 files changed, 113 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 240aecf..94349f8 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 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..d2d27ad 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 @@ -28,7 +29,6 @@ export interface Goal { transactionIds: string[] tagIds: string[] } - export interface Tag { id: string name: string @@ -65,4 +65,4 @@ export enum ApplicationStatus { } export type ModalContent = Goal -export type ModalType = 'Goal' +export type ModalType = 'Goal' \ No newline at end of file diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..f35e036 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,9 +11,13 @@ 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() @@ -21,42 +26,56 @@ 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 [isEmojiPickerOpen, setIsEmojiPickerOpen] = 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(() => { setName(goal.name) - }, [goal.name]) + setIcon(goal.icon ?? null) + }, [goal.name, goal.icon]) 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, + icon: icon, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } @@ -64,32 +83,84 @@ 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, + icon: icon, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } } + const toggleEmojiPicker = () => { + setIsEmojiPickerOpen(!isEmojiPickerOpen) + } + + const updateIcon = (emoji: BaseEmoji) => { + const updatedGoal: Goal = { + ...props.goal, + icon: emoji.native, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + } + + setIcon(emoji.native) + setIsEmojiPickerOpen(false) + + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) + } + return ( - + {icon && ( + + )} + + {!icon && ( + + )} + + {isEmojiPickerOpen && ( + updateIcon(emoji)} + /> + )} + + - + - + @@ -103,17 +174,19 @@ export function GoalManager(props: Props) { - {new Date(props.goal.created).toLocaleDateString()} + + {new Date(props.goal.created).toLocaleDateString()} + ) } -type FieldProps = { name: string; icon: IconDefinition } -type AddIconButtonContainerProps = { shouldShow: boolean } -type GoalIconContainerProps = { shouldShow: boolean } -type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } +type FieldProps = { + name: string + icon: IconDefinition +} const Field = (props: FieldProps) => ( @@ -139,6 +212,7 @@ const Group = styled.div` margin-top: 1.25rem; margin-bottom: 1.25rem; ` + const NameInput = styled.input` display: flex; background-color: transparent; @@ -155,6 +229,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 +240,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; @@ -181,4 +258,4 @@ const StringInput = styled.input` const Value = styled.div` margin-left: 2rem; -` +` \ No newline at end of file diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..bd26d76 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '../../../../store/hooks' import { setContent as setContentRedux, setIsOpen as setIsOpenRedux, - setType as setTypeRedux + setType as setTypeRedux, } from '../../../../store/modalSlice' import { Card } from '../../../components/Card' @@ -27,7 +27,10 @@ export default function GoalCard(props: Props) { return ( + {goal.icon && {goal.icon}} + ${goal.targetAmount} + {asLocaleDateString(goal.targetDate)} ) @@ -43,9 +46,14 @@ const Container = styled(Card)` margin-left: 2rem; margin-right: 2rem; border-radius: 2rem; - align-items: center; ` + +const Icon = styled.h1` + font-size: 3rem; + margin: 0; +` + const TargetAmount = styled.h2` font-size: 2rem; ` @@ -53,4 +61,4 @@ const TargetAmount = styled.h2` const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; -` +` \ No newline at end of file diff --git a/src/ui/pages/Main/goals/GoalsSection.tsx b/src/ui/pages/Main/goals/GoalsSection.tsx index ab871b3..f9d7313 100644 --- a/src/ui/pages/Main/goals/GoalsSection.tsx +++ b/src/ui/pages/Main/goals/GoalsSection.tsx @@ -21,8 +21,15 @@ export default function GoalsSection() { useEffect(() => { async function fetch() { const goals = await getGoals() - goals?.forEach((goal) => dispatch(createGoalRedux(goal))) + + console.log('GOALS FROM API:', goals) + + goals?.forEach((goal) => { + console.log('DISPATCHING:', goal) + dispatch(createGoalRedux(goal)) + }) } + fetch() }, [dispatch]) @@ -76,4 +83,4 @@ const TopGroup = styled.div` const Icon = styled.a` margin-left: 1rem; -` +` \ No newline at end of file