Prepare to go live

package.json

@@ -14,6 +14,7 @@
     "contentful-management": "^10.30.0",
     "date-fns": "^2.29.3",
     "dotenv": "^16.0.3",
+    "history": "^5.3.0",
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.3",
     "react-dom": "^18.2.0",

src/modules/ApplicationsTable/index.jsx

@@ -12,6 +12,15 @@ const ApplicationsTable = () => {
   //Calls custom hook that fetch applications
   const { data, isLoading, isError } = useFetchUserApps(loggedUser);
   console.log(data);
+
+  const [, forceUpdate] = useState();
+
+  useEffect(() => {
+    setTimeout(() => {
+      forceUpdate;
+    }, 2000);
+  }, []);
+
   //Local storage to save search input value
   const [searchValue, setSearchValue] = useState("");
   //Calls custom hook that looks for search input value

src/pages/ConfirmDeleteApp/index.jsx

@@ -1,15 +1,36 @@
 import React from "react";
-import { useLocation, useNavigate, Navigate } from "react-router-dom";
-import { useDeleteApp } from "../../hooks/useDeleteApp";
+import { useLocation, useNavigate } from "react-router-dom";
 import { deleteApplication } from "../../useContentful";
-import { useLogin } from "../../hooks/store";
 import { useForm } from "react-hook-form";
+import styles from "./styles.module.scss";
+import { format } from "date-fns";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import successIcon from "../../assets/fi_check-circle.svg";
+
+const CustomSuccessDeletedToast = ({ closeToast }) => {
+  return (
+    <div className="toast_success">
+      <img src={successIcon} alt="Success Icon" />
+      <span>Application deleted successfully!</span>
+    </div>
+  );
+};
 
 const ConfirmDeleteApp = () => {
   const location = useLocation();
   const app = location.state;
   const navigate = useNavigate();
 
+  const notify = () => {
+    toast(<CustomSuccessDeletedToast />, {
+      autoClose: 3500,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: false,
+    });
+  };
+
   const {
     register,
     watch,
@@ -25,17 +46,53 @@ const ConfirmDeleteApp = () => {
 
   //Calls delete contentful function
   const onSubmit = () => {
+    notify();
     deleteApplication(app.sysId);
-    navigate("/home");
+    navigate("/home", { replace: true });
   };
 
   return (
-    <div>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <p>Are you sure do you want to delete this app?</p>
-        <button>Confirm</button>
+    <div className={styles.confirm}>
+      <ToastContainer />
+      <h3 className={styles.confirm__title}>
+        Are you sure do you want to delete this app?
+      </h3>
+      <div className={styles.confirm__body}>
+        <div className={styles.confirm__container}>
+          <span className={styles.confirm__label}>Medical Unit:</span>
+          <span className={styles.confirm__text}>{app.medicalUnit}</span>
+        </div>
+        <div className={styles.confirm__container}>
+          <span className={styles.confirm__label}>Doctor:</span>
+          <span className={styles.confirm__text}>{app.doctorName}</span>
+        </div>
+        <div className={styles.confirm__container}>
+          <span className={styles.confirm__label}>Name:</span>
+          <span className={styles.confirm__text}>{app.employee.fullName}</span>
+        </div>
+        <div className={styles.confirm__container}>
+          <span className={styles.confirm__label}>Start Date:</span>
+          <span className={styles.confirm__text}>
+            {format(new Date(app.startDate), "MM/dd/yyyy")}
+          </span>
+        </div>
+        <div className={styles.confirm__container}>
+          <span className={styles.confirm__label}>End Date:</span>
+          <span className={styles.confirm__text}>
+            {format(new Date(app.endDate), "MM/dd/yyyy")}
+          </span>
+        </div>
+        <div className={styles.confirm__container}>
+          <span className={styles.confirm__label}>Medical Diagnostic:</span>
+          <span className={styles.confirm__text}>{app.medicalDiagnostic}</span>
+        </div>
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.confirm__form}>
+        <button className={styles.confirm__button}>Confirm</button>
       </form>
-      <button onClick={onHandleCancel}>Cancel</button>
+      <button className={styles.confirm__cancel} onClick={onHandleCancel}>
+        Cancel
+      </button>
     </div>
   );
 };

src/pages/ConfirmDeleteApp/styles.module.scss

@@ -0,0 +1,73 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.confirm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 16px;
+  margin: 0 auto;
+
+  &__title {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 19.36px;
+    margin-bottom: 15px;
+    text-align: center;
+  }
+
+  &__container {
+    margin-bottom: 10px;
+    display: flex;
+    gap: 5px;
+  }
+
+  &__label {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16.94px;
+  }
+
+  &__text {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16.94px;
+  }
+
+  &__form {
+    width: 100%;
+    text-align: center;
+  }
+
+  &__button {
+    width: 100%;
+    padding: 16px 0;
+    background-color: var(--blueButton);
+    color: var(--white);
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16.94px;
+    cursor: pointer;
+    text-align: center;
+    margin-bottom: 15px;
+
+    @include breakpoint(small) {
+      width: 343px;
+    }
+  }
+
+  &__cancel {
+    width: 100%;
+    padding: 16px 0;
+    background-color: var(--white);
+    color: var(--black);
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16.94px;
+    cursor: pointer;
+
+    @include breakpoint(small) {
+      width: 343px;
+    }
+  }
+}

src/pages/ProfilePage/index.jsx

@@ -5,6 +5,7 @@ import styles from "./styles.module.scss";
 import profilePhoto from "../../assets/photo.svg";
 import editIcon from "../../assets/fi_edit.svg";
 import logoutIcon from "../../assets/fi_log-out.svg";
+import { format } from "date-fns";
 
 const ProfilePage = () => {
   const navigate = useNavigate();
@@ -54,7 +55,7 @@ const ProfilePage = () => {
         <div className={styles.profile__container}>
           <span className={styles.profile__label}>Company start date:</span>
           <span className={styles.profile__text}>
-            {loggedUser[0].employee.startDate}
+            {format(new Date(loggedUser[0].employee.startDate), "MM/dd/yyyy")}
           </span>
         </div>
         <div className={styles.profile__container}>

src/pages/ProfilePage/styles.module.scss

@@ -72,12 +72,14 @@
     font-size: 13px;
     line-height: 15.73px;
     color: var(--red);
+    cursor: pointer;
   }
 
   &__button {
     font-weight: 500;
     font-size: 13px;
     line-height: 15.73px;
     color: var(--blueButton);
+    cursor: pointer;
   }
 }

yarn.lock

@@ -183,6 +183,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
+"@babel/runtime@^7.7.6":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -811,6 +818,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+history@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hoist-non-react-statics@^3.0.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -1054,6 +1068,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 resolve@^1.22.1:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"