From 5fc4476e2c9c0752826bd0bd586ff28aa1c66d02 Mon Sep 17 00:00:00 2001 From: CoderParth Date: Tue, 23 Jun 2026 15:49:00 +1000 Subject: [PATCH] Support icons --- package-lock.json | 1 + src/api/types.ts | 1 + src/ui/features/goalmanager/GoalManager.tsx | 77 +++++++++++++++++++-- src/ui/pages/Main/goals/GoalCard.tsx | 6 +- 4 files changed, 80 insertions(+), 5 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/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..b8dcc82 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -1,8 +1,9 @@ import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' -import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons' +import { faDollarSign, faSmile, IconDefinition } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date' import 'date-fns' +import { BaseEmoji } from 'emoji-mart' import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { updateGoal as updateGoalApi } from '../../../api/lib' @@ -10,9 +11,21 @@ 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 { TransparentButton } from '../../components/TransparentButton' +import GoalIcon from './GoalIcon' type Props = { goal: Goal } +type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; +` + export function GoalManager(props: Props) { const dispatch = useAppDispatch() @@ -22,15 +35,38 @@ export function GoalManager(props: Props) { const [targetDate, setTargetDate] = useState(null) const [targetAmount, setTargetAmount] = useState(null) + const [icon, setIcon] = useState(null) + const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false) + + const hasIcon = () => icon != null + + 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)) + + updateGoalApi(props.goal.id, updatedGoal) + } + 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(() => { @@ -75,6 +111,11 @@ export function GoalManager(props: Props) { } } + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + return ( @@ -106,15 +147,31 @@ export function GoalManager(props: Props) { {new Date(props.goal.created).toLocaleDateString()} + + + + + Add icon + + + + + + + + event.stopPropagation()} + > + + ) } type FieldProps = { name: string; icon: IconDefinition } -type AddIconButtonContainerProps = { shouldShow: boolean } type GoalIconContainerProps = { shouldShow: boolean } -type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } - const Field = (props: FieldProps) => ( @@ -182,3 +239,15 @@ const StringInput = styled.input` const Value = styled.div` margin-left: 2rem; ` + +const AddIconButtonContainer = styled.div<{ hasIcon: boolean }>` + display: ${(props) => (props.hasIcon ? 'none' : 'flex')}; +` + +const AddIconButtonText = styled.span` + margin-left: 0.5rem; +` + +const GoalIconContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; +` diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..ea6f124 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' @@ -24,11 +24,15 @@ export default function GoalCard(props: Props) { } const asLocaleDateString = (date: Date) => new Date(date).toLocaleDateString() + const Icon = styled.h1` + font-size: 5.5rem; + ` return ( ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} + {goal.icon} ) }