refactor: use antd third party library to enhance the user experience

SandeepKrSuman · Dec 16, 2023 · c74c81c · c74c81c
1 parent 7c8fee6
commit c74c81c
Show file tree

Hide file tree

Showing 25 changed files with 90 additions and 66 deletions.
diff --git a/src/components/Cards/AppointmentCard.js b/src/components/Cards/AppointmentCard.js
@@ -8,6 +8,7 @@ import CancelIcon from "@mui/icons-material/Cancel";
 import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import API from "../../api";
+import { message } from "antd";
 
 export default function AppointmentCard(props) {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -19,15 +20,15 @@ export default function AppointmentCard(props) {
       });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.erroMsg);
+        message.error(res.data.erroMsg);
       } else {
         setOpenBackdrop(false);
-        alert(res.data.msg);
+        message.error(res.data.msg);
         window.location.reload();
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/Cards/BookingCard.js b/src/components/Cards/BookingCard.js
@@ -11,6 +11,7 @@ import { useNavigate, createSearchParams } from "react-router-dom";
 
 import jwt from "jsonwebtoken";
 import API from "../../api";
+import { message } from "antd";
 
 export default function BookingCard(props) {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -27,7 +28,7 @@ export default function BookingCard(props) {
     if (props.linkto === "staff") {
       setOpenBackdrop(false);
       if (!validateEmail(props.ptemail)) {
-        alert("Enter a valid email");
+        message.error("Enter a valid email");
         return;
       }
     }
@@ -67,7 +68,7 @@ export default function BookingCard(props) {
       const res = await API.bookAppointment(postData);
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
         navigate({
@@ -81,7 +82,7 @@ export default function BookingCard(props) {
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/Cards/DashCard.js b/src/components/Cards/DashCard.js
@@ -5,7 +5,7 @@ import Typography from "@mui/material/Typography";
 import { useNavigate, useLocation, createSearchParams } from "react-router-dom";
 import "./DashCard.css";
 import { PaymentContext } from "../../pages/PatientDash/Tabs/MakePayment";
-import { StaffPaymentContext } from "../Dashboards/StaffDash/Tabs/MakePayment";
+import { StaffPaymentContext } from "../../pages/StaffDash/Tabs/MakePayment";
 
 export default function DashCard(props) {
   const payment = React.useContext(

diff --git a/src/components/Cards/DocListCard.js b/src/components/Cards/DocListCard.js
@@ -11,6 +11,7 @@ import TextField from "@mui/material/TextField";
 import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import API from "../../api";
+import { message } from "antd";
 
 
 const styles = {
@@ -46,15 +47,15 @@ export default function DocListCard(props) {
       const res = await API.updateFee({ docName: props.heading, fee: newFee });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
         setNewFee("");
         window.location.reload();
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/Cards/DuePaymentCard.js b/src/components/Cards/DuePaymentCard.js
@@ -10,6 +10,7 @@ import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useNavigate, createSearchParams } from "react-router-dom";
 import API from "../../api";
+import { message } from "antd";
 
 export default function DuePaymentCard(props) {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -33,15 +34,15 @@ export default function DuePaymentCard(props) {
       });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.erroMsg);
+        message.error(res.data.erroMsg);
       } else {
         setOpenBackdrop(false);
-        alert(res.data.msg);
+        message.error(res.data.msg);
         window.location.reload();
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/Cards/FeedbackCard.js b/src/components/Cards/FeedbackCard.js
@@ -12,6 +12,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import API from "../../api";
+import { message } from "antd";
 
 export default function FeedbackCard(props) {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -36,15 +37,15 @@ export default function FeedbackCard(props) {
       });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
         setSubmit(true);
-        alert(res.data.msg);
+        message.error(res.data.msg);
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }
@@ -61,17 +62,17 @@ export default function FeedbackCard(props) {
       });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
         setFeedbackText("");
         setValue(0);
         setSubmit(false);
-        alert(res.data.msg);
+        message.error(res.data.msg);
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/Cards/VerifyCard.js b/src/components/Cards/VerifyCard.js
@@ -11,6 +11,7 @@ import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useNavigate, createSearchParams } from "react-router-dom";
 import API from "../../api";
+import { message } from "antd";
 
 const styleVerify = {
   backgroundColor: "#64dd17",
@@ -41,7 +42,7 @@ export default function VerifyCard(props) {
       const res = await API.verify({ email: props.subheading });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
         if (props.unvuser === "doctor") {
@@ -54,14 +55,14 @@ export default function VerifyCard(props) {
             })}`,
           });
         } else {
-          if (!alert(res.data.msg)) {
+          if (!message.error(res.data.msg)) {
             window.location.reload();
           }
         }
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }
@@ -72,16 +73,16 @@ export default function VerifyCard(props) {
       const res = await API.reject({ data: { email: props.subheading } });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
-        if (!alert(res.data.msg)) {
+        if (!message.error(res.data.msg)) {
           window.location.reload();
         }
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/DashBar/DashBar.js b/src/components/DashBar/DashBar.js
@@ -14,6 +14,7 @@ import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useNavigate } from "react-router-dom";
 import API from "../../api";
+import { message } from "antd";
 
 export default function DashBar() {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -37,7 +38,7 @@ export default function DashBar() {
     } catch (error) {
       setOpenBackdrop(false);
       console.error(error);
-      alert(error.response.data.error);
+      message.error(error.response.data.error);
     }
   }
 

diff --git a/src/components/FileUploader/FileUploader.js b/src/components/FileUploader/FileUploader.js
@@ -7,6 +7,7 @@ import Typography from "@mui/material/Typography";
 import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import API from "../../api";
+import { message } from "antd";
 
 const Input = styled("input")({
   display: "none",
@@ -50,18 +51,18 @@ export default function FileUploader(props) {
       const res = await API.uploadPrescription(formData);
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
         setFileName(null);
         setErrFileName(null);
-        if (!alert(res.data.msg)) {
+        if (!message.error(res.data.msg)) {
           window.location.reload();
         }
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.log(error);
     }
   }

diff --git a/src/components/Payments/Card/CardPay.js b/src/components/Payments/Card/CardPay.js
@@ -19,6 +19,7 @@ import "react-credit-cards/es/styles-compiled.css";
 import "./CardPay.css";
 import API from "../../../api";
 import { useSearchParams, useNavigate } from "react-router-dom";
+import { message } from "antd";
 
 function CardPay() {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -80,14 +81,14 @@ function CardPay() {
       const res = await API.makePayment({ pemail, demail, doa });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
-        alert(res.data.msg);
+        message.error(res.data.msg);
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.error(error);
     }
     setNumber("");

diff --git a/src/components/Payments/Cash/CashPay.js b/src/components/Payments/Cash/CashPay.js
@@ -8,6 +8,7 @@ import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import API from "../../../api";
+import { message } from "antd";
 
 function CashPay() {
   const navigate = useNavigate();
@@ -25,15 +26,15 @@ function CashPay() {
       const res = await API.makePayment({ pemail, demail, doa });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
-        alert(res.data.msg);
+        message.error(res.data.msg);
         setConfirm(true);
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.error(error);
     }
   }

diff --git a/src/components/Payments/UPI/UpiPay.js b/src/components/Payments/UPI/UpiPay.js
@@ -8,6 +8,7 @@ import Backdrop from "@mui/material/Backdrop";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import API from "../../../api";
+import { message } from "antd";
 
 function UpiPay() {
   const navigate = useNavigate();
@@ -25,15 +26,15 @@ function UpiPay() {
       const res = await API.makePayment({ pemail, demail, doa });
       if (res.data.error) {
         setOpenBackdrop(false);
-        alert(res.data.errorMsg);
+        message.error(res.data.errorMsg);
       } else {
         setOpenBackdrop(false);
-        alert(res.data.msg);
+        message.error(res.data.msg);
         setConfirm(true);
       }
     } catch (error) {
       setOpenBackdrop(false);
-      alert(error.response.data.errorMsg);
+      message.error(error.response.data.errorMsg);
       console.error(error);
     }
   }

diff --git a/src/pages/AdminDash/Tabs/DocList.js b/src/pages/AdminDash/Tabs/DocList.js
@@ -9,6 +9,7 @@ import { Link } from "react-router-dom";
 import DashBar from "../../../components/DashBar/DashBar";
 import DocListCard from "../../../components/Cards/DocListCard";
 import API from "../../../api";
+import { message } from "antd";
 
 function DocList() {
   const [openBackdrop, setOpenBackdrop] = useState(false);
@@ -21,14 +22,14 @@ function DocList() {
         const res = await API.docList();
         if (res.data.error) {
           setOpenBackdrop(false);
-          alert(res.data.errorMsg);
+          message.error(res.data.errorMsg);
         } else {
           setOpenBackdrop(false);
           setDocs(res.data)
         }
       } catch (error) {
         setOpenBackdrop(false);
-        alert(error.response.data.errorMsg);
+        message.error(error.response.data.errorMsg);
         console.log(error);
       }
     }