Proposal

src/components/Proposals/Proposal.tsx

@@ -1,24 +1,64 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import Markdown from "react-markdown";
 import gfm from "remark-gfm";
-import htmr from "htmr";
+import { ChevronLeft, ChevronRight } from "react-feather";
 
+//import Navigation from "./Navigation";
 import { VotesTooltip } from "..";
 import { ProposalDetail } from "../../types";
 import { domain } from "../../config";
 
+const Navigation = (props: { id: number; proposals: number }) => {
+  const { id, proposals } = props;
+
+  return (
+    <span>
+      {id > 1 ? (
+        <Link to={`/proposals/${id - 1}`}>
+          <ChevronLeft fill="white" stroke="white" />
+        </Link>
+      ) : (
+        <ChevronLeft />
+      )}
+      {proposals > id + 1 ? (
+        <Link to={`/proposals/${id + 1}`}>
+          <ChevronRight fill="white" stroke="white" />
+        </Link>
+      ) : (
+        <ChevronRight />
+      )}
+    </span>
+  );
+};
+
 const Proposal = (props: {
   match: { params: { id: string } };
   proposals: ProposalDetail[];
-  history: any;
 }) => {
   const { match, proposals } = props;
   const id = parseInt(match.params.id);
   const proposal = proposals.find((p) => p && p.id === id);
-  if (!proposal) return <div>Proposal not found</div>;
-  const { description, title, message, votes, votesByAccount } = proposal;
+  if (!proposal)
+    return (
+      <Link to={`/proposals/${proposals.length}`}>
+        Proposal {proposals.length}
+      </Link>
+    );
+  const {
+    author,
+    description,
+    title,
+    message,
+    result,
+    stage,
+    votes,
+  } = proposal;
   return (
     <div>
+      <div className="text-center p-1 m-1">
+        <Navigation id={id} proposals={proposals.length} />
+      </div>
       <div className="d-flex flex-row">
         <div className="box col-6 ml-3">
           <h3>{title}</h3>
@@ -31,15 +71,20 @@ const Proposal = (props: {
         </div>
         <div className="col-lg-3 d-flex flex-column">
           <div className="box text-left">
-            <div>{htmr(message.replaceAll(`\n`, "<br/>"))}</div>
             <div>
-              <a href={`${domain}/#/proposals/${id}`}>more</a>
+              Title: <a href={`${domain}/#/proposals/${id}`}>{title}</a>
+            </div>
+            <div>
+              Author:{" "}
+              <Link to={`/members/${author.handle}`}>{author.handle}</Link>
             </div>
+            <div>Stage: {stage}</div>
+            <div>Result: {result}</div>
           </div>
 
           <div className="box">
             <h3>Votes</h3>
-            <VotesTooltip votes={votes} voteByAccounts={votesByAccount} />
+            <VotesTooltip votes={votes} />
           </div>
         </div>
       </div>

src/components/Proposals/Row.tsx

@@ -1,6 +1,7 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { Badge, Button } from "react-bootstrap";
-import { Link, makeStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 import moment from "moment";
 
 import { InfoTooltip, MemberOverlay, VoteNowButton, VotesBubbles } from "..";
@@ -138,14 +139,14 @@ const ProposalRow = (props: {
             }
           >
             <div>
-              <Link className={classes.link} href={`/members/${author.handle}`}>
+              <Link className={classes.link} to={`/members/${author.handle}`}>
                 {author.handle}
               </Link>
             </div>
           </InfoTooltip>
           <InfoTooltip placement="bottom" key={id} title={description}>
             <b>
-              <Link className={classes.link} href={`/proposals/${id}`}>
+              <Link className={classes.link} to={`/proposals/${id}`}>
                 {title}
               </Link>
               <Posts posts={proposalPosts} />

src/components/Votes.tsx

@@ -84,24 +84,24 @@ export const VotesBubbles = (props: { detailed?: boolean; votes: Vote[] }) => {
 // https://stackoverflow.com/questions/59969756/not-assignable-to-type-intrinsicattributes-intrinsicclassattributes-react-js
 
 export const VotesTooltip = (props: any) => {
-  const { votesByAccount } = props;
-  if (!votesByAccount)
+  const { votes } = props;
+  if (!votes)
     return (
       <div>
-        Fetching votes..
-        <VotesBubbles detailed={true} votes={props.votes} />
+        <VotesBubbles detailed={true} votes={votes} />
       </div>
     );
 
-  const votes = votesByAccount.filter((v: Vote) =>
-    v.vote === `` ? false : true
-  );
-  if (!votes.length) return <div>No votes were cast yet.</div>;
+  if (!votes.length) return <div>No votes were cast.</div>;
 
   return (
     <div className="text-left text-light">
       {votes.map((vote: Vote) => (
-        <VoteButton key={vote.handle} {...vote} />
+        <VoteButton
+          key={vote.member.handle}
+          handle={vote.member.handle}
+          vote={vote.vote}
+        />
       ))}
     </div>
   );