diff --git a/package-lock.json b/package-lock.json index 240aecf..dd29c63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,8 @@ "dependencies": { "@date-io/date-fns": "^1.3.13", "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.1.18", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.1.19", "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "@reduxjs/toolkit": "^1.5.1", @@ -2252,21 +2252,28 @@ } }, "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", - "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", - "hasInstallScript": true, + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.1.1" + "@fortawesome/fontawesome-common-types": "6.6.0" }, "engines": { "node": ">=6" } }, + "node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/react-fontawesome": { - "version": "0.1.18", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz", - "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==", + "version": "0.1.19", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz", + "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==", "dependencies": { "prop-types": "^15.8.1" }, @@ -18310,17 +18317,24 @@ } }, "@fortawesome/free-solid-svg-icons": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", - "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", "requires": { - "@fortawesome/fontawesome-common-types": "6.1.1" + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==" + } } }, "@fortawesome/react-fontawesome": { - "version": "0.1.18", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz", - "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==", + "version": "0.1.19", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz", + "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==", "requires": { "prop-types": "^15.8.1" } diff --git a/package.json b/package.json index 87958ce..559708d 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "dependencies": { "@date-io/date-fns": "^1.3.13", "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.1.18", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.1.19", "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "@reduxjs/toolkit": "^1.5.1", @@ -59,4 +59,4 @@ "@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..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/ui/components/AddIconButtonStyles.tsx b/src/ui/components/AddIconButtonStyles.tsx new file mode 100644 index 0000000..4badfc1 --- /dev/null +++ b/src/ui/components/AddIconButtonStyles.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +export const AddIconButtonContainer = styled.div<{ hasIcon: boolean }>` + display: ${(props) => (props.hasIcon ? 'none' : 'flex')}; + align-items: center; + justify-content: center; +`; + +export const AddIconButtonText = styled.span` + margin-left: 8px; + font-size: 16px; + color: #333; +`; \ No newline at end of file diff --git a/src/ui/components/EmojiPicker.tsx b/src/ui/components/EmojiPicker.tsx index 00bb54d..2d0187a 100644 --- a/src/ui/components/EmojiPicker.tsx +++ b/src/ui/components/EmojiPicker.tsx @@ -18,3 +18,19 @@ export default function EmojiPicker(props: Props) { /> ) } + +/*const EmojiPickerWrapper: React.FC = ({ onClick }) => { + const theme = useAppSelector(selectMode); + + return ( + + ); +}; + +export default EmojiPickerWrapper;*/ \ No newline at end of file diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..bf24c29 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -11,9 +11,68 @@ 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 { BaseEmoji, Picker } from 'emoji-mart' +import EmojiPicker from '../../components/EmojiPicker' +import {TransparentButton} from '../../components/TransparentButton' +import GoalIcon from './GoalIcon' +import {AddIconButtonContainer, AddIconButtonText} from '../../components/AddIconButtonStyles' +import { faSmile } from '@fortawesome/free-solid-svg-icons'; + type Props = { goal: Goal } + +type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean }// + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; +`// + export function GoalManager(props: Props) { + + const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false) + + const [icon, setIcon] = useState(null) + + useEffect(() => { + setIcon(props.goal.icon) + }, [props.goal.id, props.goal.icon]) + + const hasIcon = () => goal.icon != null + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + + const pickEmojiOnClick = (emoji: BaseEmoji, event: React.MouseEvent) => { + // TODO(TASK-2) Stop event propogation + // TODO(TASK-2) Set icon locally + // TODO(TASK-2) Close emoji picker + // TODO(TASK-2) Create updated goal locally + // TODO(TASK-2) Update Redux store + + 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 + } + // + const dispatch = useAppDispatch() const goal = useAppSelector(selectGoalsMap)[props.goal.id] @@ -75,6 +134,7 @@ export function GoalManager(props: Props) { } } + return ( @@ -106,14 +166,46 @@ export function GoalManager(props: Props) { {new Date(props.goal.created).toLocaleDateString()} + + + event.stopPropagation()} + > + + + + + + + + + Add icon + + + + + + + + + + + + ) } type FieldProps = { name: string; icon: IconDefinition } type AddIconButtonContainerProps = { shouldShow: boolean } type GoalIconContainerProps = { shouldShow: boolean } -type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } +const GoalIconContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; +` + + const Field = (props: FieldProps) => ( diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..a6fc7b4 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -25,10 +25,13 @@ export default function GoalCard(props: Props) { const asLocaleDateString = (date: Date) => new Date(date).toLocaleDateString() + const Icon = styled.h1`font-size: 5.5rem;` + return ( ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} + {goal.icon} ) }