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/types.ts b/src/api/types.ts index f75edad..710f0a9 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 { @@ -65,4 +66,4 @@ export enum ApplicationStatus { } export type ModalContent = Goal -export type ModalType = 'Goal' +export type ModalType = 'Goal' \ No newline at end of file diff --git a/src/ui/features/goalmanager/EmojiPicker.tsx b/src/ui/features/goalmanager/EmojiPicker.tsx new file mode 100644 index 0000000..852fa2c --- /dev/null +++ b/src/ui/features/goalmanager/EmojiPicker.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { BaseEmoji, Picker } from 'emoji-mart' +import 'emoji-mart/css/emoji-mart.css' + +import { useAppSelector } from '../../../store/hooks' +import { selectMode } from '../../../store/themeSlice' + +type Props = { + onClick: (emoji: BaseEmoji, event: React.MouseEvent) => void +} + +export default function EmojiPicker(props: Props) { + const theme = useAppSelector(selectMode) + + return +} \ No newline at end of file diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..e42c9d8 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -3,60 +3,87 @@ import { faDollarSign, 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' import { Goal } from '../../../api/types' -import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/goalsSlice' +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 { TransparentButton } from '../../components/TransparentButton' +import EmojiPicker from './EmojiPicker' +import GoalIcon from './GoalIcon' + +type Props = { + goal: Goal +} -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) + setIcon(props.goal.icon) }, [ props.goal.id, props.goal.name, props.goal.targetDate, props.goal.targetAmount, + props.goal.icon, ]) useEffect(() => { - setName(goal.name) - }, [goal.name]) + if (goal != null) { + setName(goal.name) + setIcon(goal.icon) + } + }, [goal]) const updateNameOnChange = (event: React.ChangeEvent) => { const nextName = event.target.value setName(nextName) + const updatedGoal: Goal = { ...props.goal, name: nextName, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + icon: icon ?? props.goal.icon, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } - const updateTargetAmountOnChange = (event: React.ChangeEvent) => { + 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, + icon: icon ?? props.goal.icon, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } @@ -64,32 +91,86 @@ export function GoalManager(props: Props) { const pickDateOnChange = (date: MaterialUiPickersDate) => { if (date != null) { setTargetDate(date) + const updatedGoal: Goal = { ...props.goal, name: name ?? props.goal.name, - targetDate: date ?? props.goal.targetDate, + targetDate: date, targetAmount: targetAmount ?? props.goal.targetAmount, + icon: icon ?? props.goal.icon, } + dispatch(updateGoalRedux(updatedGoal)) updateGoalApi(props.goal.id, updatedGoal) } } + const hasIcon = () => icon != null + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + + const goalIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + + const pickEmojiOnClick = ( + emoji: BaseEmoji, + event: React.MouseEvent + ) => { + event.stopPropagation() + setIcon(emoji.native) + setEmojiPickerIsOpen(false) + + const updatedGoal: Goal = { + ...props.goal, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + icon: emoji.native, + } + + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) + } + return ( + + Add icon + + + + + + + event.stopPropagation()} + > + + + - + - + - + - + @@ -101,23 +182,38 @@ export function GoalManager(props: Props) { - + - {new Date(props.goal.created).toLocaleDateString()} + + {new Date(props.goal.created).toLocaleDateString()} + ) } -type FieldProps = { name: string; icon: IconDefinition } -type AddIconButtonContainerProps = { shouldShow: boolean } -type GoalIconContainerProps = { shouldShow: boolean } -type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } +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} ) @@ -127,25 +223,55 @@ const GoalManagerContainer = styled.div` flex-direction: column; justify-content: flex-start; align-items: flex-start; + height: 100%; width: 100%; position: relative; ` +const AddIconButtonContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; + margin-bottom: 1rem; + + button { + color: rgba(174, 0, 65, 1); + font-size: 1.5rem; + font-weight: bold; + } +` + +const GoalIconContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; + margin-bottom: 1rem; +` + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '8rem' : '3rem')}; + left: 0; + z-index: 10; +` + 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}; ` @@ -155,30 +281,37 @@ const FieldName = styled.h1` 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; -` +` \ 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..9a49c2d 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -1,19 +1,21 @@ import React from 'react' import styled from 'styled-components' + import { selectGoalsMap } from '../../../../store/goalsSlice' 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' -type Props = { id: string } +type Props = { + id: string +} export default function GoalCard(props: Props) { const dispatch = useAppDispatch() - const goal = useAppSelector(selectGoalsMap)[props.id] const onClick = (event: React.MouseEvent) => { @@ -26,9 +28,10 @@ export default function GoalCard(props: Props) { const asLocaleDateString = (date: Date) => new Date(date).toLocaleDateString() return ( - + ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} + {goal.icon} ) } @@ -43,9 +46,9 @@ const Container = styled(Card)` margin-left: 2rem; margin-right: 2rem; border-radius: 2rem; - align-items: center; ` + const TargetAmount = styled.h2` font-size: 2rem; ` @@ -54,3 +57,8 @@ const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; ` + +const Icon = styled.h1` + font-size: 5.5rem; + margin: 0; +` \ No newline at end of file