Merge pull request #69 from NextCafeteria/hotfix/ui-theme-glitch

Hotfix/UI theme glitch
NextCafeteria · Aug 15, 2023 · 2b95f1d · 2b95f1d
2 parents 452bdbb + e9a0569
commit 2b95f1d
Show file tree

Hide file tree

Showing 24 changed files with 243 additions and 182 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "react-apexcharts": "^1.4.0",
     "react-dom": "18.2.0",
     "react-i18next": "12.2.2",
+    "react-toastify": "^9.1.3",
     "sharp": "^0.32.1",
     "sort-by": "^0.0.2",
     "swr": "^2.2.0",

diff --git a/src/app/[lng]/cart/page.js b/src/app/[lng]/cart/page.js
@@ -10,6 +10,7 @@ const addressOptions = require("@/data/address_options.json");
 import XButton from "@/components/buttons/XButton";
 import CartItemCard from "@/components/cart/CartItemCard";
 import Payment from "@/components/cart/Payment";
+import { toast } from "react-toastify";
 export default function Cart({ params: { lng } }) {
   const router = useRouter();
   const session = useSession();
@@ -72,7 +73,7 @@ export default function Cart({ params: { lng } }) {
     const cart = JSON.parse(localStorage.getItem("cart", "[]"));
     localStorage.setItem("lastDeliveryAddress", deliveryAddress);
     if (!storeId) {
-      alert(t("Please select a store"));
+      toast.error(t("Please select a store"));
       return;
     }
     PlaceOrder(
@@ -84,7 +85,7 @@ export default function Cart({ params: { lng } }) {
         setHidePayment(false);
       },
       (e) => {
-        alert(t("Order failed"));
+        toast.error(t("Order failed"));
       }
     );
   }

diff --git a/src/app/[lng]/dashboard/products/new-product/page.js b/src/app/[lng]/dashboard/products/new-product/page.js
@@ -11,6 +11,7 @@ import BackButton from "@/components/buttons/BackButton";
 import CustomizationCard from "@/components/products/CustomizationCard";
 import ImageUploader from "@/components/ImageUploader";
 import { uuidv4 } from "@/lib/utils";
+import { toast } from "react-toastify";
 
 export default function ({ params: { lng } }) {
   const router = useRouter();
@@ -43,12 +44,12 @@ export default function ({ params: { lng } }) {
     CreateProduct(
       productData,
     ).then(() => {
-      alert("Product created");
+      toast.success("Product created");
       router.push(`/${lng}/dashboard/products`);
     }
     ).catch((e) => {
       console.log(e);
-      alert("Could not update product");
+      toast.error("Could not update product");
     });
   };
 

diff --git a/src/app/[lng]/dashboard/products/product-details/[productId]/page.js b/src/app/[lng]/dashboard/products/product-details/[productId]/page.js
@@ -6,7 +6,7 @@ import { useGetProduct, UpdateProduct } from "@/lib/requests/products";
 import { useSession } from "next-auth/react";
 import Image from "next/image";
 import Skeleton from "react-loading-skeleton";
-
+import { toast } from "react-toastify";
 import BackButton from "@/components/buttons/BackButton";
 import CustomizationCard from "@/components/products/CustomizationCard";
 import ImageUploader from "@/components/ImageUploader";
@@ -26,7 +26,7 @@ export default function ({ params: { lng, productId } }) {
   if (isLoading) console.log("loading");
   if (error) {
     console.log(error);
-    alert("Could not get product");
+    toast.error("Could not get product");
     router.push(`/${lng}/dashboard/products`);
   }
   const setProductData = function (productData) {
@@ -58,12 +58,12 @@ export default function ({ params: { lng, productId } }) {
       productId,
       product,
     ).then(() => {
-      alert("Product updated");
+      toast.success("Product updated");
       router.push(`/${lng}/dashboard/products`);
     }
     ).catch((e) => {
       console.log(e);
-      alert("Could not update product");
+      toast.error("Could not update product");
     });
   };
 

diff --git a/src/app/[lng]/dashboard/settings/page.js b/src/app/[lng]/dashboard/settings/page.js
@@ -1,7 +1,7 @@
 "use client";
 
 import {
-  GetCommonSettings,
+  useGetCommonSettings,
   UpdateCommonSettings,
 } from "@/lib/requests/settings";
 import { useEffect, useState } from "react";
@@ -10,25 +10,22 @@ import Skeleton from "react-loading-skeleton";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "@/app/i18n/client";
-
+import { toast } from "react-toastify";
 export default function ({ params: { lng, storeId } }) {
   const router = useRouter();
   const session = useSession();
   if (session && session.status === "unauthenticated") {
     router.push(`/${lng}/login`);
   }
 
-  const [commonSettings, setCommonSettings] = useState(null);
-
-  useEffect(() => {
-    GetCommonSettings()
-      .then((data) => {
-        setCommonSettings(data);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  }, []);
+  const {
+    data: commonSettings,
+    error,
+    mutateSettings,
+  } = useGetCommonSettings();
+  if (error) {
+    console.log(error);
+  }
 
   const { t } = useTranslation(lng, "common");
 
@@ -52,7 +49,7 @@ export default function ({ params: { lng, storeId } }) {
                 onChange={(e) => {
                   let newCommonSettings = { ...commonSettings };
                   newCommonSettings.brandName = e.target.value;
-                  setCommonSettings(newCommonSettings);
+                  mutateSettings(newCommonSettings, { revalidate: false });
                 }}
               />
             )}
@@ -68,7 +65,7 @@ export default function ({ params: { lng, storeId } }) {
                 onChange={(e) => {
                   let newCommonSettings = { ...commonSettings };
                   newCommonSettings.brandDescription = e.target.value;
-                  setCommonSettings(newCommonSettings);
+                  mutateSettings(newCommonSettings, { revalidate: false });
                 }}
               />
             )}
@@ -82,12 +79,7 @@ export default function ({ params: { lng, storeId } }) {
                 onChange={(e) => {
                   let newCommonSettings = { ...commonSettings };
                   newCommonSettings.theme = e.target.value;
-                  setCommonSettings(newCommonSettings);
-                  // Set theme
-                  document.documentElement.setAttribute(
-                    "data-theme",
-                    e.target.value
-                  );
+                  mutateSettings(newCommonSettings, { revalidate: false });
                 }}
               >
                 <option value="cupcake">
@@ -128,13 +120,13 @@ export default function ({ params: { lng, storeId } }) {
               className="btn btn-primary"
               onClick={() => {
                 if (!commonSettings?.brandName) {
-                  alert(t("Please fill the brand name!"));
+                  toast.error(t("Please fill the brand name!"));
                   return;
                 }
 
                 UpdateCommonSettings("common", commonSettings)
                   .then((data) => {
-                    alert(t("Common settings updated successfully!"));
+                    toast.success(t("Common settings updated successfully!"));
                     // Save to local storage
                     localStorage.setItem(
                       "commonSettings",
@@ -143,7 +135,7 @@ export default function ({ params: { lng, storeId } }) {
                   })
                   .catch((e) => {
                     console.log(e);
-                    alert(t("Could not update common settings"));
+                    toast.error(t("Could not update common settings"));
                   });
               }}
             >

diff --git a/src/app/[lng]/dashboard/stores/new-store/page.js b/src/app/[lng]/dashboard/stores/new-store/page.js
@@ -6,6 +6,7 @@ import { useSession } from "next-auth/react";
 import XButton from "@/components/buttons/XButton";
 
 import { CreateStore } from "@/lib/requests/stores";
+import { toast } from "react-toastify";
 
 export default function NewStores({ params: { lng, itemId } }) {
   const router = useRouter();
@@ -60,7 +61,7 @@ export default function NewStores({ params: { lng, itemId } }) {
         className="btn btn-primary mb-2 w-full max-w-[700px] fixed bottom-[90px]  md:bottom-[20px] h-[50px] p-2 md:rounded-md flex flex-row items-stretch justify-between px-8"
         onClick={() => {
           if (!name || !address || !phone) {
-            alert("Please fill in all the fields!");
+            toast.error("Please fill in all the fields!");
             return;
           }
 
@@ -71,7 +72,7 @@ export default function NewStores({ params: { lng, itemId } }) {
             },
             (e) => {
               console.log(e);
-              alert("Could not create store! Please try again.");
+              toast.error("Could not create store! Please try again.");
             }
           );
         }}

diff --git a/src/app/[lng]/dashboard/stores/page.js b/src/app/[lng]/dashboard/stores/page.js
@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 
 import { useGetStores } from "@/lib/requests/stores";
 import StoreCard from "@/components/stores/StoreCard";
+import { toast } from "react-toastify";
 
 export default function StoreManagement({ params: { lng } }) {
   const router = useRouter();
@@ -18,7 +19,7 @@ export default function StoreManagement({ params: { lng } }) {
   const { stores, error, isLoading } = useGetStores();
   if (error) {
     console.log(e);
-    alert("Could not get the stores.");
+    toast.error("Could not get the stores.");
   }
 
   const { t } = useTranslation(lng, "common");

diff --git a/src/app/[lng]/dashboard/stores/store-details/[storeId]/add-staff/page.js b/src/app/[lng]/dashboard/stores/store-details/[storeId]/add-staff/page.js
@@ -8,6 +8,7 @@ import Rating from "@/components/Rating";
 import BackButton from "@/components/buttons/BackButton";
 
 import { useGetStore, AddStaff } from "@/lib/requests/stores";
+import { toast } from "react-toastify";
 
 export default function NewStores({ params: { lng, storeId } }) {
   const router = useRouter();
@@ -20,7 +21,7 @@ export default function NewStores({ params: { lng, storeId } }) {
 
   if (error) {
     console.log(error);
-    alert("Could not get store");
+    toast.error("Could not get store");
     router.push(`/${lng}/dashboard/stores`);
   }
 
@@ -75,7 +76,7 @@ export default function NewStores({ params: { lng, storeId } }) {
         className="btn btn-primary mb-2 w-full max-w-[700px] fixed bottom-[90px]  md:bottom-[20px] h-[50px] md:rounded-md text-white flex flex-row items-stretch justify-between px-8"
         onClick={() => {
           if (!email) {
-            alert("Please fill in all the fields!");
+            toast.error("Please fill in all the fields!");
             return;
           }
 
@@ -89,7 +90,7 @@ export default function NewStores({ params: { lng, storeId } }) {
             },
             (e) => {
               console.log(e);
-              alert("Could not add staff");
+              toast.error("Could not add staff");
             }
           );
         }}