file progress implemented

src/backend/sendRequest.js

@@ -6,7 +6,8 @@ export const sendRequest = (
   data,
   setState,
   setLoader,
-  setError
+  setError,
+  setProgress
 ) => {
   const form = new FormData();
 
@@ -37,7 +38,12 @@ export const sendRequest = (
   form.append("work_experience", data.exp);
   form.append("date", `${dd}.${mm}.${yyyy}`);
   axios
-    .post(`${url}?token=${token}`, form)
+    .post(`${url}?token=${token}`, form, {
+      onUploadProgress: (progressEvent) => {
+        const progress = progressEvent.loaded / progressEvent.total;
+        setProgress(progress);
+      },
+    })
     .then((res) => {
       setState(res);
       if (setLoader) {

src/backend/sendRequestCard.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-export const sendRequestCard = (url, token, data) => {
+export const sendRequestCard = (url, token, data, setProgress) => {
   let today = new Date();
   let dd = String(today.getDate()).padStart(2, "0");
   let mm = String(today.getMonth() + 1).padStart(2, "0");
@@ -30,7 +30,12 @@ export const sendRequestCard = (url, token, data) => {
 
   form.append("price", data.price);
   axios
-    .post(`${url}?token=${token}`, form)
+    .post(`${url}?token=${token}`, form, {
+      onUploadProgress: (progressEvent) => {
+        const progress = progressEvent.loaded / progressEvent.total;
+        setProgress(progress);
+      },
+    })
     .then((res) => {
       window.open(res.data, "_self").focus();
     })

src/components/CardStages/CardStage6.js

@@ -14,7 +14,13 @@ import { reformatDate } from "../../helpers/reformatDate";
 // URL
 import { destination } from "../../destinationUrl";
 
-const CardStage6 = ({ setStage, data, setLoader, setModalOpen }) => {
+const CardStage6 = ({
+  setStage,
+  data,
+  setLoader,
+  setModalOpen,
+  setProgress,
+}) => {
   const { locale } = useContext(LanguageContext);
   const token = localStorage.getItem("userToken");
   const postUrl = destination + "/online_card";
@@ -143,7 +149,7 @@ const CardStage6 = ({ setStage, data, setLoader, setModalOpen }) => {
           onClick={() => {
             setLoader(true);
             setModalOpen(false);
-            sendRequestCard(postUrl, token, data);
+            sendRequestCard(postUrl, token, data, setProgress);
           }}
         >
           <div>

src/components/CreditStages/CreditStage6.js

@@ -22,6 +22,7 @@ const CreditStage6 = ({
   setLoader,
   setSuccess,
   setError,
+  setProgress,
 }) => {
   const { locale } = useContext(LanguageContext);
   const { setUser } = useContext(UserContext);
@@ -148,7 +149,8 @@ const CreditStage6 = ({
                 }, 2000);
               },
               setLoader,
-              setError
+              setError,
+              setProgress
             );
           }}
         >

src/components/cards/ModalForm.js

@@ -31,6 +31,7 @@ const ModalForm = ({
   setLoader,
   setSuccess,
   setError,
+  setProgress,
 }) => {
   const window = useRef();
   const { locale } = useContext(LanguageContext);
@@ -228,6 +229,7 @@ const ModalForm = ({
                   setModalOpen={setModalOpen}
                   setSuccess={setSuccess}
                   setError={setError}
+                  setProgress={setProgress}
                 />
               ) : (
                 ""

src/components/credits/CreditModal.js

@@ -29,11 +29,11 @@ const CreditModal = ({
   setSuccess,
   setError,
   creditData,
+  setProgress,
 }) => {
   const { locale } = useContext(LanguageContext);
   const window = useRef();
   const [data, setData] = useState({});
-
   const [id, setId] = useState(1);
   return (
     <section
@@ -228,6 +228,7 @@ const CreditModal = ({
                   setLoader={setLoader}
                   setSuccess={setSuccess}
                   setError={setError}
+                  setProgress={setProgress}
                 />
               ) : (
                 ""

src/components/global/ProgressLoader.js

@@ -0,0 +1,36 @@
+// IMPORT MODULES
+import React, { useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+import useMediaQuery from "../../hooks/useMediaQuery";
+
+// IMPORT IMAGES
+import { ReactComponent as Spinner } from "../../icons/loader.svg";
+
+const ProgressLoader = ({ progress }) => {
+  const { locale } = useContext(LanguageContext);
+  const mobile = useMediaQuery("max-width: 340px");
+  return (
+    <div className="loader">
+      <Spinner className="spinner" />
+      <div className="splitter">
+        <h1 className="progress-not">
+          {locale === "TKM"
+            ? "Siziň faýllaryňyz ýüklenilýär"
+            : "Загрузка ваших файлов"}
+        </h1>
+        <h1 className="progress-percentage">{Math.floor(progress * 100)}%</h1>
+        <div className="linear-progress">
+          <div
+            className="bar"
+            style={{
+              left: `${mobile ? -25 + 25 * progress : -30 + 30 * progress}rem`,
+              transition: "1s ease all",
+            }}
+          ></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressLoader;

src/pages/Cards.js

@@ -6,15 +6,14 @@ import { LanguageContext } from "../backend/LanguageContext";
 // IMPORT COMPONENTS
 import Breadcrumb from "../components/global/Breadcrumb";
 import ModalForm from "../components/cards/ModalForm";
-import Loader from "../components/global/Loader";
 import Success from "../components/global/Success";
+import ProgressLoader from "../components/global/ProgressLoader";
 import Error from "../components/global/Error";
 
 // IMPORT IMAGES
 import card from "../icons/card-black.svg";
 import add from "../icons/add.svg";
 import allert from "../icons/info-circle.svg";
-import nul from "../icons/null.svg";
 
 const Cards = () => {
   const { locale } = useContext(LanguageContext);
@@ -23,6 +22,7 @@ const Cards = () => {
   const { user } = useContext(UserContext);
   const [loader, setLoader] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [stage, setStage] = useState(1);
   useEffect(() => {
     if (modalOpen) {
@@ -67,8 +67,10 @@ const Cards = () => {
         setLoader={setLoader}
         setSuccess={setSuccess}
         setError={setError}
+        setProgress={setProgress}
       />
-      {loader ? <Loader /> : null}
+      {/* {loader ? <Loader /> : null} */}
+      {loader ? <ProgressLoader progress={progress} /> : null}
       <div className="container">
         <div className="cards-inner">
           <div className="card-title">

src/pages/Credits.js

@@ -7,7 +7,8 @@ import axios from "axios";
 // IMPORT COMPONENTS
 import Breadcrumb from "../components/global/Breadcrumb";
 import CreditModal from "../components/credits/CreditModal";
-import Loader from "../components/global/Loader";
+// import Loader from "../components/global/Loader";
+import ProgressLoader from "../components/global/ProgressLoader";
 import Success from "../components/global/Success";
 import Error from "../components/global/Error";
 
@@ -29,6 +30,7 @@ const Credits = () => {
   const [stage, setStage] = useState(1);
   const [loader, setLoader] = useState(false);
   const [creditData, setCreditData] = useState();
+  const [progress, setProgress] = useState(0);
   useEffect(() => {
     if (modalOpen) {
       document.body.style.overflowY = "hidden";
@@ -89,8 +91,9 @@ const Credits = () => {
         setSuccess={setSuccess}
         setError={setError}
         creditData={creditData}
+        setProgress={setProgress}
       />
-      {loader ? <Loader /> : null}
+      {loader ? <ProgressLoader progress={progress} /> : null}
       <div className="container">
         <div className="cards-inner">
           <div className="card-title">

src/scss/_global.scss

@@ -79,8 +79,14 @@ input::placeholder {
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
+    gap: 7rem;
     align-items: center;
     justify-content: center;
+
+    svg {
+      margin: 0 auto !important;
+    }
   }
 
   .spinner {
@@ -88,6 +94,41 @@ input::placeholder {
     height: 6rem;
   }
 }
+.splitter {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-not {
+  margin-top: 2rem;
+  font-size: 3rem;
+  text-align: center;
+}
+
+.progress-percentage {
+  font-size: 2rem;
+  color: $base-green;
+}
+
+.linear-progress {
+  width: 30rem;
+  height: 1rem;
+  position: relative;
+  background: lightgrey;
+  overflow: hidden;
+  border-radius: 2rem;
+
+  .bar {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    background-color: $base-green;
+  }
+}
 
 input[type="range"] {
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
@@ -239,6 +280,16 @@ input[type="range"]:focus::-ms-fill-upper {
   }
 }
 
+@media screen and (max-width: 340px) {
+  .linear-progress {
+    width: 25rem;
+  }
+
+  .progress-not {
+    font-size: 2.5rem;
+  }
+}
+
 @media screen and (max-width: 330px) {
   .captcha {
     transform: scaleX(0.71) scaleY(0.8) translateX(-3rem);