|
@@ -1,24 +1,64 @@
|
|
import React from "react";
|
|
import React from "react";
|
|
|
|
+import { Link } from "react-router-dom";
|
|
import Markdown from "react-markdown";
|
|
import Markdown from "react-markdown";
|
|
import gfm from "remark-gfm";
|
|
import gfm from "remark-gfm";
|
|
-import htmr from "htmr";
|
|
|
|
|
|
+import { ChevronLeft, ChevronRight } from "react-feather";
|
|
|
|
|
|
|
|
+//import Navigation from "./Navigation";
|
|
import { VotesTooltip } from "..";
|
|
import { VotesTooltip } from "..";
|
|
import { ProposalDetail } from "../../types";
|
|
import { ProposalDetail } from "../../types";
|
|
import { domain } from "../../config";
|
|
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: {
|
|
const Proposal = (props: {
|
|
match: { params: { id: string } };
|
|
match: { params: { id: string } };
|
|
proposals: ProposalDetail[];
|
|
proposals: ProposalDetail[];
|
|
- history: any;
|
|
|
|
}) => {
|
|
}) => {
|
|
const { match, proposals } = props;
|
|
const { match, proposals } = props;
|
|
const id = parseInt(match.params.id);
|
|
const id = parseInt(match.params.id);
|
|
const proposal = proposals.find((p) => p && p.id === 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 (
|
|
return (
|
|
<div>
|
|
<div>
|
|
|
|
+ <div className="text-center p-1 m-1">
|
|
|
|
+ <Navigation id={id} proposals={proposals.length} />
|
|
|
|
+ </div>
|
|
<div className="d-flex flex-row">
|
|
<div className="d-flex flex-row">
|
|
<div className="box col-6 ml-3">
|
|
<div className="box col-6 ml-3">
|
|
<h3>{title}</h3>
|
|
<h3>{title}</h3>
|
|
@@ -31,15 +71,20 @@ const Proposal = (props: {
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 d-flex flex-column">
|
|
<div className="col-lg-3 d-flex flex-column">
|
|
<div className="box text-left">
|
|
<div className="box text-left">
|
|
- <div>{htmr(message.replaceAll(`\n`, "<br/>"))}</div>
|
|
|
|
<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>
|
|
|
|
+ <div>Stage: {stage}</div>
|
|
|
|
+ <div>Result: {result}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="box">
|
|
<div className="box">
|
|
<h3>Votes</h3>
|
|
<h3>Votes</h3>
|
|
- <VotesTooltip votes={votes} voteByAccounts={votesByAccount} />
|
|
|
|
|
|
+ <VotesTooltip votes={votes} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|