From 6b8be0d2a01659eb4efad0fbeefa04a7823aa7bc Mon Sep 17 00:00:00 2001 From: Mayank Parashar Date: Wed, 17 Jun 2026 15:16:38 +0530 Subject: [PATCH] Added interactive emoji picker and updated Goal model --- package-lock.json | 17 +++-- package.json | 5 +- src/api/lib.ts | 9 +-- src/api/types.ts | 1 + src/ui/features/goalmanager/GoalManager.tsx | 84 +++++++++++++++++---- src/ui/pages/Main/goals/GoalCard.tsx | 20 ++++- 6 files changed, 103 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 240aecf..cbf52f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "@reduxjs/toolkit": "^1.5.1", - "@types/emoji-mart": "^3.0.5", "@types/node": "^17.0.41", "@types/react": "^16.9.0", "@types/react-redux": "^7.1.7", @@ -35,7 +34,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/emoji-mart": "^3.0.9", + "@types/emoji-mart": "^3.0.14", "@types/react-dom": "^18.0.5", "@types/styled-components": "^5.1.25" } @@ -3699,10 +3698,11 @@ } }, "node_modules/@types/emoji-mart": { - "version": "3.0.9", - "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.9.tgz", - "integrity": "sha512-qdBo/2Y8MXaJ/2spKjDZocuq79GpnOhkwMHnK2GnVFa8WYFgfA+ei6sil3aeWQPCreOKIx9ogPpR5+7MaOqYAA==", + "version": "3.0.14", + "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.14.tgz", + "integrity": "sha512-/vMkVnet466bK37ugf2jry9ldCZklFPXYMB2m+qNo3vkP2I7L0cvtNFPKAjfcHgPg9Z8pbYqVqZn7AgsC0qf+g==", "dev": true, + "license": "MIT", "dependencies": { "@types/react": "*" } @@ -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" @@ -19308,9 +19309,9 @@ } }, "@types/emoji-mart": { - "version": "3.0.9", - "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.9.tgz", - "integrity": "sha512-qdBo/2Y8MXaJ/2spKjDZocuq79GpnOhkwMHnK2GnVFa8WYFgfA+ei6sil3aeWQPCreOKIx9ogPpR5+7MaOqYAA==", + "version": "3.0.14", + "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.14.tgz", + "integrity": "sha512-/vMkVnet466bK37ugf2jry9ldCZklFPXYMB2m+qNo3vkP2I7L0cvtNFPKAjfcHgPg9Z8pbYqVqZn7AgsC0qf+g==", "dev": true, "requires": { "@types/react": "*" diff --git a/package.json b/package.json index 87958ce..9291828 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "@reduxjs/toolkit": "^1.5.1", - "@types/emoji-mart": "^3.0.5", "@types/node": "^17.0.41", "@types/react": "^16.9.0", "@types/react-redux": "^7.1.7", @@ -55,8 +54,8 @@ ] }, "devDependencies": { - "@types/emoji-mart": "^3.0.9", + "@types/emoji-mart": "^3.0.14", "@types/react-dom": "^18.0.5", "@types/styled-components": "^5.1.25" } -} \ No newline at end of file +} diff --git a/src/api/lib.ts b/src/api/lib.ts index 3c593ca..fa204a9 100644 --- a/src/api/lib.ts +++ b/src/api/lib.ts @@ -43,11 +43,10 @@ export async function createGoal(): Promise { } } -export async function updateGoal(goalId: string, updatedGoal: Goal): Promise { +export async function updateGoal(id: string, goal: Goal): Promise { try { - await axios.put(`${API_ROOT}/api/Goal/${goalId}`, updatedGoal) - return true + await axios.put(`${API_ROOT}/api/Goal/${id}`, goal) } catch (error: any) { - return false + console.error("Failed to update goal:", error) } -} +} \ No newline at end of file diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..1a066d1 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; // <--- You are adding this line } export interface Tag { diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..c1ec900 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -12,30 +12,38 @@ import { useAppDispatch, useAppSelector } from '../../../store/hooks' import DatePicker from '../../components/DatePicker' import { Theme } from '../../components/Theme' +// Import the Emoji Picker components +import { Picker } from 'emoji-mart' +// @ts-ignore - This prevents the TypeScript warning for the CSS file +import 'emoji-mart/css/emoji-mart.css' + type Props = { goal: Goal } + export function GoalManager(props: Props) { const dispatch = useAppDispatch() - const goal = useAppSelector(selectGoalsMap)[props.goal.id] + const goalsMap = useAppSelector(selectGoalsMap) + const goal = goalsMap[props.goal.id] const [name, setName] = useState(null) const [targetDate, setTargetDate] = useState(null) const [targetAmount, setTargetAmount] = useState(null) + + // State to control if the emoji picker is visible + const [showEmojiPicker, setShowEmojiPicker] = useState(false) useEffect(() => { + // Safety check in case the goal isn't loaded yet + if (!props.goal) return; setName(props.goal.name) setTargetDate(props.goal.targetDate) setTargetAmount(props.goal.targetAmount) - }, [ - props.goal.id, - props.goal.name, - props.goal.targetDate, - props.goal.targetAmount, - ]) + }, [props.goal]) useEffect(() => { + if (!goal) return; setName(goal.name) - }, [goal.name]) + }, [goal]) const updateNameOnChange = (event: React.ChangeEvent) => { const nextName = event.target.value @@ -67,7 +75,7 @@ export function GoalManager(props: Props) { const updatedGoal: Goal = { ...props.goal, name: name ?? props.goal.name, - targetDate: date ?? props.goal.targetDate, + targetDate: date, targetAmount: targetAmount ?? props.goal.targetAmount, } dispatch(updateGoalRedux(updatedGoal)) @@ -75,10 +83,39 @@ export function GoalManager(props: Props) { } } + // Function to handle when an emoji is clicked + const updateIcon = (emoji: any) => { + const updatedGoal: Goal = { + ...props.goal, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + icon: emoji.native, // Save the selected emoji + } + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) + setShowEmojiPicker(false) // Close the picker after selection + } + + // If goal data is missing, don't crash + if (!goal) return null; + return ( + {/* NEW SECTION: The Emoji Picker Button */} + + setShowEmojiPicker(!showEmojiPicker)}> + {goal.icon ? goal.icon : '😀 Select Icon'} + + {showEmojiPicker && ( +
+ +
+ )} + + @@ -110,12 +147,24 @@ export function GoalManager(props: Props) { ) } -type FieldProps = { name: string; icon: IconDefinition } -type AddIconButtonContainerProps = { shouldShow: boolean } -type GoalIconContainerProps = { shouldShow: boolean } -type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } +// --- STYLED COMPONENTS --- + +const EmojiButton = styled.button` + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: white; + padding: 10px 15px; + border-radius: 8px; + font-size: 1.2rem; + cursor: pointer; + transition: background-color 0.2s; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } +` -const Field = (props: FieldProps) => ( +const Field = (props: { name: string; icon: IconDefinition }) => ( {props.name} @@ -138,7 +187,9 @@ const Group = styled.div` width: 100%; margin-top: 1.25rem; margin-bottom: 1.25rem; + position: relative; ` + const NameInput = styled.input` display: flex; background-color: transparent; @@ -155,6 +206,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 +217,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 +235,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..7631f43 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -16,6 +16,10 @@ export default function GoalCard(props: Props) { const goal = useAppSelector(selectGoalsMap)[props.id] + // THIS FIXES THE BLANK DASHBOARD CRASH: + // If the goal hasn't loaded yet, don't try to draw the card + if (!goal) return null; + const onClick = (event: React.MouseEvent) => { event.stopPropagation() dispatch(setContentRedux(goal)) @@ -27,6 +31,9 @@ export default function GoalCard(props: Props) { return ( + {/* THIS IS YOUR NEW ICON DISPLAY */} + {goal.icon ? goal.icon : '🎯'} + ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} @@ -36,6 +43,7 @@ export default function GoalCard(props: Props) { const Container = styled(Card)` display: flex; flex-direction: column; + justify-content: center; min-height: 140px; min-width: 140px; width: 33%; @@ -43,14 +51,22 @@ const Container = styled(Card)` margin-left: 2rem; margin-right: 2rem; border-radius: 2rem; - align-items: center; ` + +// NEW STYLING FOR YOUR EMOJI +const GoalIcon = styled.div` + font-size: 3.5rem; + margin-bottom: 0.5rem; +` + const TargetAmount = styled.h2` font-size: 2rem; + margin: 0; ` const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; -` + margin-top: 0.5rem; +`