From 4701f8bb6488a13f15f4de695ac5101b2f2804ac Mon Sep 17 00:00:00 2001 From: Ramir Mesquita Date: Fri, 8 Jul 2022 14:20:27 -0300 Subject: [PATCH 1/7] Adding react-toastify dependency --- package-lock.json | 34 ++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 3 +++ 3 files changed, 38 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4889917..5415f0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-router-dom": "6.3.0", "react-scripts": "5.0.1", "react-spinners": "0.12.0", + "react-toastify": "^9.0.5", "recharts": "2.1.10", "sweetalert2": "11.4.17", "typescript": "4.7.3", @@ -5942,6 +5943,14 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -13896,6 +13905,18 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-toastify": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.5.tgz", + "integrity": "sha512-dszPCeQINY+Nm6HmsiAXT/7wsazPqv0S/RuhIYLAW+fTKcd3T1iRjZG0XqrN9nvAzqaE5J6uxMaiBrOevxjY8g==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", @@ -21062,6 +21083,11 @@ "wrap-ansi": "^7.0.0" } }, + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -26717,6 +26743,14 @@ "@emotion/react": "^11.4.1" } }, + "react-toastify": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.5.tgz", + "integrity": "sha512-dszPCeQINY+Nm6HmsiAXT/7wsazPqv0S/RuhIYLAW+fTKcd3T1iRjZG0XqrN9nvAzqaE5J6uxMaiBrOevxjY8g==", + "requires": { + "clsx": "^1.1.1" + } + }, "react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", diff --git a/package.json b/package.json index 59ab7cc..43d3718 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-router-dom": "6.3.0", "react-scripts": "5.0.1", "react-spinners": "0.12.0", + "react-toastify": "^9.0.5", "recharts": "2.1.10", "sweetalert2": "11.4.17", "typescript": "4.7.3", diff --git a/src/App.tsx b/src/App.tsx index 3bfc6b7..97d54fb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,8 @@ import LeaderboardRanksPage from "./pages/LeaderboardRanksPage"; // import { UnauthorizedPage } from "./pages/UnauthorizedPage"; import { ProtectedRoute } from "./ProtectedRoute"; import { AppMenu } from "./AppMenu"; +import { ToastContainer } from 'react-toastify'; + import 'react-toastify/dist/ReactToastify.css'; export const App = () => { // if (isDoingInitialLoading) { @@ -36,6 +38,7 @@ export const App = () => { return ( + Date: Fri, 8 Jul 2022 14:21:25 -0300 Subject: [PATCH 2/7] Setting editingFloor to null when the modal closes to prevent not loading when editing same floor twice --- src/pages/FloorsEditorPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/FloorsEditorPage.tsx b/src/pages/FloorsEditorPage.tsx index 9488488..0104883 100644 --- a/src/pages/FloorsEditorPage.tsx +++ b/src/pages/FloorsEditorPage.tsx @@ -136,6 +136,7 @@ const FloorsEditor = ({ enemies, towerGame, allEmoji, setShouldReload }: IFloorE const handleCloseEditFloorModalAction = (reload: boolean) => { setShowAddEnemyModal(false); setShouldReload(reload); + setEditingFloor(null); } return ( From 1f6447a15ff40c8422c35df7b74877ed7ef92b15 Mon Sep 17 00:00:00 2001 From: Ramir Mesquita Date: Fri, 8 Jul 2022 14:21:46 -0300 Subject: [PATCH 3/7] Adding toast messages on operations, small layout changes --- .../AddEnemyToFloorModal.tsx | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx b/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx index 0cec3b6..62bbdf8 100644 --- a/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx +++ b/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx @@ -1,6 +1,7 @@ import { groupBy } from "lodash"; import { useEffect, useState } from "react"; import { AiOutlineDelete } from "react-icons/ai"; +import { toast } from "react-toastify"; import { updateFloor } from "../../api/admin"; import { emojiToImageTag } from "../../helpers/emojiHelper"; import Button from "../Button"; @@ -24,17 +25,26 @@ const AddEnemyToFloorModal = ({ const [floorEnemies, setFloorEnemies] = useState([]); const handleOnSaveButtonClick = async () => { - const floorId = floor?.id; - const enemyIds = floorEnemies.map((enemy) => enemy.id) as number[]; - - if (!floorId || !enemyIds) { - return; + try{ + const floorId = floor?.id; + const enemyIds = floorEnemies.map((enemy) => enemy.id) as number[]; + + if (!floorId || !enemyIds) { + return; + } + await updateFloor(floorId, { + enemyIds, + }); + onClose(true); + setFloorEnemies([]); + toast('Floor edited successfuly.', { + type: 'success', + }); + } catch(err: any) { + toast(`Error adding enemies to floor. ${err?.message} `, { + type: 'error', + }) } - await updateFloor(floorId, { - enemyIds, - }); - onClose(true); - setFloorEnemies([]); }; const handleOnAddEnemyClick = @@ -62,7 +72,7 @@ const AddEnemyToFloorModal = ({ (floorEnemy) => floorEnemy._enemy ); setFloorEnemies(floorEnemies); - + console.log("🚀 ~ file: AddEnemyToFloorModal.tsx ~ line 65 ~ useEffect ~ floorEnemies", floorEnemies) } }, [floor?._floorEnemies]); @@ -75,8 +85,8 @@ const AddEnemyToFloorModal = ({ Edit Enemies on Floor {floor?.number} -
-
+
+

