Proposals: author overlay

src/App.tsx

@@ -343,6 +343,7 @@ class App extends React.Component<IProps, IState> {
     proposals[id] = proposal;
     this.save("proposals", proposals);
     this.fetchVotesPerProposal(api, id);
+    this.fetchMember(api, proposal.authorId);
   }
 
   async fetchVotesPerProposal(api: Api, proposalId: number) {

src/components/Members/MemberOverlay.tsx

@@ -14,7 +14,7 @@ const MemberBox = (props: {
 }) => {
   const { councils, handle, members, posts, proposals, startTime } = props;
   const member = members.find((m) => m.handle === handle);
-  if (!member) return <NotFound />;
+  if (!member) return <NotFound nolink={true} />;
 
   const council = councils[councils.length - 1];
   if (!council) return <div>Loading..</div>;

src/components/Members/NotFound.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const NotFound = () => {
+const NotFound = (props: { nolink?: boolean }) => {
   return (
     <div className="box">
       <div> Member not found</div>
-      <Link to={`/members`}>Back</Link>
+      {props.nolink || <Link to={`/members`}>Back</Link>}
     </div>
   );
 };

src/components/Proposals/ProposalTable.tsx

@@ -3,7 +3,7 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import Row from "./Row";
 import NavBar from "./NavBar";
 import Types from "./Types";
-import { Member, ProposalDetail, ProposalPost } from "../../types";
+import { Member, Post, ProposalDetail, ProposalPost } from "../../types";
 
 interface IProps {
   block: number;
@@ -11,6 +11,10 @@ interface IProps {
   proposals: ProposalDetail[];
   proposalPosts: ProposalPost[];
   startTime: number;
+
+  // author overlay
+  councils: number[][];
+  posts: Post[];
 }
 interface IState {
   author: string;
@@ -74,7 +78,7 @@ class ProposalTable extends React.Component<IProps, IState> {
   }
 
   render() {
-    const { block, members, proposalPosts } = this.props;
+    const { block, councils, members, posts, proposalPosts } = this.props;
     const { author, hidden } = this.state;
 
     // proposal types
@@ -167,6 +171,9 @@ class ProposalTable extends React.Component<IProps, IState> {
               members={members}
               startTime={this.props.startTime}
               posts={proposalPosts.filter((post) => post.threadId === p.id)}
+              councils={councils}
+              forumPosts={posts}
+              proposals={this.props.proposals}
             />
           ))}
         </div>

src/components/Proposals/Row.tsx

@@ -1,13 +1,17 @@
 import React from "react";
-import { Member, ProposalPost, Vote } from "../../types";
-import { ProposalParameters, VotingResults } from "@joystream/types/proposals";
+import { Link } from "react-router-dom";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
+
+import MemberOverlay from "../Members/MemberOverlay";
 import Bar from "./Bar";
 import Posts from "./Posts";
 import Votes from "./VotesTooltip";
 import VoteButton from "./VoteButton";
 import moment from "moment";
 
+import { Member, Post, ProposalDetail, ProposalPost, Vote } from "../../types";
+import { ProposalParameters, VotingResults } from "@joystream/types/proposals";
+
 const formatTime = (time: number) => {
   return moment(time).format("DD/MM/YYYY HH:mm");
 };
@@ -38,6 +42,11 @@ const ProposalRow = (props: {
   members: Member[];
   posts: ProposalPost[];
   votesByMemberId?: Vote[];
+
+  // author overlay
+  councils: number[][];
+  forumPosts: Post[];
+  proposals: ProposalDetail[];
 }) => {
   const {
     block,
@@ -78,7 +87,27 @@ const ProposalRow = (props: {
   return (
     <div className="d-flex flex-row justify-content-between text-left p-2">
       <div className="text-right">{id}</div>
-      <div className="col-2">{author}</div>
+
+      <OverlayTrigger
+        placement={"right"}
+        overlay={
+          <Tooltip id={`overlay-${author}`} className="member-tooltip">
+            <MemberOverlay
+              handle={author}
+              members={members}
+              councils={props.councils}
+              proposals={props.proposals}
+              posts={props.forumPosts}
+              startTime={props.startTime}
+            />
+          </Tooltip>
+        }
+      >
+        <div className="col-2">
+          <Link to={`/members/${author}`}>{author}</Link>
+        </div>
+      </OverlayTrigger>
+
       <div className="col-3">
         <div className="float-right">
           <Posts posts={props.posts} />

src/components/Proposals/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Member, ProposalDetail, ProposalPost } from "../../types";
+import { Member, ProposalDetail, Post, ProposalPost } from "../../types";
 import Loading from "..//Loading";
 import ProposalTable from "./ProposalTable";
 
@@ -9,6 +9,10 @@ const Proposals = (props: {
   proposals: ProposalDetail[];
   proposalPosts: ProposalPost[];
   members: Member[];
+
+  // author overlay
+  councils: number[][];
+  posts: Post[];
 }) => {
   const { proposalPosts, block, now, members } = props;
   const startTime: number = now - block * 6000;
@@ -37,6 +41,8 @@ const Proposals = (props: {
       proposals={proposals}
       proposalPosts={proposalPosts}
       startTime={startTime}
+      councils={props.councils}
+      posts={props.posts}
     />
   );
 };

src/lib/getters.ts

@@ -154,7 +154,8 @@ export const proposalDetail = async (
     description,
     votes: votingResults,
     type,
-    author
+    author,
+    authorId: Number(proposerId)
   };
 };
 

src/types.ts

@@ -71,6 +71,7 @@ export interface ProposalDetail {
   type: string;
   votesByMemberId?: Vote[];
   author: string;
+  authorId: number;
 }
 
 export interface Vote {