Add feature to view proposal content

client/src/App.jsx

@@ -53,8 +53,9 @@ function App() {
     setReputation,
     account,
     chainId,
+    posts,
   }), [
-    provider, DAO, work1, onboarding, reputation, setReputation, account, chainId]);
+    provider, DAO, work1, onboarding, reputation, setReputation, account, chainId, posts]);
 
   // In this effect, we initialize everything and add contract event listeners.
   useEffect(() => {

client/src/components/Proposals.jsx

@@ -10,6 +10,8 @@ import Web3Context from '../contexts/Web3Context';
 import ProposalsArtifact from '../assets/Proposals.json';
 import { getContractAddressByChainId } from '../utils/contract-config';
 import AddPostModal from './posts/AddPostModal';
+import ViewPostModal from './posts/ViewPostModal';
+import Post from '../utils/Post';
 
 const getProposalStatus = (proposal) => {
   switch (Number(proposal.stage)) {
@@ -25,11 +27,13 @@ const getProposalStatus = (proposal) => {
 
 function Proposals() {
   const {
-    provider, chainId, account, reputation,
+    provider, chainId, account, reputation, posts,
   } = useContext(Web3Context);
   const [proposals, dispatchProposal] = useList();
   const proposalsContract = useRef();
   const [showAddProposal, setShowAddProposal] = useState(false);
+  const [showViewProposal, setShowViewProposal] = useState(false);
+  const [viewPost, setViewPost] = useState(false);
   const [durations, setDurations] = useState([]);
 
   const fetchProposal = useCallback(async (proposalIndex) => {
@@ -91,6 +95,13 @@ function Proposals() {
     setShowAddProposal(true);
   };
 
+  const handleShowViewProposal = useCallback(async (proposal) => {
+    const { postIndex } = proposal;
+    const post = await Post.read(posts[postIndex].contentId);
+    setViewPost(post);
+    setShowViewProposal(true);
+  }, [posts, setViewPost, setShowViewProposal]);
+
   const onSubmitProposal = useCallback(async (post) => {
     // TODO: Make referenda durations configurable
     await proposalsContract.current.methods.propose(
@@ -158,15 +169,10 @@ function Proposals() {
         onSubmit={onSubmitProposal}
       />
 
-      <AddPostModal
-        title="New Proposal: 20/30/40s"
-        show={showAddProposal}
-        setShow={setShowAddProposal}
-        onSubmit={onSubmitProposal}
-      />
+      <ViewPostModal title="Proposal" show={showViewProposal} setShow={setShowViewProposal} post={viewPost} />
 
       <h2>Proposals</h2>
-      <div>
+      <div className="pb-2">
         <Stack direction="horizontal">
           <Button onClick={() => handleShowAddProposal(20, 30, 40)}>New Proposal: 20/30/40s</Button>
           <Button onClick={() => handleShowAddProposal(60, 60, 60)}>New Proposal: 1/1/1m</Button>
@@ -200,6 +206,8 @@ function Proposals() {
                   </Stack>
                 </td>
                 <td>
+                  <Button onClick={() => handleShowViewProposal(proposal)}>View Proposal</Button>
+                  {' '}
                   {proposal.stage === 0n && (
                     <>
                       <Button onClick={() => handleAttest(proposal.id)}>Attest</Button>