Adding toast messages to games pages and leaderboard/achievement modals

Author: ramirlm

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);
       }

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({

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({