feature(ui): /myRecentJobs page completed

package.json

@@ -9,6 +9,7 @@
     "array-to-tree": "^3.3.2",
     "bootstrap": "4.6.0",
     "js-cookie": "^2.2.1",
+    "mdbreact": "^5.2.0",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.1",
     "react": "^17.0.2",

src/pages/Jobs/MyRecentJobs/index.jsx

@@ -1,5 +1,6 @@
 /*
- Copyright (C) 2021 Shruti Agarwal ([email protected])
+ Copyright (C) 2021 Shruti Agarwal ([email protected]),
+ Copyright (C) 2022 Soham Banerjee ([email protected])
 
  SPDX-License-Identifier: GPL-2.0
 
@@ -16,20 +17,115 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 // Title
 import Title from "components/Title";
 
+// Required functions for API and Error handling
+import { getAllJobApi } from "api/jobs";
+import { handleError } from "shared/helper";
+import { initialMessage } from "constants/constants";
+import messages from "constants/messages";
+import { Alert } from "components/Widgets";
+import { MDBDataTable } from "mdbreact";
+import { getUserSelf } from "services/users";
+import "./styles.css";
+
 const MyRecentJobs = () => {
+  // Setting the browse data to the table
+  const [jobsDataList, setJobsDataList] = useState();
+
+  // State Variables for handling Error Boundaries
+  const [message, setMessage] = useState(initialMessage);
+  const [showMessage, setShowMessage] = useState(false);
+
+  function Dateformatter(date) {
+    const options = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    };
+    const d = new Date(date);
+    return d.toLocaleDateString("en-US", options);
+  }
+
+  useEffect(() => {
+    const arr = [];
+    setMessage({
+      type: "success",
+      text: messages.loading,
+    });
+    setShowMessage(true);
+
+    getAllJobApi()
+      .then((res) => {
+        // Checking the id of user with the userId from the jobs list
+        const uid = getUserSelf();
+        uid.then(function getUid(result) {
+          const usrId = result.id;
+          let k = 0;
+          for (let i = 0; i < res.length; i++) {
+            // Formatting the date from time stamp to readable date
+            res[i].queueDate = Dateformatter(res[i].queueDate);
+            if (res[i].userId === `${usrId}`) {
+              arr[k] = res[i];
+              k += 1;
+            }
+          }
+          setJobsDataList(arr);
+        });
+
+        setShowMessage(false);
+      })
+      .catch((error) => {
+        handleError(error, setMessage);
+      });
+  }, []);
+
+  // Data formatted for the data-table with respective coloumns
+  const data = {
+    columns: [
+      {
+        label: "Job Name ",
+        field: "name",
+        sort: "asc",
+        width: 150,
+      },
+      {
+        label: "Queue Date",
+        field: `queueDate`,
+        sort: "asc",
+        width: 270,
+      },
+      {
+        label: "Status",
+        field: "status",
+        sort: "asc",
+        width: 200,
+      },
+    ],
+    rows: jobsDataList,
+  };
+
   return (
     <>
       <Title title="My Recent Jobs" />
-      <div className="main-container my-3">
+      <div className="main-container my-3 text-center">
+        {showMessage && (
+          <Alert
+            type={message.type}
+            setShow={setShowMessage}
+            message={message.text}
+          />
+        )}
         <div className="row">
-          <div className="col-lg-8 col-md-12 col-sm-12 col-12">
-            <h1 className="font-size-main-heading">My Recent Jobs</h1>
-            <br />
+          <div className="col-md-3 col-lg-2">
+            <h2 className="font-size-sub-heading">My Jobs</h2>
+          </div>
+          <div className="col-md-9 col-lg-10">
+            <MDBDataTable className="reactTable" striped bordered data={data} />
           </div>
         </div>
       </div>

src/pages/Jobs/MyRecentJobs/styles.css

@@ -0,0 +1,4 @@
+.reactTable tr {
+  color: white;
+  mix-blend-mode: difference;
+}