interface improvements: Proposals, Council, Forum

src/App.tsx

@@ -290,6 +290,7 @@ class App extends React.Component<IProps, IState> {
 
     const data = await api.query.forum.postById(id);
     const threadId = Number(data.thread_id);
+    this.fetchThread(api, threadId);
     const text = data.current_text.slice(0, 1000);
     //const moderation = data.moderation;
     //const history = data.text_change_history;

src/components/Council/index.tsx

@@ -27,28 +27,33 @@ const Council = (props: {
   const council = councils[councils.length - 1];
   if (!council) return <Loading target="council" />;
 
+  const sortCouncil = (council) =>
+    council.sort((a, b) => {
+      const handle1 = handles[a.member] || a.member;
+      const handle2 = handles[b.member] || b.member;
+      return handle1.localeCompare(handle2);
+    });
+
   return (
     <div className="box w-50 p-3 m-3">
       <h3>Council</h3>
       <div className="d-flex flex-wrap justify-content-between">
-        {council
-          .sort((a, b) => handles[a.member].localeCompare(handles[b.member]))
-          .map((m) => (
-            <div key={m.member} className="col-12 col-md-4">
-              <MemberBox
-                id={m.id || 0}
-                account={m.member}
-                handle={handles[m.member]}
-                members={members}
-                councils={councils}
-                proposals={proposals}
-                placement={"bottom"}
-                posts={posts}
-                startTime={status.startTime}
-                validators={props.validators}
-              />
-            </div>
-          ))}
+        {sortCouncil(council).map((m) => (
+          <div key={m.member} className="col-12 col-md-4">
+            <MemberBox
+              id={m.id || 0}
+              account={m.member}
+              handle={handles[m.member]}
+              members={members}
+              councils={councils}
+              proposals={proposals}
+              placement={"bottom"}
+              posts={posts}
+              startTime={status.startTime}
+              validators={props.validators}
+            />
+          </div>
+        ))}
       </div>
       <hr />
       <ElectionStatus domain={props.domain} status={status} />

src/components/Forum/LatestPost.tsx

@@ -21,24 +21,25 @@ const LatestPost = (props: {
   return (
     <div
       key={id}
-      className="box d-flex flex-row"
+      className="box text-left"
       onClick={
         thread && selectThread ? () => props.selectThread(thread.id) : () => {}
       }
     >
-      <div className="col-2 mr-3">
+      <div className="mb-2">
+        {moment(startTime + createdAt.block * 6000).fromNow()}
         <User key={authorId} id={authorId} handle={handles[authorId]} />
-        <div>{moment(startTime + createdAt.block * 6000).fromNow()}</div>
+        posted in
+        <Link
+          to={`/forum/threads/${threadId}`}
+          className="font-weight-bold mx-2"
+        >
+          {thread ? thread.title : `Thread ${threadId}`}
+        </Link>
         <a href={`${domain}/#/forum/threads/${threadId}`}>reply</a>
       </div>
 
       <div className="overflow-hidden">
-        <div className="text-left mb-3 font-weight-bold">
-          <Link to={`/forum/threads/${threadId}`}>
-            {thread ? thread.title : threadId}
-          </Link>
-        </div>
-
         <Markdown
           plugins={[gfm]}
           className="overflow-auto text-left"

src/components/Proposals/Bar.tsx

@@ -4,11 +4,12 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 const Bar = (props: {
   id: number;
   blocks: number;
-  duration: string;
+  created: string;
   period: number;
+  expires: string;
+  left: string;
 }) => {
-  const { blocks, created, duration, id, period } = props;
-  const percent = 100 - 100 * (blocks / period);
+  const { blocks, created, expires, id, left, percent } = props;
   if (percent < 0) return <div>updating ..</div>;
   const bg = percent < 25 ? `danger` : percent < 50 ? `warning` : `success`;
 
@@ -18,10 +19,13 @@ const Bar = (props: {
       placement="bottom"
       overlay={
         <Tooltip id={String(id)}>
-          <div>created: {created}</div>
-          <div>age: {duration}</div>
-          <div>
-            {Math.floor(percent)}% of {period} blocks left
+          <div className="text-left">
+            <div className="mb-2">
+              created:
+              <div className="text-nowrap">{created}</div>
+            </div>
+            {left}
+            <div>expires {expires}</div>
           </div>
         </Tooltip>
       }

src/components/Proposals/Detail.tsx

@@ -47,7 +47,11 @@ const Detail = (props: { detail?: any; type: string }) => {
   if (type === "addWorkingGroupLeaderOpening")
     return <p>Hire {data.working_group} lead</p>;
 
-  console.log(detail);
+  if (type === "terminateWorkingGroupLeaderRole")
+    return <p>Fire {data.working_group} lead</p>;
+
+  console.debug(`unhandled detail:`, detail);
+
   return (
     <OverlayTrigger
       placement={"right"}

src/components/Proposals/Row.tsx

@@ -76,18 +76,19 @@ const ProposalRow = (props: {
   if (executed) result = Object.keys(props.executed)[0];
   const color = colors[result];
 
-  const created = formatTime(props.startTime + createdAt * 6000);
   const finalized =
     finalizedAt && formatTime(props.startTime + finalizedAt * 6000);
 
   const period = +props.parameters.votingPeriod;
-
   let blocks = finalizedAt ? finalizedAt - createdAt : block - createdAt;
-  const days = blocks ? Math.floor(blocks / 14400) : 0;
-  const hours = blocks ? Math.floor((blocks - days * 14400) / 600) : 0;
-  const daysStr = days ? `${days}d` : "";
-  const hoursStr = hours ? `${hours}h` : "";
-  const duration = blocks ? `${daysStr} ${hoursStr} / ${blocks} blocks` : "";
+  const percent = (100 - 100 * (blocks / period)).toFixed();
+
+  const moments = (blocks: number) => moment().add(blocks).fromNow();
+  const expires = moments(6000 * (period - blocks));
+  const age = moments(-blocks * 6000);
+  const time = formatTime(props.startTime + createdAt * 6000);
+  const created = blocks ? `${age} at ${time}` : time;
+  const left = `${period - blocks} / ${period} blocks left (${percent}%)`;
 
   return (
     <div className="d-flex flex-column">
@@ -156,8 +157,9 @@ const ProposalRow = (props: {
         id={id}
         blocks={blocks}
         created={created}
-        period={period}
-        duration={duration}
+        expires={expires}
+        left={left}
+        percent={percent}
       />
     </div>
   );