sortable proposals

src/App.tsx

@@ -19,7 +19,7 @@ import { VoteKind } from "@joystream/types/proposals";
 
 interface IProps {}
 
-const version = 0.1;
+const version = 0.2;
 
 const initialState = {
   blocks: [],

src/components/Proposals/Row.tsx

@@ -26,6 +26,7 @@ const ProposalRow = (props: {
   finalizedAt: number;
   startTime: number;
   description: string;
+  author: string;
   id: number;
   parameters: ProposalParameters;
   exec: boolean;
@@ -43,6 +44,7 @@ const ProposalRow = (props: {
     createdAt,
     description,
     finalizedAt,
+    author,
     id,
     title,
     type,
@@ -76,7 +78,7 @@ const ProposalRow = (props: {
   return (
     <tr key={id}>
       <td>{id}</td>
-
+      <td>{author}</td>
       <td className="text-right">
         <Posts posts={props.posts} />
         <OverlayTrigger
@@ -84,11 +86,10 @@ const ProposalRow = (props: {
           placement="right"
           overlay={<Tooltip id={String(id)}>{description}</Tooltip>}
         >
-          <a href={url}>
-            {title} ({type})
-          </a>
+          <a href={url}>{title}</a>
         </OverlayTrigger>
       </td>
+      <td>{type}</td>
 
       <OverlayTrigger
         placement="left"
@@ -111,7 +112,7 @@ const ProposalRow = (props: {
 
       <td className="text-right">{created}</td>
       <td className="text-left">
-        <VoteButton show={!finalized} url={url} />
+        {finalized ? finalized : <VoteButton show={true} url={url} />}
       </td>
     </tr>
   );

src/components/Proposals/VotesTooltip.tsx

@@ -12,7 +12,7 @@ const VotesTooltip = (props: {
   if (props.votes)
     votes = props.votes.filter((v) => (v.vote === `` ? false : true));
   if (!votes) return <div>Fetching votes..</div>;
-  if (!votes.length) return <div>No votes yet.</div>;
+  if (!votes.length) return <div>No votes</div>;
 
   return (
     <Table className="text-left text-light">

src/components/Proposals/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Button, Table } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { Member, ProposalDetail, ProposalPost } from "../../types";
 import Loading from "..//Loading";
-import Row from "./Row";
+import ProposalTable from "./ProposalTable";
 
 const Proposals = (props: {
   now: number;
@@ -53,35 +53,15 @@ const Proposals = (props: {
         </Button>
       </Link>
       <h1>Joystream Proposals</h1>
-      <Table>
-        <thead>
-          <tr className="bg-dark text-light font-weight-bold">
-            <td>ID</td>
-            <td className="text-right">Description</td>
-            <td>Votes</td>
-            <td>
-              Voting Duration
-              <br />
-              Average: {avgDays ? `${avgDays}d` : ""}{" "}
-              {avgHours ? `${avgHours}h` : ""}
-            </td>
-            <td className="text-right">Created</td>
-            <td className="text-left">Finalized</td>
-          </tr>
-        </thead>
-        <tbody>
-          {proposals.map((p) => (
-            <Row
-              key={p.id}
-              {...p}
-              block={block}
-              members={members}
-              startTime={startTime}
-              posts={proposalPosts.filter((post) => post.threadId === p.id)}
-            />
-          ))}
-        </tbody>
-      </Table>
+      <ProposalTable
+        avgDays={avgDays}
+        avgHours={avgHours}
+        block={block}
+        members={members}
+        proposals={proposals}
+        proposalPosts={proposalPosts}
+        startTime={startTime}
+      />
     </div>
   );
 };

src/lib/getters.ts

@@ -154,6 +154,7 @@ export const proposalDetail = async (
     description,
     votes: votingResults,
     type,
+    author
   };
 };
 

src/types.ts

@@ -70,6 +70,7 @@ export interface ProposalDetail {
   votes: VotingResults;
   type: string;
   votesByMemberId?: Vote[];
+  author: string;
 }
 
 export interface Vote {