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..a2b0f5c 100644 --- a/src/api/lib.ts +++ b/src/api/lib.ts @@ -2,8 +2,7 @@ import axios from 'axios' import { user } from '../data/user' import { Goal, Transaction, User } from './types' -export const API_ROOT = 'https://fencer-commbank.azurewebsites.net' - +export const API_ROOT = 'http://localhost:5203' export async function getUser(): Promise { try { const response = await axios.get(`${API_ROOT}/api/User/${user.id}`) diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..5beff48 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -20,6 +20,7 @@ export interface Application { export interface Goal { id: string name: string + icon?: string targetAmount: number balance: number targetDate: Date diff --git a/src/ui/components/EmojiPicker.tsx b/src/ui/components/EmojiPicker.tsx index 00bb54d..58ba649 100644 --- a/src/ui/components/EmojiPicker.tsx +++ b/src/ui/components/EmojiPicker.tsx @@ -3,6 +3,7 @@ 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) { diff --git a/src/ui/features/goalmanager/GoalIcon.tsx b/src/ui/features/goalmanager/GoalIcon.tsx index b5a0d75..b10a77f 100644 --- a/src/ui/features/goalmanager/GoalIcon.tsx +++ b/src/ui/features/goalmanager/GoalIcon.tsx @@ -8,7 +8,7 @@ type Props = { icon: string | null; onClick: (e: React.MouseEvent) => void } export default function GoalIcon(props: Props) { return ( - {props.icon} + {props.icon ?? "🎯"} ) } diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..c8df43b 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -11,11 +11,30 @@ 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' type Props = { goal: Goal } export function GoalManager(props: Props) { const dispatch = useAppDispatch() + const [icon, setIcon] = useState(props.goal.icon ?? null) + const [showPicker, setShowPicker] = useState(false) + + const handleEmojiClick = (emoji: any, event: React.MouseEvent) => { + const selectedEmoji = emoji.native + + setIcon(selectedEmoji) + setShowPicker(false) + + const updatedGoal: Goal = { + ...props.goal, + icon: selectedEmoji, + } + + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) + } + const goal = useAppSelector(selectGoalsMap)[props.goal.id] const [name, setName] = useState(null) @@ -77,6 +96,19 @@ export function GoalManager(props: Props) { return ( + + + + {showPicker && ( + + )} + {icon && ( +
+ {icon} +
+ )} diff --git a/src/ui/features/goalmanager/GoalManager.zip b/src/ui/features/goalmanager/GoalManager.zip new file mode 100644 index 0000000..209eab5 Binary files /dev/null and b/src/ui/features/goalmanager/GoalManager.zip differ