Merge pull request #141 from prafull-opensignlabs/staging

apps/OpenSign/src/components/fields/FileUpload.js

@@ -82,7 +82,7 @@ const FileUpload = (props) => {
         progress: (progressValue, loaded, total, { type }) => {
           if (type === "upload" && progressValue !== null) {
             const percentCompleted = Math.round((loaded * 100) / total);
-            console.log("percentCompleted ", percentCompleted);
+            // console.log("percentCompleted ", percentCompleted);
             setpercentage(percentCompleted);
           }
         }

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -1,9 +1,37 @@
-import React from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
 
-const ReportTable = ({ ReportName, List, actions }) => {
+const ReportTable = ({
+  ReportName,
+  List,
+  actions,
+  setIsNextRecord,
+  isMoreDocs
+}) => {
   const navigate = useNavigate();
+  const [currentPage, setCurrentPage] = useState(1);
+  const docPerPage = 10;
+  // const pageNumbers = [];
+
+  // For loop is used to calculate page numbers visible below table
+  // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
+  const pageNumbers = useMemo(() => {
+    const calculatedPageNumbers = [];
+    for (let i = 1; i <= Math.ceil(List.length / docPerPage); i++) {
+      calculatedPageNumbers.push(i);
+    }
+    return calculatedPageNumbers;
+  }, [List]);
+  //  below useEffect reset currenpage to 1 if user change route
+  useEffect(() => {
+    return () => setCurrentPage(1);
+  }, []);
+
+  // `formatRow` is used to show data in poper manner like
+  // if data is of array type then it will join array items with ","
+  // if data is of object type then it Name values will be show in row
+  // if no data available it will show hyphen "-"
   const formatRow = (row) => {
     if (Array.isArray(row)) {
       let updateArr = row.map((x) => x.Name);
@@ -14,24 +42,17 @@ const ReportTable = ({ ReportName, List, actions }) => {
       return "-";
     }
   };
+  // below useEffect is used to render next record if IsMoreDoc is true
+  // second last value of pageNumber array is same as currentPage
+  useEffect(() => {
+    if (isMoreDocs && pageNumbers[pageNumbers.length - 1] === currentPage) {
+      setIsNextRecord(true);
+    }
+  }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
+
+  // `handlemicroapp` is used to open microapp
   const handlemicroapp = (item, url) => {
     localStorage.removeItem("rowlevel");
-    // const params = new URLSearchParams(url);
-    // let arr = [];
-    // for (let [key, value] of params.entries()) {
-    //   if (key === "remoteUrl") {
-    //     arr.push(
-    //       `${key}=${window.btoa(
-    //         window.location.origin + "/mfbuild/remoteEntry.js"
-    //       )}`
-    //     );
-    //   } else {
-    //     arr.push(`${key}=${value}`);
-    //   }
-    // }
-    // const remoteUrl = arr.join("&");
-    // console.log("arr", remoteUrl);
-
     navigate("/rpmf/" + url);
     localStorage.setItem("rowlevel", JSON.stringify(item));
     // localStorage.setItem("rowlevelMicro");
@@ -39,6 +60,17 @@ const ReportTable = ({ ReportName, List, actions }) => {
   const handlebtn = () => {
     console.log("clicked");
   };
+
+  // Get current list
+  const indexOfLastDoc = currentPage * docPerPage;
+  const indexOfFirstDoc = indexOfLastDoc - docPerPage;
+  // `currentLists` is total record render on current page
+  const currentLists = List.slice(indexOfFirstDoc, indexOfLastDoc);
+
+  // Change page
+  const paginateFront = () => setCurrentPage(currentPage + 1);
+  const paginateBack = () => setCurrentPage(currentPage - 1);
+
   return (
     <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
       <h2 className="text-[23px] font-light my-2">{ReportName}</h2>
@@ -60,7 +92,7 @@ const ReportTable = ({ ReportName, List, actions }) => {
         <tbody className="text-[12px]">
           {List?.length > 0 ? (
             <>
-              {List.map((item, index) => (
+              {currentLists.map((item, index) => (
                 <tr className="border-t-[1px]" key={index}>
                   <td className="px-4 py-2">{index + 1}</td>
                   <td className="px-4 py-2 font-semibold">{item?.Name} </td>
@@ -121,8 +153,46 @@ const ReportTable = ({ ReportName, List, actions }) => {
           )}
         </tbody>
       </table>
+      <div className="flex flex-wrap items-center gap-2 p-2 border-t-[1px]">
+        {List.length > 10 && (
+          <>
+            {currentPage > 1 && (
+              <button
+                onClick={() => paginateBack()}
+                className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none"
+              >
+                Prev
+              </button>
+            )}
+          </>
+        )}
+        {pageNumbers.map((x) => (
+          <button
+            key={x}
+            onClick={() => setCurrentPage(x)}
+            className=" bg-sky-400 text-white rounded px-3 py-2 focus:outline-none"
+          >
+            {x}
+          </button>
+        ))}
+        {isMoreDocs && (
+          <button className="text-black rounded px-1 py-2">...</button>
+        )}
+        {List.length > 10 && (
+          <>
+            {pageNumbers.includes(currentPage + 1) && (
+              <button
+                onClick={() => paginateFront()}
+                className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none"
+              >
+                Next
+              </button>
+            )}
+          </>
+        )}
+      </div>
       {List?.length <= 0 && (
-        <div className="flex flex-col items-center justify-center w-full bg-white roundedm py-4">
+        <div className="flex flex-col items-center justify-center w-full bg-white rounded py-4">
           <div className="w-[60px] h-[60px] overflow-hidden">
             <img className="w-full h-full object-contain" src={pad} alt="img" />
           </div>

apps/OpenSign/src/routes/Report.js

@@ -12,14 +12,37 @@ const Report = () => {
   const [isLoader, setIsLoader] = useState(true);
   const [reportName, setReportName] = useState("");
   const [actions, setActions] = useState([]);
+  const [isNextRecord, setIsNextRecord] = useState(false);
+  const [isMoreDocs, setIsMoreDocs] = useState(true);
+  const abortController = new AbortController();
+
+  // below useEffect is call when id param change
   useEffect(() => {
     setReportName("");
+    setList([]);
     getReportData();
+
+    // Function returned from useEffect is called on unmount
+    return () => {
+      setIsLoader(true);
+      setList([]);
+      setIsNextRecord(false);
+      // Here it'll abort the fetch
+      abortController.abort();
+    };
     // eslint-disable-next-line
   }, [id]);
 
-  const getReportData = async () => {
-    setIsLoader(true);
+  // below useEffect call when isNextRecord state is true and fetch next record
+  useEffect(() => {
+    if (isNextRecord) {
+      getReportData(List.length, 200);
+    }
+    // eslint-disable-next-line
+  }, [isNextRecord]);
+
+  const getReportData = async (skipUserRecord = 0, limit = 200) => {
+    // setIsLoader(true);
     const json = reportJson(id);
     if (json) {
       setActions(json.actions);
@@ -39,8 +62,11 @@ const Report = () => {
         "X-Parse-Session-Token": localStorage.getItem("accesstoken")
       };
       try {
-        const url = `${serverURL}?where=${strParams}&keys=${strKeys}&order=${orderBy}&include=AuditTrail.UserPtr`;
-        const res = await axios.get(url, { headers: headers });
+        const url = `${serverURL}?where=${strParams}&keys=${strKeys}&order=${orderBy}&skip=${skipUserRecord}&limit=${limit}&include=AuditTrail.UserPtr`;
+        const res = await axios.get(url, {
+          headers: headers,
+          signal: abortController.signal // is used to cancel fetch query
+        });
         if (id === "4Hhwbp482K") {
           const listData = res.data?.results.filter(
             (x) => x.Signers.length > 0
@@ -66,14 +92,35 @@ const Report = () => {
               }
             }
           }
-          setList(arr);
+          if (arr.length === 10) {
+            setIsMoreDocs(true);
+          } else {
+            setIsMoreDocs(false);
+          }
+          setList((prevRecord) =>
+            prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
+          );
         } else {
-          setList(res.data?.results);
+          if (res.data.results.length === 10) {
+            setIsMoreDocs(true);
+            console.log("here");
+          } else {
+            setIsMoreDocs(false);
+          }
+          setIsNextRecord(false);
+          setList((prevRecord) =>
+            prevRecord.length > 0
+              ? [...prevRecord, ...res.data.results]
+              : res.data.results
+          );
         }
         setIsLoader(false);
       } catch (err) {
-        console.log("err ", err);
-        setIsLoader(false);
+        const isCancel = axios.isCancel(err);
+        if (!isCancel) {
+          console.log("err ", err);
+          setIsLoader(false);
+        }
       }
     } else {
       setIsLoader(false);
@@ -106,6 +153,8 @@ const Report = () => {
               ReportName={reportName}
               List={List}
               actions={actions}
+              setIsNextRecord={setIsNextRecord}
+              isMoreDocs={isMoreDocs}
             />
           ) : (
             <div className="flex items-center justify-center h-screen w-full bg-white rounded">

apps/OpenSign/src/routes/Signup.js

@@ -251,7 +251,7 @@ const Signup = (props) => {
                                 element.pageType
                               );
                               setState({ loading: false });
-                              navigate("/login");
+                              navigate("/");
                             } else {
                               extendedInfo.forEach((x) => {
                                 if (x.TenantId) {