All enemies

@@ -98,7 +108,7 @@ const AddEnemyToFloorModal = ({ })}
-
+

Floor Enemies

@@ -118,7 +128,7 @@ const AddEnemyToFloorModal = ({ ))}
- setFloorEnemies([])}> + { floorEnemies && floorEnemies.length > 0 && setFloorEnemies([])}> }
From c10689ca52f5204d416ee1255a87dcf113d94162 Mon Sep 17 00:00:00 2001 From: Ramir Mesquita Date: Fri, 8 Jul 2022 14:45:02 -0300 Subject: [PATCH 4/7] Removing console call --- src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx b/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx index 62bbdf8..84e0473 100644 --- a/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx +++ b/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx @@ -72,7 +72,6 @@ const AddEnemyToFloorModal = ({ (floorEnemy) => floorEnemy._enemy ); setFloorEnemies(floorEnemies); - console.log("🚀 ~ file: AddEnemyToFloorModal.tsx ~ line 65 ~ useEffect ~ floorEnemies", floorEnemies) } }, [floor?._floorEnemies]); From 51c1c2e0b63c7601b9f146acc84e7f2dabab4443 Mon Sep 17 00:00:00 2001 From: Ramir Mesquita Date: Fri, 8 Jul 2022 16:12:28 -0300 Subject: [PATCH 5/7] Better look to enemies count :) --- src/helpers/emojiHelper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/emojiHelper.tsx b/src/helpers/emojiHelper.tsx index 1e9775d..95452a7 100644 --- a/src/helpers/emojiHelper.tsx +++ b/src/helpers/emojiHelper.tsx @@ -74,7 +74,7 @@ export const emojiToImageTag = ( src={emojiToImageSrc(emoji, allEmoji)} alt={emoji + " emoji"} /> - {qty && x{qty}} + {qty &&
{qty}
}
); }; From 9d8c0ca1b96e26437d84e8ea992fbb22081e6c3a Mon Sep 17 00:00:00 2001 From: Ramir Mesquita Date: Fri, 8 Jul 2022 16:16:38 -0300 Subject: [PATCH 6/7] Changing trash icon color --- src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx b/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx index 84e0473..ec31041 100644 --- a/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx +++ b/src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx @@ -127,7 +127,7 @@ const AddEnemyToFloorModal = ({ ))} - { floorEnemies && floorEnemies.length > 0 && setFloorEnemies([])}> } + {floorEnemies && floorEnemies.length > 0 && setFloorEnemies([])}>} From cabe7cd2625fcaa1d479038e9c3770904c7186e6 Mon Sep 17 00:00:00 2001 From: Ramir Mesquita Date: Fri, 8 Jul 2022 19:16:17 -0300 Subject: [PATCH 7/7] Adding toast messages to games pages and leaderboard/achievement modals --- src/pages/GameEditorPage.tsx | 10 +++++++ .../AddOrEditAchievementModal.tsx | 30 ++++++++++++------- .../AddOrEditLeaderboardModal.tsx | 29 ++++++++++++------ 3 files changed, 50 insertions(+), 19 deletions(-) diff --git a/src/pages/GameEditorPage.tsx b/src/pages/GameEditorPage.tsx index 165709a..9a5cd22 100644 --- a/src/pages/GameEditorPage.tsx +++ b/src/pages/GameEditorPage.tsx @@ -4,6 +4,7 @@ import { useParams, useNavigate } from "react-router-dom"; import { SyncLoader } from "react-spinners"; import * as Yup from "yup"; import { AiOutlineCheck, AiOutlineClose, AiOutlineCopy } from "react-icons/ai"; +import { toast } from "react-toastify"; import { getAchievements } from "../api/achievements"; import { getGameType, upsertGameType } from "../api/gamedev"; @@ -66,7 +67,13 @@ const GameEditorPage = function GameEditorPage({ editMode }: IProps) { try { await upsertGameType(upserGameTypeParams); navigate("/games"); + toast('Game successfully saved.',{ + type: 'success', + }); } catch (error: any) { + toast(`Error saving game : ${error?.message}`, { + type: "error", + }); console.log({ error }); setIsLoading(false); setErrorMessage(error.message); @@ -118,6 +125,9 @@ const GameEditorPage = function GameEditorPage({ editMode }: IProps) { return gameType; } catch (error: any) { console.log({ error }); + toast(`Error : ${error?.message}`, { + type: "error", + }); setIsLoading(false); setErrorMessage(error.message); } diff --git a/src/ui/AddOrEditAchievementModal/AddOrEditAchievementModal.tsx b/src/ui/AddOrEditAchievementModal/AddOrEditAchievementModal.tsx index 73de78d..c5427b3 100644 --- a/src/ui/AddOrEditAchievementModal/AddOrEditAchievementModal.tsx +++ b/src/ui/AddOrEditAchievementModal/AddOrEditAchievementModal.tsx @@ -2,6 +2,7 @@ import { useFormik } from "formik"; import { useEffect } from "react"; import * as Yup from "yup"; import { useParams } from "react-router-dom"; +import { toast } from "react-toastify"; import { upsertAchievement } from "../../api/achievements"; import Button from "../Button"; @@ -30,16 +31,25 @@ const AddOrEditAchievementModal = ({ const { gameTypeId } = useParams<{ gameTypeId: string }>(); const onSubmit = async (values: IAchievementForm) => { - await upsertAchievement({ - ...(selectedAchievement?.id && { id: selectedAchievement?.id }), - _gameTypeId: selectedAchievement?._gameTypeId || parseInt(gameTypeId || ""), - ...(selectedAchievement?.createdAt && { createdAt: selectedAchievement?.createdAt }), - description: values.description, - targetValue: values.targetValue, - isEnabled: values.isEnabled, - updatedAt: new Date().toString(), - }); - onClose(); + try{ + await upsertAchievement({ + ...(selectedAchievement?.id && { id: selectedAchievement?.id }), + _gameTypeId: selectedAchievement?._gameTypeId || parseInt(gameTypeId || ""), + ...(selectedAchievement?.createdAt && { createdAt: selectedAchievement?.createdAt }), + description: values.description, + targetValue: values.targetValue, + isEnabled: values.isEnabled, + updatedAt: new Date().toString(), + }); + onClose(); + toast('Achievement successfully saved.',{ + type: 'success', + }); + } catch (err: any) { + toast(`Error : ${err.message}`, { + type: "error", + }); + } } const validationSchema = Yup.object({ diff --git a/src/ui/AddOrEditLeaderboardModal/AddOrEditLeaderboardModal.tsx b/src/ui/AddOrEditLeaderboardModal/AddOrEditLeaderboardModal.tsx index e9c7e6b..0268adb 100644 --- a/src/ui/AddOrEditLeaderboardModal/AddOrEditLeaderboardModal.tsx +++ b/src/ui/AddOrEditLeaderboardModal/AddOrEditLeaderboardModal.tsx @@ -12,6 +12,7 @@ import { resetStrategies, scoreStrategies, } from "../../utils/leaderboardStrategies"; +import { toast } from "react-toastify"; interface IProps { show: boolean; @@ -34,15 +35,25 @@ const AddOrEditLeaderboardModal = ({ const { gameTypeId } = useParams<{ gameTypeId: string }>(); const onSubmit = async (values: ILeaderboardForm) => { - await upsertLeaderboard({ - ...(selectedLeaderboard?.id && { id: selectedLeaderboard?.id }), - _gameTypeId: - selectedLeaderboard?._gameTypeId || parseInt(gameTypeId || ""), - name: values.name, - scoreStrategy: values.scoreStrategy.toLowerCase(), - resetStrategy: values.resetStrategy.toLowerCase(), - }); - onClose(); + try{ + await upsertLeaderboard({ + ...(selectedLeaderboard?.id && { id: selectedLeaderboard?.id }), + _gameTypeId: + selectedLeaderboard?._gameTypeId || parseInt(gameTypeId || ""), + name: values.name, + scoreStrategy: values.scoreStrategy.toLowerCase(), + resetStrategy: values.resetStrategy.toLowerCase(), + }); + onClose(); + toast('Leaderboard successfully saved.',{ + type: 'success', + }); + + } catch (err: any) { + toast(`Error : ${err?.message}`, { + type: "error", + }); + } }; const validationSchema = Yup.object({