filter by author

src/components/Proposals/ProposalTable.tsx

@@ -14,6 +14,7 @@ interface IProps {
   startTime: number;
 }
 interface IState {
+  author: string;
   key: any;
   asc: boolean;
   hidden: string[];
@@ -22,7 +23,9 @@ interface IState {
 class ProposalTable extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
-    this.state = { key: "id", asc: false, hidden: [] };
+    this.state = { key: "id", asc: false, hidden: [], author: "All" };
+    this.selectAuthor = this.selectAuthor.bind(this);
+    this.toggleHide = this.toggleHide.bind(this);
   }
 
   setKey(key: string) {
@@ -38,12 +41,17 @@ class ProposalTable extends React.Component<IProps, IState> {
       : this.state.hidden.concat(type);
     this.setState({ hidden });
   }
+  selectAuthor(event: any) {
+    this.setState({ author: event.target.value });
+  }
 
   filterProposals() {
     const proposals = this.props.proposals.filter(
       (p) => !this.state.hidden.find((h) => h === p.type)
     );
-    return proposals;
+    const { author } = this.state;
+    if (author === "All") return proposals;
+    return proposals.filter((p) => p.author === author);
   }
   sortProposals(list: ProposalDetail[]) {
     const { asc, key } = this.state;
@@ -58,20 +66,35 @@ class ProposalTable extends React.Component<IProps, IState> {
 
   render() {
     const { avgDays, avgHours, block, members, proposalPosts } = this.props;
-    const { hidden } = this.state;
+    const { author, hidden } = this.state;
 
     // proposal types
     let types: { [key: string]: number } = {};
     this.props.proposals.forEach((p) => types[p.type]++);
 
+    // authors
+    let authors: { [key: string]: number } = {};
+    this.props.proposals.forEach((p) => authors[p.author]++);
+
     const proposals = this.sortProposals(this.filterProposals());
 
+    const approved = proposals.filter((p) => p.result === "Approved").length;
+
     return (
       <Table>
         <thead>
           <tr className="bg-dark text-light font-weight-bold">
             <td onClick={() => this.setKey("id")}>ID</td>
-            <td onClick={() => this.setKey("author")}>Author</td>
+            <td onClick={() => this.setKey("author")}>
+              Author
+              <br />
+              <select value={author} onChange={this.selectAuthor}>
+                <option>All</option>
+                {Object.keys(authors).map((author: string) => (
+                  <option key={author}>{author}</option>
+                ))}
+              </select>
+            </td>
             <td
               onClick={() => this.setKey("description")}
               className="text-right"
@@ -79,7 +102,11 @@ class ProposalTable extends React.Component<IProps, IState> {
               Description
             </td>
             <td onClick={() => this.setKey("type")}>Type</td>
-            <td>Votes</td>
+            <td>
+              Votes
+              <br />
+              {approved}/{proposals.length}
+            </td>
             <td>
               Voting Duration
               <br />

src/components/Proposals/Row.tsx

@@ -79,8 +79,10 @@ const ProposalRow = (props: {
     <tr key={id}>
       <td>{id}</td>
       <td>{author}</td>
-      <td className="text-right">
-        <Posts posts={props.posts} />
+      <td className="text-left">
+        <div className="float-right">
+          <Posts posts={props.posts} />
+        </div>
         <OverlayTrigger
           key={id}
           placement="right"

src/components/Proposals/index.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { Button } from "react-bootstrap";
-import { Link } from "react-router-dom";
 import { Member, ProposalDetail, ProposalPost } from "../../types";
 import Loading from "..//Loading";
 import ProposalTable from "./ProposalTable";
+import Back from "../Back";
 
 const Proposals = (props: {
   now: number;
@@ -46,12 +45,8 @@ const Proposals = (props: {
 
   // - list all proposals
   return (
-    <div className="bg-light text-center">
-      <Link to={`/`}>
-        <Button variant="secondary" className="p-1 m-3">
-          back
-        </Button>
-      </Link>
+    <div className="w-100 h-100 overflow-hidden bg-light text-center">
+      <Back />
       <h1>Joystream Proposals</h1>
       <ProposalTable
         avgDays={avgDays}

src/components/Tokenomics/Navigation.tsx

@@ -1,15 +1,12 @@
 import React from "react";
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import Back from "../Back";
 
 const Navigation = () => {
   return (
     <div className="d-flex flex-row justify-content-center">
-      <Link to={`/`}>
-        <Button variant="secondary" className="p-1 m-1">
-          Back
-        </Button>
-      </Link>
+      <Back />
 
       <Link to={`/councils`}>
         <Button variant="secondary" className="p-1 m-1">

src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Back } from "./Back";
 export { default as Routes } from "./Routes";
 export { default as Council } from "./Council";
 export { default as Councils } from "./Councils";

src/index.css

@@ -71,13 +71,6 @@ table td {
   right: 10px;
   bottom: 0px;
 }
-
-.proposals {
-  position: fixed;
-  right: 10px;
-  top: 10px;
-}
-
 .user {
   min-width: 75px;
 }