From 5fe39e20beb042a4a4afc2c1a183885c36896e03 Mon Sep 17 00:00:00 2001 From: arjunpv2 Date: Wed, 24 Jun 2026 09:54:51 +0530 Subject: [PATCH] Add goal icon selection and emoji picker support --- package-lock.json | 1 + src/api/types.ts | 1 + src/store/goalsSlice.ts | 11 +++- src/ui/features/goalmanager/GoalManager.tsx | 62 ++++++++++++++++++- src/ui/pages/Main/goals/GoalCard.tsx | 13 ++-- src/ui/pages/Main/goals/GoalsSection.tsx | 5 +- .../Main/transactions/TransactionItem.tsx | 28 ++++----- 7 files changed, 97 insertions(+), 24 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/store/goalsSlice.ts b/src/store/goalsSlice.ts index 1ed0276..015ee32 100644 --- a/src/store/goalsSlice.ts +++ b/src/store/goalsSlice.ts @@ -20,10 +20,17 @@ export const goalsSlice = createSlice({ name: 'goal', initialState, reducers: { - createGoal: (state, action: PayloadAction) => { + /*createGoal: (state, action: PayloadAction) => { state.map[action.payload.id] = action.payload state.list.push(action.payload.id) - }, + },*/ + createGoal: (state, action: PayloadAction) => { + if (!state.map[action.payload.id]) { + state.map[action.payload.id] = action.payload + state.list.push(action.payload.id) + } +}, + updateGoal: (state, action: PayloadAction) => { state.map[action.payload.id] = action.payload diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..df2399e 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -11,7 +11,9 @@ 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 AddIconButton from './AddIconButton' +import GoalIcon from './GoalIcon' type Props = { goal: Goal } export function GoalManager(props: Props) { const dispatch = useAppDispatch() @@ -21,6 +23,8 @@ 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) @@ -32,6 +36,9 @@ export function GoalManager(props: Props) { props.goal.targetDate, props.goal.targetAmount, ]) + useEffect(() => { + setIcon(props.goal.icon) +}, [props.goal.id, props.goal.icon]) useEffect(() => { setName(goal.name) @@ -74,11 +81,51 @@ export function GoalManager(props: Props) { updateGoalApi(props.goal.id, updatedGoal) } } + const hasIcon = () => icon != null + +const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) +} + const pickEmojiOnClick = (emoji: any, 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)) + + // TODO(TASK-3) Update database +} return ( + event.stopPropagation()} +> + + - + + + + @@ -107,11 +154,11 @@ 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 } @@ -182,3 +229,12 @@ const StringInput = styled.input` const Value = styled.div` margin-left: 2rem; ` +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; +` diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..e58fa6b 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -24,12 +24,14 @@ export default function GoalCard(props: Props) { } const asLocaleDateString = (date: Date) => new Date(date).toLocaleDateString() - +//console.log("GoalCard", props.id, goal) return ( - ${goal.targetAmount} - {asLocaleDateString(goal.targetDate)} - + {goal.icon} + + ${goal.targetAmount} + {asLocaleDateString(goal.targetDate)} + ) } @@ -46,6 +48,9 @@ const Container = styled(Card)` align-items: center; ` +const Icon = styled.h1` + font-size: 5.5rem; +` const TargetAmount = styled.h2` font-size: 2rem; ` diff --git a/src/ui/pages/Main/goals/GoalsSection.tsx b/src/ui/pages/Main/goals/GoalsSection.tsx index ab871b3..36abfcb 100644 --- a/src/ui/pages/Main/goals/GoalsSection.tsx +++ b/src/ui/pages/Main/goals/GoalsSection.tsx @@ -17,10 +17,13 @@ import GoalsContent from './GoalsContent' export default function GoalsSection() { const dispatch = useAppDispatch() const goalIds = useAppSelector(selectGoalsList) - + //console.log("Goal IDs count:", goalIds.length) + console.log("Goal IDs count:", goalIds.length) useEffect(() => { + console.log("FETCH EFFECT RAN") async function fetch() { const goals = await getGoals() + //console.log("GOALS FROM API:", goals?.length) goals?.forEach((goal) => dispatch(createGoalRedux(goal))) } fetch() diff --git a/src/ui/pages/Main/transactions/TransactionItem.tsx b/src/ui/pages/Main/transactions/TransactionItem.tsx index f8d4cb3..d3ff84c 100644 --- a/src/ui/pages/Main/transactions/TransactionItem.tsx +++ b/src/ui/pages/Main/transactions/TransactionItem.tsx @@ -10,25 +10,25 @@ type Props = { transaction: Transaction } export function TransactionItem(props: Props) { const [tags, setTags] = useState(null) - useEffect(() => { - async function fetch(tagId: string): Promise { - const response = await axios.get(`${API_ROOT}/api/Tag/${tagId}`) - return response.data - } +useEffect(() => { + async function fetch(tagId: string): Promise { + const response = await axios.get(`${API_ROOT}/api/Tag/${tagId}`) + return response.data + } - async function fetchAll() { - const tags: Tag[] = [] - for (const tagId of props.transaction.tagIds) { - const tag = await fetch(tagId) - tags.push(tag) - } + async function fetchAll() { + const tags: Tag[] = [] - setTags(tags) + for (const tagId of props.transaction.tagIds) { + const tag = await fetch(tagId) + tags.push(tag) } - fetchAll() - }) + setTags(tags) + } + fetchAll() +}, [props.transaction.tagIds]) return (