From e863c151587c87858dbb624ddd2c87f7b8d0d994 Mon Sep 17 00:00:00 2001 From: mighT77 <142781273+mighT77@users.noreply.github.com> Date: Mon, 22 Jul 2024 21:31:26 +0800 Subject: [PATCH 1/5] Update goal model w/new icon --- src/api/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..8993f7f 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -18,6 +18,7 @@ export interface Application { } export interface Goal { + icon: string | null id: string name: string targetAmount: number From d17626be814517842aed6a92b8514e2b212397d3 Mon Sep 17 00:00:00 2001 From: mighT77 <142781273+mighT77@users.noreply.github.com> Date: Mon, 22 Jul 2024 21:42:48 +0800 Subject: [PATCH 2/5] Update goalcard --- src/ui/pages/Main/goals/GoalCard.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..dfa2fe5 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -8,6 +8,7 @@ import { setType as setTypeRedux } from '../../../../store/modalSlice' import { Card } from '../../../components/Card' +import { Icon } from '@material-ui/core' type Props = { id: string } @@ -29,6 +30,7 @@ export default function GoalCard(props: Props) { ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} + {goal.icon} ) } From ab3230bb5ab5c914739edf366276ed6f5e1c46d4 Mon Sep 17 00:00:00 2001 From: mighT77 <142781273+mighT77@users.noreply.github.com> Date: Tue, 23 Jul 2024 14:51:55 +0800 Subject: [PATCH 3/5] Implement frontend support for icons --- src/api/lib.ts | 9 +++ src/ui/features/goalmanager/GoalManager.tsx | 68 ++++++++++++++++++++- src/ui/pages/Main/goals/GoalCard.tsx | 9 ++- 3 files changed, 81 insertions(+), 5 deletions(-) diff --git a/src/api/lib.ts b/src/api/lib.ts index 3c593ca..5fcecbc 100644 --- a/src/api/lib.ts +++ b/src/api/lib.ts @@ -51,3 +51,12 @@ export async function updateGoal(goalId: string, updatedGoal: Goal): Promise { + try { + await axios.put(`${API_ROOT}/api/Goal/${goalId}`, { icon }) + return true + } catch (error: any) { + return false + } +} \ No newline at end of file diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..aab9ac4 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -5,12 +5,16 @@ 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 { updateGoal as updateGoalApi, updateGoalIcon as updateGoalIconApi } 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 for emojipicker +import { BaseEmoji } from 'emoji-mart' // Import for BaseEmoji + + type Props = { goal: Goal } export function GoalManager(props: Props) { @@ -21,16 +25,21 @@ 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) // state for icon + const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false) // state for emoji picker useEffect(() => { setName(props.goal.name) setTargetDate(props.goal.targetDate) setTargetAmount(props.goal.targetAmount) + setIcon(props.goal.icon) // Initialize icon state }, [ props.goal.id, props.goal.name, props.goal.targetDate, props.goal.targetAmount, + props.goal.icon, + ]) useEffect(() => { @@ -75,6 +84,27 @@ export function GoalManager(props: Props) { } } + const pickEmojiOnClick = (emoji: BaseEmoji, event: React.MouseEvent) => { + event.stopPropagation() // Stop event propagation + + setIcon(emoji.native) // Set icon locally + setEmojiPickerIsOpen(false) // Close emoji picker + + const updatedGoal: Goal = { + ...props.goal, + icon: emoji.native ?? props.goal.icon, // Update icon in goal + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + } + + dispatch(updateGoalRedux(updatedGoal)) // Update Redux store + + updateGoalIconApi(props.goal.id, emoji.native) // Update icon in database + } + + const hasIcon = () => icon != null + return ( @@ -106,6 +136,24 @@ export function GoalManager(props: Props) { {new Date(props.goal.created).toLocaleDateString()} + + + + + setEmojiPickerIsOpen(!emojiPickerIsOpen)}> + {icon ? {icon} : } + + + + + event.stopPropagation()} + > + + + ) } @@ -181,4 +229,20 @@ const StringInput = styled.input` const Value = styled.div` margin-left: 2rem; + ` + const IconDisplay = styled.div` + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + span { + font-size: 2rem; + } +` + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; ` diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index dfa2fe5..a76b341 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -5,13 +5,17 @@ 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' import { Icon } from '@material-ui/core' type Props = { id: string } +const icon = styled.h1` + font-size: 5.5rem; +` + export default function GoalCard(props: Props) { const dispatch = useAppDispatch() @@ -30,8 +34,7 @@ export default function GoalCard(props: Props) { ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} - {goal.icon} - + {goal.icon} {/* Added icon display */} ) } From 7c1584ae8515a8919ac4f8d7b8ebefce018e6bdd Mon Sep 17 00:00:00 2001 From: mighT77 <142781273+mighT77@users.noreply.github.com> Date: Fri, 6 Sep 2024 22:11:09 +0800 Subject: [PATCH 4/5] Update lib.ts Export functions/Updating Goal Icon --- src/api/lib.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/api/lib.ts b/src/api/lib.ts index 5fcecbc..16f921f 100644 --- a/src/api/lib.ts +++ b/src/api/lib.ts @@ -2,6 +2,7 @@ import axios from 'axios' import { user } from '../data/user' import { Goal, Transaction, User } from './types' +//Export necessary functions export const API_ROOT = 'https://fencer-commbank.azurewebsites.net' export async function getUser(): Promise { @@ -52,6 +53,7 @@ export async function updateGoal(goalId: string, updatedGoal: Goal): Promise { try { await axios.put(`${API_ROOT}/api/Goal/${goalId}`, { icon }) @@ -59,4 +61,4 @@ export async function updateGoalIcon(goalId: string, icon: string): Promise Date: Fri, 6 Sep 2024 22:12:01 +0800 Subject: [PATCH 5/5] Update types.ts Interface integration --- src/api/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/types.ts b/src/api/types.ts index 8993f7f..9e49a5e 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -1,3 +1,4 @@ +//Support for various necessary interfaces export interface Account { id: string number: number