From 9ff543f6871a6b86fe9879b0c742241b4bf10395 Mon Sep 17 00:00:00 2001 From: skai0008 Date: Thu, 24 Jul 2025 23:34:22 +1000 Subject: [PATCH 1/3] update: updated optional goal icon. --- package-lock.json | 1 + src/api/types.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index 240aecf..8b47f38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4768,6 +4768,7 @@ "version": "0.27.2", "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "license": "MIT", "dependencies": { "follow-redirects": "^1.14.9", "form-data": "^4.0.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 { From 6ea39aec4e7b4b0aba73ed3abd1dacc96c679520 Mon Sep 17 00:00:00 2001 From: skai0008 Date: Fri, 25 Jul 2025 00:38:31 +1000 Subject: [PATCH 2/3] feat: added new emoji icon --- package-lock.json | 1 + src/ui/components/EmojiPicker.tsx | 2 +- src/ui/features/goalmanager/GoalManager.tsx | 120 +++++++++++++++++++- src/ui/pages/Main/goals/GoalCard.tsx | 8 ++ 4 files changed, 128 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8b47f38..053bd84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6612,6 +6612,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/ui/components/EmojiPicker.tsx b/src/ui/components/EmojiPicker.tsx index 00bb54d..5d6533b 100644 --- a/src/ui/components/EmojiPicker.tsx +++ b/src/ui/components/EmojiPicker.tsx @@ -17,4 +17,4 @@ export default function EmojiPicker(props: Props) { color="primary" /> ) -} +} \ No newline at end of file diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..43d5951 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -1,5 +1,6 @@ import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' -import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons' +import { faDollarSign, faSmile, IconDefinition, faSadCry } from '@fortawesome/free-solid-svg-icons' +import { faPlus } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date' import 'date-fns' @@ -11,6 +12,19 @@ import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/go import { useAppDispatch, useAppSelector } from '../../../store/hooks' import DatePicker from '../../components/DatePicker' import { Theme } from '../../components/Theme' +import EmojiPicker from '../../components/EmojiPicker' +import { BaseEmoji } from 'emoji-mart' +import AddIconButton from './AddIconButton' +import { TransparentButton } from '../../components/TransparentButton' +import { add } from 'date-fns' +import GoalIcon from './GoalIcon' + + + + + + + type Props = { goal: Goal } export function GoalManager(props: Props) { @@ -21,7 +35,10 @@ 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) @@ -75,9 +92,51 @@ export function GoalManager(props: Props) { } } + const pickEmojiOnClick = (emoji: BaseEmoji, event: React.MouseEvent) => { + //stop event propagation + event.stopPropagation(); + + //set the icon locally + const selectedIcon = emoji.native; + setIcon(selectedIcon); + + //Close the emoji picker + setEmojiPickerIsOpen(false); + + //Update the goal + const updatedGoal = { + ...goal, + icon: selectedIcon + } + //Update redux store + dispatch(updateGoalRedux(updatedGoal)); + + //Update the database + updateGoalApi(props.goal.id, updatedGoal) + } + + const hasIcon = () => goal.icon != null; + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation(); + setEmojiPickerIsOpen(!emojiPickerIsOpen); + } + const closeEmojiPicker = () => { + if (emojiPickerIsOpen) { + setEmojiPickerIsOpen(false) + } + } + + + return ( - + + + + + + @@ -106,6 +165,39 @@ export function GoalManager(props: Props) { {new Date(props.goal.created).toLocaleDateString()} + + + {/* + This is the popup used to pick a new emoji + */} + event.stopPropagation()} + > + + + + { + /* + This is the selected emoji field + */ + } + + + + {goal.icon ? ( + + ): ( + + )} + + + + + + + ) } @@ -122,6 +214,30 @@ const Field = (props: FieldProps) => ( ) +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; +` + +const AddIconButtonContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + width: 100%; +` + +const GoalIconContainer = styled.div` + display:flex; + justify-content: flex-start; + align-items: flex-start + height: 100%; + width: 100%; +` + const GoalManagerContainer = styled.div` display: flex; flex-direction: column; diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..bf63aa0 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -9,8 +9,14 @@ import { } from '../../../../store/modalSlice' import { Card } from '../../../components/Card' + + type Props = { id: string } +const Icon = styled.h1` + font-size: 5.5rem; +` + export default function GoalCard(props: Props) { const dispatch = useAppDispatch() @@ -29,6 +35,8 @@ export default function GoalCard(props: Props) { ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} + {goal.icon} + Hi, this is the goal! ) } From 66f13b9a23f71f0a0ac0bb346ad8f6367b969c52 Mon Sep 17 00:00:00 2001 From: skai0008 Date: Fri, 25 Jul 2025 00:48:44 +1000 Subject: [PATCH 3/3] update: add useEffect to update goal icon --- src/ui/features/goalmanager/GoalManager.tsx | 4 + task2/task2Response.cs | 300 ++++++++++++++++++++ 2 files changed, 304 insertions(+) create mode 100644 task2/task2Response.cs diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 43d5951..a251516 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -54,6 +54,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) diff --git a/task2/task2Response.cs b/task2/task2Response.cs new file mode 100644 index 0000000..43d5951 --- /dev/null +++ b/task2/task2Response.cs @@ -0,0 +1,300 @@ +import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons' +import { faDollarSign, faSmile, IconDefinition, faSadCry } from '@fortawesome/free-solid-svg-icons' +import { faPlus } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date' +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 { useAppDispatch, useAppSelector } from '../../../store/hooks' +import DatePicker from '../../components/DatePicker' +import { Theme } from '../../components/Theme' +import EmojiPicker from '../../components/EmojiPicker' +import { BaseEmoji } from 'emoji-mart' +import AddIconButton from './AddIconButton' +import { TransparentButton } from '../../components/TransparentButton' +import { add } from 'date-fns' +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) + setTargetDate(props.goal.targetDate) + setTargetAmount(props.goal.targetAmount) + }, [ + props.goal.id, + props.goal.name, + props.goal.targetDate, + props.goal.targetAmount, + ]) + + useEffect(() => { + setName(goal.name) + }, [goal.name]) + + 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 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) + } + + 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) + } + } + + const pickEmojiOnClick = (emoji: BaseEmoji, event: React.MouseEvent) => { + //stop event propagation + event.stopPropagation(); + + //set the icon locally + const selectedIcon = emoji.native; + setIcon(selectedIcon); + + //Close the emoji picker + setEmojiPickerIsOpen(false); + + //Update the goal + const updatedGoal = { + ...goal, + icon: selectedIcon + } + //Update redux store + dispatch(updateGoalRedux(updatedGoal)); + + //Update the database + updateGoalApi(props.goal.id, updatedGoal) + } + + const hasIcon = () => goal.icon != null; + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation(); + setEmojiPickerIsOpen(!emojiPickerIsOpen); + } + const closeEmojiPicker = () => { + if (emojiPickerIsOpen) { + setEmojiPickerIsOpen(false) + } + } + + + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + {props.goal.balance} + + + + + + + {new Date(props.goal.created).toLocaleDateString()} + + + + + {/* + This is the popup used to pick a new emoji + */} + event.stopPropagation()} + > + + + + { + /* + This is the selected emoji field + */ + } + + + + {goal.icon ? ( + + ): ( + + )} + + + + + + + + + ) +} + +type FieldProps = { name: string; icon: IconDefinition } +type AddIconButtonContainerProps = { shouldShow: boolean } +type GoalIconContainerProps = { shouldShow: boolean } +type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } + +const Field = (props: FieldProps) => ( + + + {props.name} + +) + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; +` + +const AddIconButtonContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + width: 100%; +` + +const GoalIconContainer = styled.div` + display:flex; + justify-content: flex-start; + align-items: flex-start + height: 100%; + width: 100%; +` + +const GoalManagerContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + width: 100%; + position: relative; +` + +const Group = styled.div` + display: flex; + flex-direction: row; + width: 100%; + margin-top: 1.25rem; + margin-bottom: 1.25rem; +` +const NameInput = styled.input` + display: flex; + background-color: transparent; + outline: none; + border: none; + font-size: 4rem; + font-weight: bold; + color: ${({ theme }: { theme: Theme }) => theme.text}; +` + +const FieldName = styled.h1` + font-size: 1.8rem; + margin-left: 1rem; + color: rgba(174, 174, 174, 1); + font-weight: normal; +` +const FieldContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + width: 20rem; + + svg { + 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; + outline: none; + border: none; + font-size: 1.8rem; + font-weight: bold; + color: ${({ theme }: { theme: Theme }) => theme.text}; +` + +const Value = styled.div` + margin-left: 2rem; +`