Add option to view work request

client/src/App.jsx

@@ -12,7 +12,6 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Stack from 'react-bootstrap/Stack';
-import Modal from 'react-bootstrap/Modal';
 
 import './App.css';
 
@@ -24,6 +23,7 @@ import Work1Artifact from './assets/Work1.json';
 import OnboardingArtifact from './assets/Onboarding.json';
 import WorkContract from './components/WorkContract';
 import AddPostModal from './components/AddPostModal';
+import ViewPostModal from './components/ViewPostModal';
 
 function App() {
   const {
@@ -250,7 +250,7 @@ function App() {
   }, [DAO, account]);
 
   const handleShowAddPost = () => setShowAddPost(true);
-  const handleCloseViewPost = () => setShowViewPost(false);
+
   const handleShowViewPost = async (post) => {
     const res = await axios.get(`/api/read/${post.contentId}`);
     const { data } = res;
@@ -275,21 +275,7 @@ function App() {
 
       <AddPostModal show={showAddPost} setShow={setShowAddPost} postToBlockchain />
 
-      <Modal show={showViewPost} onHide={handleCloseViewPost}>
-        <Modal.Header closeButton>
-          <Modal.Title>View Post</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <p className="post-content">
-            {viewPostContent}
-          </p>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={handleCloseViewPost}>
-            Close
-          </Button>
-        </Modal.Footer>
-      </Modal>
+      <ViewPostModal show={showViewPost} setShow={setShowViewPost} content={viewPostContent} />
 
       {!connected && <Button onClick={() => connect()}>Connect</Button>}
 

client/src/components/ViewPostModal.jsx

@@ -0,0 +1,40 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import PropTypes from 'prop-types';
+
+function ViewPostModal({
+  show, setShow, title, content,
+}) {
+  const handleClose = () => setShow(false);
+
+  return (
+    <Modal show={show} onHide={handleClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>{title}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p className="post-content">
+          {content}
+        </p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+ViewPostModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  setShow: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  content: PropTypes.string.isRequired,
+};
+
+ViewPostModal.defaultProps = {
+  title: 'View Post',
+};
+
+export default ViewPostModal;

client/src/components/WorkRequests.jsx

@@ -2,6 +2,7 @@ import {
   useCallback, useContext, useEffect, useState,
 } from 'react';
 import { PropTypes } from 'prop-types';
+import axios from 'axios';
 import Button from 'react-bootstrap/Button';
 
 import Web3 from 'web3';
@@ -9,6 +10,7 @@ import Web3Context from '../contexts/Web3Context';
 import useList from '../utils/List';
 import WorkContractContext from '../contexts/WorkContractContext';
 import AddPostModal from './AddPostModal';
+import ViewPostModal from './ViewPostModal';
 
 const getRequestStatus = (request) => {
   switch (Number(request.status)) {
@@ -31,9 +33,11 @@ function WorkRequests({
   const { workContract, availabilityStakes } = useContext(WorkContractContext);
   const [workRequests, dispatchWorkRequest] = useList();
   const [price, setPrice] = useState();
-  const [showWorkRequestModal, setShowWorkRequestModal] = useState(false);
-  const [showWorkEvidenceModal, setShowWorkEvidenceModal] = useState(false);
+  const [showRequestModal, setShowRequestModal] = useState(false);
+  const [showEvidenceModal, setShowEvidenceModal] = useState(false);
   const [currentRequestId, setCurrentRequestId] = useState();
+  const [showViewRequestModal, setShowViewRequestModal] = useState(false);
+  const [viewRequestContent, setViewRequestContent] = useState('');
 
   const {
     provider, account,
@@ -104,14 +108,14 @@ function WorkRequests({
 
   const handleShowWorkRequest = (requestId) => {
     setCurrentRequestId(requestId);
-    setShowWorkRequestModal(true);
+    setShowRequestModal(true);
   };
   const handleShowWorkEvidence = (requestId) => {
     setCurrentRequestId(requestId);
-    setShowWorkEvidenceModal(true);
+    setShowEvidenceModal(true);
   };
 
-  const onSubmitWorkRequest = useCallback(async (hash) => {
+  const onSubmitRequest = useCallback(async (hash) => {
     // TODO: Accept input, upload to API, include hash in contract call
     const web3 = new Web3(provider);
     const priceWei = BigInt(web3.utils.toWei(price, 'ether'));
@@ -122,17 +126,27 @@ function WorkRequests({
     });
   }, [provider, workContract, account, price]);
 
-  const onSubmitWorkEvidence = useCallback(async (hash) => {
+  const onSubmitEvidence = useCallback(async (hash) => {
     await workContract.methods.submitWorkEvidence(currentRequestId, hash).send({
       from: account,
       gas: 1000000,
     });
   }, [workContract, account, currentRequestId]);
 
+  const handleShowViewRequestModal = async (request) => {
+    const res = await axios.get(`/api/read/${request.requestContentId}`);
+    const { data } = res;
+    // TODO: Verify base64url(sha256(JSON.stringify(data))) = contentId
+    // TODO: Verify data.author = post.author
+    setViewRequestContent(data.content);
+    setShowViewRequestModal(true);
+  };
+
   return (
     <>
-      <AddPostModal title="Work Request" show={showWorkRequestModal} setShow={setShowWorkRequestModal} onSubmit={onSubmitWorkRequest} />
-      <AddPostModal title="Work Evidence" show={showWorkEvidenceModal} setShow={setShowWorkEvidenceModal} onSubmit={onSubmitWorkEvidence} />
+      <AddPostModal title="Work Request" show={showRequestModal} setShow={setShowRequestModal} onSubmit={onSubmitRequest} />
+      <AddPostModal title="Work Evidence" show={showEvidenceModal} setShow={setShowEvidenceModal} onSubmit={onSubmitEvidence} />
+      <ViewPostModal title="Work Request" show={showViewRequestModal} setShow={setShowViewRequestModal} content={viewRequestContent} />
       <div>
         {`Price: ${price} ETH`}
       </div>
@@ -174,6 +188,9 @@ function WorkRequests({
                 <td>{request.stakeIndex.toString()}</td>
                 <td>{request.approval.toString()}</td>
                 <td>
+                  <Button onClick={() => handleShowViewRequestModal(request)}>
+                    View Request
+                  </Button>
                   {availabilityStakes.length > 0
                     && availabilityStakes[Number(request.stakeIndex)]?.currentUserIsWorker()
                     && Number(request.status) === 0 && (