refactor: simplify notification state management across components

2024-12-24 01:03:46 +05:30 · 2024-12-24 01:03:46 +05:30 · 27f4597348
commit 27f4597348
parent 265d0b2209
5 changed files with 40 additions and 90 deletions
--- a/src/pages/ChargeEdit.jsx
+++ b/src/pages/ChargeEdit.jsx
@ -20,11 +20,7 @@ function ChargeEdit() {
    penaltyAmountEdit: false,
  });

-  const [notification, setNotification] = useState({
-    visible: false,
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });

  const { setIsLoading } = useLoading();
  const { t } = useTranslation();
@ -36,7 +32,10 @@ function ChargeEdit() {
    const fetchCharges = async () => {
      try {
        setIsLoading(true);
-        const response = await lockerService.getCharges(productCode, interestCategory);
+        const response = await lockerService.getCharges(
+          productCode,
+          interestCategory
+        );
        if (response.status === 200) {
          const { rent, penalty } = response.data;
          setChargeDetails({
@ -47,7 +46,6 @@ function ChargeEdit() {
          });
        } else {
          setNotification({
-            visible: true,
            message: response.data.message,
            type: "error",
          });
@ -55,7 +53,6 @@ function ChargeEdit() {
      } catch (error) {
        console.error(error);
        setNotification({
-          visible: true,
          message: error.message,
          type: "error",
        });
@ -114,13 +111,11 @@ function ChargeEdit() {
      );
      if (response.status === 200) {
        setNotification({
-          visible: true,
          message: response.data.message,
          type: "success",
        });
      } else {
        setNotification({
-          visible: true,
          message: response.data.message,
          type: "error",
        });
@ -128,7 +123,6 @@ function ChargeEdit() {
    } catch (error) {
      console.error(error);
      setNotification({
-        visible: true,
        message: error.message,
        type: "error",
      });
@ -167,7 +161,7 @@ function ChargeEdit() {
  return (
    <div>
      <AnimatePresence>
-        {notification.visible && <Notification notification={notification} />}
+        {notification.message !== "" && <Notification {...notification} />}
      </AnimatePresence>
      <div className="relative">
        {notification.type === "success" && (
--- a/src/pages/CheckInOutLog.jsx
+++ b/src/pages/CheckInOutLog.jsx
@ -10,10 +10,7 @@ import { useLoading } from "../hooks/useLoading";
 function CheckInOutLog() {
  const [time, setTime] = useState(null);
  const [checkType, setCheckType] = useState("");
-  const [notification, setNotification] = useState({
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });

  const location = useLocation();
  const showToast = useToast();
@ -29,7 +26,11 @@ function CheckInOutLog() {
    // Add your logic here
    try {
      setIsLoading(true);
-      const response = await lockerService.checkInOut(accountNumber, time, checkType);
+      const response = await lockerService.checkInOut(
+        accountNumber,
+        time,
+        checkType
+      );
      if (response.status === 200) {
        setNotification({ message: response.data.message, type: "success" });
      } else {
@ -42,7 +43,7 @@ function CheckInOutLog() {
    } finally {
      setIsLoading(false);
    }
-  }
+  };

  return (
    <div>
@ -80,7 +81,7 @@ function CheckInOutLog() {
            </select>
          </div>
        </div>
-        <Button text="Submit" onClick={handleSubmit}/>
+        <Button text="Submit" onClick={handleSubmit} />
      </FormBox>
    </div>
  );
--- a/src/pages/KeySwap.jsx
+++ b/src/pages/KeySwap.jsx
@ -1,5 +1,5 @@
 import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { AnimatePresence } from "motion/react";
 import { useTranslation } from "react-i18next";
 import { useToast } from "../hooks/useToast";
 import { useLoading } from "../hooks/useLoading";
@ -10,17 +10,13 @@ import Button from "../components/Button";
 import { lockerService } from "../services/locker.service";
 import clsx from "clsx";
 import FormBox from "../components/FormBox";
-import { Copy } from "lucide-react";
+import Notification from "../components/Notification";

 function KeySwap() {
  const { t } = useTranslation();
  const showToast = useToast();
  const { isLoading, setIsLoading } = useLoading();
-  const [notification, setNotification] = useState({
-    visible: false,
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });
  const [keySwapDetails, setKeySwapDetails] = useState({
    cabinetId: "",
    lockerId: "",
@ -117,20 +113,17 @@ function KeySwap() {
      );
      if (response.status === 200) {
        setNotification({
-          visible: true,
          message: response.data.message,
          type: "success",
        });
      } else {
        setNotification({
-          visible: true,
          message: response.data.message,
          type: "error",
        });
      }
    } catch (error) {
      setNotification({
-        visible: true,
        message: error.message,
        type: "error",
      });
@ -169,51 +162,22 @@ function KeySwap() {

  return (
    <div>
-    <AnimatePresence>
-    {notification.visible && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className={clsx(
-              "p-4 mb-8 font-body text-center text-lg rounded-2xl flex items-center justify-center gap-2",
-              notification.type === "error"
-                ? "bg-error-surface text-error"
-                : "bg-success-surface text-success"
-            )}
-          >
-            {notification.message.split(":").map((msg, index) => {
-              return index === 1 ? (
-                <span key={index} className="border-b border-dashed">
-                  {msg}
-                </span>
-              ) : (
-                <span key={index}>{msg}</span>
-              );
-            })}
-            <Copy
-              cursor={"pointer"}
-              size={15}
-              onClick={navigator.clipboard.writeText(
-                notification.message.split(":")[1].trim()
-              )}
-            />
-          </motion.div>
+      <AnimatePresence>
+        {notification.message !== "" && <Notification {...notification} />}
+      </AnimatePresence>
+      <div className="relative">
+        {notification.type === "success" && (
+          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
        )}
-    </AnimatePresence>
-    <div className="relative">
-    {notification.type === "success" && (
-        <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
-      )}
-    <FormBox title={t("lockerStatus")}>
-      <div className="p-2 pt-7 flex flex-col gap-4">
-        {formFields.map(renderField)}
+        <FormBox title={t("lockerStatus")}>
+          <div className="p-2 pt-7 flex flex-col gap-4">
+            {formFields.map(renderField)}
+          </div>
+          <Button text={t("submit")} onClick={handleKeySwap} />
+        </FormBox>
      </div>
-      <Button text={t("submit")} onClick={handleKeySwap} />
-    </FormBox>
    </div>
-  </div>
-  )
+  );
 }

 export default KeySwap;
--- a/src/pages/LockerStatus.jsx
+++ b/src/pages/LockerStatus.jsx
@ -24,11 +24,7 @@ function LockerStatus() {
    statusValid: true,
  });
  const { isLoading, setIsLoading } = useLoading();
-  const [notification, setNotification] = useState({
-    visible: false,
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });

  const formFields = [
    {
@ -89,13 +85,11 @@ function LockerStatus() {
        lockerDetails.status
      );
      setNotification({
-        visible: true,
        message: response.data.message,
        type: "success",
      });
    } catch (error) {
      setNotification({
-        visible: true,
        message: error.message,
        type: "error",
      });
@ -135,18 +129,18 @@ function LockerStatus() {
  return (
    <div>
      <AnimatePresence>
-        {notification.visible && <Notification notification={notification} />}
+        {notification.message !== "" && <Notification {...notification} />}
      </AnimatePresence>
      <div className="relative">
-      {notification.type === "success" && (
+        {notification.type === "success" && (
          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
        )}
-      <FormBox title={t("lockerStatus")}>
-        <div className="p-2 pt-7 flex flex-col gap-4">
-          {formFields.map(renderField)}
-        </div>
-        <Button text={t("submit")} onClick={handleSubmit} />
-      </FormBox>
+        <FormBox title={t("lockerStatus")}>
+          <div className="p-2 pt-7 flex flex-col gap-4">
+            {formFields.map(renderField)}
+          </div>
+          <Button text={t("submit")} onClick={handleSubmit} />
+        </FormBox>
      </div>
    </div>
  );
--- a/src/pages/LockersRegistration.jsx
+++ b/src/pages/LockersRegistration.jsx
@ -17,7 +17,6 @@ function LockersRegistration() {
  const cabinetId = location.state?.cabinetId;
  const [submitting, setSubmitting] = useState(false);
  const [notification, setNotification] = useState({
-    visible: false,
    message: "",
    type: "",
  });
@ -109,14 +108,12 @@ function LockersRegistration() {
        lockerValues
      );
      setNotification({
-        visible: true,
        message: `Cabinet creation successful. Cabinet ID: ${response.data.cabinetId}`,
        type: "success",
      });
    } catch (error) {
      console.error(error);
      setNotification({
-        visible: true,
        message: `Error registering lockers. ${error.message}`,
        type: "error",
      });
@ -207,7 +204,7 @@ function LockersRegistration() {
  return (
    <div>
      <AnimatePresence>
-        {notification.visible && <Notification notification={notification} />}
+        {notification.message !== "" && <Notification {...notification} />}
      </AnimatePresence>
      <div className="relative">
        {notification.type === "success" && (