separated work requests component

client/src/App.jsx

@@ -16,6 +16,7 @@ import contracts from './contracts';
 import DAOArtifact from './assets/DAO.json';
 import work1Artifact from './assets/Work1.json';
 import AvailabilityStakes from './AvailabilityStakes';
+import WorkRequests from './WorkRequests';
 
 const updateList = (list, action) => {
   switch (action.type) {
@@ -48,8 +49,23 @@ function App() {
   const [availabilityStakes, dispatchAvailabilityStake] = useList();
   const [workRequests, dispatchWorkRequest] = useList();
 
+  const web3ProviderValue = useMemo(() => ({
+    provider,
+    DAO,
+    work1,
+    work1Price,
+    reputation,
+    setReputation,
+    account,
+    chainId,
+    availabilityStakes,
+    workRequests,
+  }), [
+    provider, DAO, work1, work1Price, reputation, setReputation, account, chainId,
+    availabilityStakes, workRequests,
+  ]);
+
   // In this effect, we initialize everything and add contract event listeners.
-  // TODO: Refactor -- make separate, functional components?
   useEffect(() => {
     if (!provider || !chainId || !account || balance === undefined) return;
     if (!contracts[chainId]) return;
@@ -328,47 +344,10 @@ function App() {
     });
   }, [DAO, account]);
 
-  const requestWork = useCallback(async () => {
-    const web3 = new Web3(provider);
-    const priceWei = BigInt(web3.utils.toWei(work1Price, 'ether'));
-    await work1.methods.requestWork().send({
-      from: account,
-      gas: 1000000,
-      value: priceWei,
-    });
-  }, [provider, work1, account, work1Price]);
-
-  const submitWorkEvidence = useCallback(async (requestIndex) => {
-    await work1.methods.submitWorkEvidence(requestIndex).send({
-      from: account,
-      gas: 1000000,
-    });
-  }, [work1, account]);
-
-  const submitWorkApproval = useCallback(async (requestIndex) => {
-    await work1.methods.submitWorkApproval(requestIndex, true).send({
-      from: account,
-      gas: 1000000,
-    });
-  }, [work1, account]);
-
-  const submitWorkDisapproval = useCallback(async (requestIndex) => {
-    await work1.methods.submitWorkApproval(requestIndex, false).send({
-      from: account,
-      gas: 1000000,
-    });
-  }, [work1, account]);
-
   /* -------------------------------------------------------------------------------- */
   /* --------------------------- END UI ACTIONS ------------------------------------- */
   /* -------------------------------------------------------------------------------- */
 
-  const web3ProviderValue = useMemo(() => ({
-    DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
-  }), [
-    DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
-  ]);
-
   return (
     <Web3Context.Provider value={web3ProviderValue}>
       {!connected && <Button onClick={() => connect()}>Connect</Button>}
@@ -517,67 +496,7 @@ function App() {
                   {`Price: ${work1Price} ETH`}
                 </div>
                 <AvailabilityStakes showActions={false} />
-                <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>
-                        <th>Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {workRequests.filter((x) => !!x).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>
-                          <td>
-                            {availabilityStakes.length > 0
-                          && availabilityStakes[Number(request.stakeIndex)]?.currentUserIsWorker()
-                          && Number(request.status) === 0 && (
-                          <Button onClick={() => submitWorkEvidence(request.id)}>
-                            Submit Work Evidence
-                          </Button>
-                            )}
-                            {request.currentUserIsCustomer()
-                          && Number(request.status) === 1 && (
-                            <>
-                              <Button onClick={() => submitWorkApproval(request.id)}>
-                                Submit Approval
-                              </Button>
-                              <Button onClick={() => submitWorkDisapproval(request.id)}>
-                                Submit Dispproval
-                              </Button>
-                            </>
-                            )}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                <WorkRequests />
               </div>
             </Tab>
             <Tab eventKey="worker" title="Worker">
@@ -586,6 +505,7 @@ function App() {
                 {`Price: ${work1Price} ETH`}
               </div>
               <AvailabilityStakes />
+              <WorkRequests />
             </Tab>
             <Tab eventKey="customer" title="Customer">
               <h2>Work Contract 1</h2>
@@ -593,6 +513,7 @@ function App() {
                 {`Price: ${work1Price} ETH`}
               </div>
               <AvailabilityStakes showActions={false} showAmount={false} onlyShowAvailable />
+              <WorkRequests showRequestWork />
             </Tab>
           </Tabs>
         </>

client/src/WorkRequests.jsx

@@ -0,0 +1,121 @@
+import { useCallback, useContext } from 'react';
+import { PropTypes } from 'prop-types';
+import Button from 'react-bootstrap/Button';
+
+import Web3 from 'web3';
+import Web3Context from './Web3Context';
+
+function WorkRequests({ showRequestWork }) {
+  const {
+    provider, work1, work1Price, workRequests, availabilityStakes, account,
+  } = useContext(Web3Context);
+
+  const requestWork = useCallback(async () => {
+    const web3 = new Web3(provider);
+    const priceWei = BigInt(web3.utils.toWei(work1Price, 'ether'));
+    await work1.methods.requestWork().send({
+      from: account,
+      gas: 1000000,
+      value: priceWei,
+    });
+  }, [provider, work1, account, work1Price]);
+
+  const submitWorkEvidence = useCallback(async (requestIndex) => {
+    await work1.methods.submitWorkEvidence(requestIndex).send({
+      from: account,
+      gas: 1000000,
+    });
+  }, [work1, account]);
+
+  const submitWorkApproval = useCallback(async (requestIndex) => {
+    await work1.methods.submitWorkApproval(requestIndex, true).send({
+      from: account,
+      gas: 1000000,
+    });
+  }, [work1, account]);
+
+  const submitWorkDisapproval = useCallback(async (requestIndex) => {
+    await work1.methods.submitWorkApproval(requestIndex, false).send({
+      from: account,
+      gas: 1000000,
+    });
+  }, [work1, account]);
+
+  return (
+    <>
+      {showRequestWork && (
+        <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>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {workRequests.filter((x) => !!x).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>
+                <td>
+                  {availabilityStakes.length > 0
+                          && availabilityStakes[Number(request.stakeIndex)]?.currentUserIsWorker()
+                          && Number(request.status) === 0 && (
+                          <Button onClick={() => submitWorkEvidence(request.id)}>
+                            Submit Work Evidence
+                          </Button>
+                  )}
+                  {request.currentUserIsCustomer()
+                          && Number(request.status) === 1 && (
+                            <>
+                              <Button onClick={() => submitWorkApproval(request.id)}>
+                                Submit Approval
+                              </Button>
+                              <Button onClick={() => submitWorkDisapproval(request.id)}>
+                                Submit Dispproval
+                              </Button>
+                            </>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+WorkRequests.propTypes = {
+  showRequestWork: PropTypes.bool,
+};
+
+WorkRequests.defaultProps = {
+  showRequestWork: false,
+};
+
+export default WorkRequests;