From 3e3f3f4e87aa5765c23b893c8254947a114c6f72 Mon Sep 17 00:00:00 2001 From: tolgalive Date: Sun, 5 Jul 2026 06:44:23 +0400 Subject: [PATCH 1/2] Support icons --- src/api/types.ts | 1 + src/ui/features/goalmanager/GoalManager.tsx | 142 ++++++++++++++++++-- src/ui/pages/Main/goals/GoalCard.tsx | 5 +- 3 files changed, 133 insertions(+), 15 deletions(-) diff --git a/src/api/types.ts b/src/api/types.ts index f75edad0..711bc31b 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 0779ddaf..44f9892d 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -1,18 +1,32 @@ import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' -import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-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' + import { updateGoal as updateGoalApi } from '../../../api/lib' import { Goal } from '../../../api/types' -import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/goalsSlice' +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 +} -type Props = { goal: Goal } export function GoalManager(props: Props) { const dispatch = useAppDispatch() @@ -21,42 +35,81 @@ 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) 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(() => { setName(goal.name) }, [goal.name]) - const updateNameOnChange = (event: React.ChangeEvent) => { + const hasIcon = () => icon != null && icon.trim() !== '' + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + + const pickEmojiOnClick = ( + emoji: BaseEmoji, + event: React.MouseEvent + ) => { + event.stopPropagation() + + setIcon(emoji.native) + 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, + } + + dispatch(updateGoalRedux(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 +117,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, targetAmount: targetAmount ?? props.goal.targetAmount, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } @@ -77,19 +132,48 @@ export function GoalManager(props: Props) { return ( - + + + + + + + event.stopPropagation()} + > + + + + - + - + @@ -103,17 +187,28 @@ 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 +} + +type GoalIconContainerProps = { + shouldShow: boolean +} + +type EmojiPickerContainerProps = { + isOpen: boolean + hasIcon: boolean +} const Field = (props: FieldProps) => ( @@ -132,6 +227,21 @@ const GoalManagerContainer = styled.div` position: relative; ` +const GoalIconContainer = styled.div` + display: ${(props) => + props.shouldShow ? 'flex' : 'none'}; +` + +const EmojiPickerContainer = + styled.div` + display: ${(props) => + props.isOpen ? 'flex' : 'none'}; + position: absolute; + top: ${(props) => + props.hasIcon ? '10rem' : '2rem'}; + left: 0; + ` + const Group = styled.div` display: flex; flex-direction: row; @@ -139,6 +249,7 @@ const Group = styled.div` margin-top: 1.25rem; margin-bottom: 1.25rem; ` + const NameInput = styled.input` display: flex; background-color: transparent; @@ -155,6 +266,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 +277,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 +295,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 e8f6d0a1..226b1a06 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)} @@ -49,7 +50,9 @@ const Container = styled(Card)` const TargetAmount = styled.h2` font-size: 2rem; ` - +const Icon = styled.h1` + font-size: 5.5rem; +` const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; From 590cd75b0acc3470a1c528ef65beec091b9deb0d Mon Sep 17 00:00:00 2001 From: tolgalive Date: Wed, 8 Jul 2026 01:22:07 +0400 Subject: [PATCH 2/2] Persist goal icon changes --- src/ui/features/goalmanager/GoalManager.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 44f9892d..5c31fd94 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -80,6 +80,7 @@ export function GoalManager(props: Props) { } dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) } const updateNameOnChange = (