Merge pull request #15 from x-team/fix/XTG-312

[XTG-312] Improvements on Add enemy Modal
x-team · Jul 11, 2022 · 2da6be6 · 2da6be6
2 parents 2e939a5 + cabe7cd
commit 2da6be6
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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 (
     <Router>
+      <ToastContainer />
       <Routes>
         <Route
           path="/"

diff --git 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 && <span className="text-sm">x{qty}</span>}
+            {qty && <div className="rounded-full border-2 border-xteamaccent bg-xteamaccent p-0 w-7 scale-[0.6] translate-x-6 -translate-y-3"><span className="text-md text-white">{qty}</span></div>}
         </div>
     );
 };
diff --git 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 ( 

diff --git 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/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<IEnemy[]>([]);
 
     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,6 @@ const AddEnemyToFloorModal = ({
                 (floorEnemy) => floorEnemy._enemy
             );
             setFloorEnemies(floorEnemies);
-
         }
     }, [floor?._floorEnemies]);
 
@@ -75,8 +84,8 @@ const AddEnemyToFloorModal = ({
                     Edit Enemies on Floor {floor?.number}
                 </h2>
 
-                <div className="flex space-between w-full mt-4">
-                    <div className="w-full h-96 bg-xteamaccent">
+                <div className="flex space-between w-full mt-4 gap-2">
+                    <div className="w-full h-96 bg-xteamaccent rounded-md">
                         <p className="text-xl text-white text-center mb-4 uppercase">
                             All enemies
                         </p>
@@ -98,7 +107,7 @@ const AddEnemyToFloorModal = ({
                             })}
                         </div>
                     </div>
-                    <div className="w-full bg-green-500 relative">
+                    <div className="w-full bg-green-500 relative rounded-md">
                         <p className="text-xl text-white text-center mb-4 uppercase">
                             Floor Enemies
                         </p>
@@ -118,7 +127,7 @@ const AddEnemyToFloorModal = ({
                                 </span>
                             ))}
                         </div>
-                        <span className="absolute cursor-pointer bottom-2 left-1/2 hover:text-xteamaccent" onClick={() => setFloorEnemies([])}><AiOutlineDelete /></span>
+                        {floorEnemies && floorEnemies.length > 0 && <span className="absolute cursor-pointer text-white bottom-2 left-1/2 hover:text-xteamaccent" onClick={() => setFloorEnemies([])}><AiOutlineDelete /></span>}
                     </div>
                 </div>
 

diff --git 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
@@ -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({