UI for work requests

client/src/App.jsx

@@ -34,6 +34,7 @@ function App() {
   const [validationPools, setValidationPools] = useState([]);
   const stakedPools = useRef([]);
   const [availabilityStakes, setAvailabilityStakes] = useState([]);
+  const [workRequests, setWorkRequests] = useState([]);
 
   // const watchReputationToken = useCallback(async () => {
   //   await provider.request({
@@ -47,7 +48,7 @@ function App() {
   //   });
   // }, [provider]);
 
-  const getStatus = (pool) => {
+  const getPoolStatus = (pool) => {
     if (pool.resolved) {
       return pool.outcome ? 'Accepted' : 'Rejected';
     }
@@ -55,6 +56,21 @@ function App() {
     return new Date() < endDate ? 'In Progress' : 'Ready to Evaluate';
   };
 
+  const getRequestStatus = (request) => {
+    switch (Number(request.status)) {
+      case 0:
+        return 'Requested';
+      case 1:
+        return 'Evidence Submitted';
+      case 2:
+        return 'Approval Submitted';
+      case 3:
+        return 'Complete';
+      default:
+        return 'Unknown';
+    }
+  };
+
   // In this effect, we initialize everything and add contract event listeners.
   // TODO: Refactor -- make separate, functional components?
   useEffect(() => {
@@ -66,7 +82,6 @@ function App() {
 
     const fetchPrice = async () => {
       const fetchedPrice = await work1Contract.methods.price().call();
-      console.log('fetchedPrice', fetchedPrice);
       setWork1Price(web3.utils.fromWei(fetchedPrice, 'ether'));
     };
 
@@ -111,7 +126,7 @@ function App() {
       }
       const pools = (await Promise.all(promises)).map((p) => {
         const pool = p;
-        pool.status = getStatus(pool);
+        pool.status = getPoolStatus(pool);
         const timeRemaining = new Date(Number(pool.endTime) * 1000) - new Date();
         if (timeRemaining > 0 && !pool.resolved && reputation.current
           && !stakedPools.current.includes(pool.id)) {
@@ -155,11 +170,29 @@ function App() {
       setAvailabilityStakes(fetchedStakes);
     };
 
+    const fetchWorkRequests = async () => {
+      const count = await work1Contract.methods.requestCount().call();
+      const promises = [];
+      for (let i = 0; i < count; i += 1) {
+        promises.push(work1Contract.methods.requests(i).call());
+      }
+      const fetchedRequests = (await Promise.all(promises)).map((x, index) => {
+        Object.assign(x, {
+          id: index,
+          statusString: getRequestStatus(x),
+          feeEther: web3.utils.fromWei(x.fee, 'ether'),
+        });
+        return x;
+      });
+      setWorkRequests(fetchedRequests);
+    };
+
     fetchPrice();
     fetchReputation();
     fetchPosts();
     fetchValidationPools();
     fetchAvailabilityStakes();
+    fetchWorkRequests();
 
     setWork1(work1Contract);
     setDAO(DAOContract);
@@ -375,34 +408,72 @@ function App() {
               {' '}
               {availabilityStakes.length}
             </div>
-            <table className="table">
-              <thead>
-                <tr>
-                  <th>ID</th>
-                  <th>Worker</th>
-                  <th>Amount</th>
-                  <th>End Time</th>
-                  <th>Assigned</th>
-                  <th>Reclaimed</th>
-                </tr>
-              </thead>
-              <tbody>
-                {availabilityStakes.map((stake) => (
-                  <tr key={stake.id}>
-                    <td>{stake.id.toString()}</td>
-                    <td>{stake.worker.toString()}</td>
-                    <td>{stake.amount.toString()}</td>
-                    <td>{new Date(Number(stake.endTime) * 1000).toLocaleString()}</td>
-                    <td>{stake.assigned.toString()}</td>
-                    <td>{stake.reclaimed.toString()}</td>
+            <div>
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Worker</th>
+                    <th>Amount</th>
+                    <th>End Time</th>
+                    <th>Assigned</th>
+                    <th>Reclaimed</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
-
+                </thead>
+                <tbody>
+                  {availabilityStakes.map((stake) => (
+                    <tr key={stake.id}>
+                      <td>{stake.id.toString()}</td>
+                      <td>{stake.worker.toString()}</td>
+                      <td>{stake.amount.toString()}</td>
+                      <td>{new Date(Number(stake.endTime) * 1000).toLocaleString()}</td>
+                      <td>{stake.assigned.toString()}</td>
+                      <td>{stake.reclaimed.toString()}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
             <div>
               <Button onClick={() => requestWork()}>Request Work</Button>
             </div>
+            <div>
+              Work Request Count:
+              {' '}
+              {workRequests.length}
+            </div>
+            <div>
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Customer</th>
+                    <th>Fee</th>
+                    <th>Status</th>
+                    <th>Stake ID</th>
+                    <th>Approval</th>
+                    <th>Pool ID</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {workRequests.map((request) => (
+                    <tr key={request.id}>
+                      <td>{request.id.toString()}</td>
+                      <td>{request.customer.toString()}</td>
+                      <td>
+                        {request.feeEther}
+                        {' '}
+                        ETH
+                      </td>
+                      <td>{request.statusString}</td>
+                      <td>{request.stakeIndex.toString()}</td>
+                      <td>{request.approval.toString()}</td>
+                      <td>{request.poolIndex.toString()}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
         </>
       )}