From 6c7cef4a3a8203dad97276c682e34e3d5170fa4d Mon Sep 17 00:00:00 2001 From: Andres Chapeton Date: Wed, 22 Mar 2023 18:07:34 -0600 Subject: [PATCH] Prepare to go live --- package.json | 1 + src/modules/ApplicationsTable/index.jsx | 9 +++ src/pages/ConfirmDeleteApp/index.jsx | 75 ++++++++++++++++--- src/pages/ConfirmDeleteApp/styles.module.scss | 73 ++++++++++++++++++ src/pages/ProfilePage/index.jsx | 3 +- src/pages/ProfilePage/styles.module.scss | 2 + yarn.lock | 19 +++++ 7 files changed, 172 insertions(+), 10 deletions(-) create mode 100644 src/pages/ConfirmDeleteApp/styles.module.scss diff --git a/package.json b/package.json index b3e97a8..71d73f3 100644 --- a/package.json +++ b/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", diff --git a/src/modules/ApplicationsTable/index.jsx b/src/modules/ApplicationsTable/index.jsx index 1a8b102..51d0947 100644 --- a/src/modules/ApplicationsTable/index.jsx +++ b/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 diff --git a/src/pages/ConfirmDeleteApp/index.jsx b/src/pages/ConfirmDeleteApp/index.jsx index 4c74ffe..15dfa24 100644 --- a/src/pages/ConfirmDeleteApp/index.jsx +++ b/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 ( +
+ Success Icon + Application deleted successfully! +
+ ); +}; const ConfirmDeleteApp = () => { const location = useLocation(); const app = location.state; const navigate = useNavigate(); + const notify = () => { + toast(, { + 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 ( -
-
-

Are you sure do you want to delete this app?

- +
+ +

+ Are you sure do you want to delete this app? +

+
+
+ Medical Unit: + {app.medicalUnit} +
+
+ Doctor: + {app.doctorName} +
+
+ Name: + {app.employee.fullName} +
+
+ Start Date: + + {format(new Date(app.startDate), "MM/dd/yyyy")} + +
+
+ End Date: + + {format(new Date(app.endDate), "MM/dd/yyyy")} + +
+
+ Medical Diagnostic: + {app.medicalDiagnostic} +
+
+ + - +
); }; diff --git a/src/pages/ConfirmDeleteApp/styles.module.scss b/src/pages/ConfirmDeleteApp/styles.module.scss new file mode 100644 index 0000000..d57219b --- /dev/null +++ b/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; + } + } +} diff --git a/src/pages/ProfilePage/index.jsx b/src/pages/ProfilePage/index.jsx index a95e22c..93cabcb 100644 --- a/src/pages/ProfilePage/index.jsx +++ b/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 = () => {
Company start date: - {loggedUser[0].employee.startDate} + {format(new Date(loggedUser[0].employee.startDate), "MM/dd/yyyy")}
diff --git a/src/pages/ProfilePage/styles.module.scss b/src/pages/ProfilePage/styles.module.scss index bcf9ddc..0ee2562 100644 --- a/src/pages/ProfilePage/styles.module.scss +++ b/src/pages/ProfilePage/styles.module.scss @@ -72,6 +72,7 @@ font-size: 13px; line-height: 15.73px; color: var(--red); + cursor: pointer; } &__button { @@ -79,5 +80,6 @@ font-size: 13px; line-height: 15.73px; color: var(--blueButton); + cursor: pointer; } } diff --git a/yarn.lock b/yarn.lock index 40bb022..3058b1b 100644 --- a/yarn.lock +++ b/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"