updates!

src/App.tsx

@@ -315,15 +315,13 @@ class App extends React.Component<IProps, IState> {
     let { proposals } = this.state;
     const exists = proposals.find((p) => p && p.id === id);
 
-    if (exists) {
-      if (
-        exists.stage === "Finalized" &&
-        exists.votesByAccount &&
-        exists.votesByAccount.length
-      )
-        return;
-      return this.fetchVotesPerProposal(api, exists);
-    }
+    if (
+      exists &&
+      exists.stage === "Finalized" &&
+      exists.votesByAccount &&
+      exists.votesByAccount.length
+    )
+      return;
 
     console.debug(`Fetching proposal ${id}`);
     const proposal = await get.proposalDetail(api, id);

src/components/Dashboard/index.tsx

@@ -4,7 +4,7 @@ import { ActiveProposals, Council } from "..";
 import Nominators from "./Nominators";
 import Validators from "./Validators";
 import Loading from "../Loading";
-import { IState, Member } from "../../types";
+import { IState } from "../../types";
 
 const Dashboard = (props: IState) => {
   const { block, now, councils, domain, handles, members, proposals } = props;
@@ -16,6 +16,14 @@ const Dashboard = (props: IState) => {
           <a href={domain}>Joystream</a>
         </h1>
       </div>
+
+      <div className="box">
+        <h3>Forum</h3>
+        <Link to="/forum">
+          {props.posts.length} posts in {props.threads.length} threads
+        </Link>
+      </div>
+
       <div className="box mt-3">
         <h3>latest block</h3>
         {block ? block : <Loading />}

src/components/Forum/Categories.tsx

@@ -20,7 +20,7 @@ const Categories = (props: {
   };
 
   return (
-    <div className="overflow-auto" style={{ height: "90%" }}>
+    <div className="overflow-auto" style={{ maxHeight: "30%" }}>
       <div className="box">
         {categories
           .filter((c) => c.threads.length)

src/components/Forum/Content.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Categories from "./Categories";
 import Threads from "./Threads";
 import Posts from "./Posts";
+import LatestPost from "./LatestPost";
 
 import { Handles, Category, Thread, Post } from "../../types";
 
@@ -15,7 +16,7 @@ const Content = (props: {
   selectCategory: (id: number) => void;
   selectThread: (id: number) => void;
   startTime: number;
-  latest: { threads: number[]; categories: number[] };
+  latest: { threads: number[]; categories: number[]; posts: Post[] };
 }) => {
   const {
     selectCategory,
@@ -51,12 +52,27 @@ const Content = (props: {
     );
 
   return (
-    <Categories
-      latest={latest.categories}
-      selectCategory={selectCategory}
-      categories={categories}
-      threads={threads}
-    />
+    <div className="h-100">
+      <Categories
+        latest={latest.categories}
+        selectCategory={selectCategory}
+        categories={categories}
+        threads={threads}
+      />
+      <h2 className="text-center text-light my-2">Latest</h2>
+      <div className="overflow-auto" style={{ height: "90%" }}>
+        {latest.posts.map((p) => (
+          <LatestPost
+            key={p.id}
+            selectThread={selectThread}
+            startTime={startTime}
+            handles={handles}
+            thread={threads.find((t) => t.id === p.threadId)}
+            post={p}
+          />
+        ))}
+      </div>
+    </div>
   );
 };
 export default Content;

src/components/Forum/NavBar.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Navbar } from "react-bootstrap";
+import { Link } from "react-router-dom";
 
 import { ChevronRight } from "react-feather";
 import { Category, Post, Thread } from "../../types";
@@ -52,7 +53,9 @@ const NavBar = (props: {
 
   return (
     <Navbar bg="dark" variant="dark">
-      <Navbar.Brand href="/">Joystream</Navbar.Brand>
+      <Navbar.Brand>
+        <Link to="/">Joystream</Link>
+      </Navbar.Brand>
       <Navbar.Brand
         onClick={() => {
           selectCategory(0);

src/components/Forum/Posts.tsx

@@ -10,7 +10,7 @@ const Posts = (props: {
 }) => {
   const { thread, handles, startTime, posts } = props;
 
-  if (!thread) return <div />;
+  //if (!thread) return <div />;
   return (
     <div className="overflow-auto" style={{ height: `90%` }}>
       {posts

src/components/Forum/Threads.tsx

@@ -10,23 +10,24 @@ const Threads = (props: {
 }) => {
   const { selectThread, threads, posts } = props;
 
-  const getColor = (id: number) => {
-    return props.latest.find((i) => i === id) ? "bg-secondary" : "";
-  };
+  const getColor = (id: number) =>
+    props.latest.includes(id) ? "bg-secondary" : "";
 
   return (
     <div className="overflow-auto" style={{ height: "90%" }}>
       <div className="box d-flex flex-column">
-        {threads.map((t) => (
-          <Button
-            variant="dark"
-            className={`btn-sm m-1 ${getColor(t.id)}`}
-            key={t.id}
-            onClick={() => selectThread(t.id)}
-          >
-            {t.title} ({posts.filter((p) => p.threadId === t.id).length})
-          </Button>
-        ))}
+        {threads
+          .sort((a, b) => b.id - a.id)
+          .map((t) => (
+            <Button
+              variant="dark"
+              className={`btn-sm m-1 ${getColor(t.id)}`}
+              key={t.id}
+              onClick={() => selectThread(t.id)}
+            >
+              {t.title} ({posts.filter((p) => p.threadId === t.id).length})
+            </Button>
+          ))}
       </div>
     </div>
   );

src/components/Forum/index.tsx

@@ -56,13 +56,14 @@ class Forum extends React.Component<IProps, IState> {
   getLatest() {
     let threads: number[] = [];
     let categories: number[] = [];
-    this.props.posts.slice(0, 20).forEach((p) => {
+    let posts = this.props.posts.sort((a, b) => b.id - a.id).slice(0, 20);
+    posts.forEach((p) => {
       const thread = this.props.threads.find((t) => t.id === p.threadId);
       if (!thread) return;
       threads.push(thread.id);
       categories.push(thread.categoryId);
     });
-    return { threads, categories };
+    return { posts, threads, categories };
   }
 
   render() {