Forum: sorting

src/App.tsx

@@ -94,7 +94,9 @@ class App extends React.Component<IProps, IState> {
         const duration = timestamp - lastBlock.timestamp;
         const block: Block = { id, timestamp, duration };
         blocks = blocks.concat(block);
-        this.setState({ now: timestamp, blocks, block: id, loading: false });
+        this.setState({ blocks, loading: false });
+        this.save("block", id);
+        this.save("now", timestamp);
 
         const proposalCount = await get.proposalCount(api);
         if (proposalCount > this.state.proposalCount) {
@@ -566,7 +568,9 @@ class App extends React.Component<IProps, IState> {
     await this.loadHandles();
     await this.loadTokenomics();
     await this.loadReports();
-    this.setState({ loading: false });
+    const block = this.load("block");
+    const now = this.load("now");
+    this.setState({ block, now, loading: false });
   }
 
   load(key: string) {

src/components/Forum/Categories.tsx

@@ -1,26 +1,33 @@
 import React from "react";
 import { Button } from "react-bootstrap";
-import { Category, Thread } from "../../types";
+import { Category, Post, Thread } from "../../types";
 
 const Categories = (props: {
   categories: Category[];
   threads: Thread[];
   selectCategory: (id: number) => void;
 }) => {
-  const { selectCategory, categories, threads } = props;
+  const categories = props.categories.map((c) => {
+    const threads: Thread[] = props.threads.filter(
+      (t) => t.categoryId === c.id
+    );
+    return { ...c, threads };
+  });
   return (
     <div className="overflow-auto" style={{ height: "90%" }}>
       <div className="box">
-        {categories.map((c) => (
-          <Button
-            variant="dark"
-            className="btn-sm m-1"
-            key={c.id}
-            onClick={() => selectCategory(c.id)}
-          >
-            {c.title} ({threads.filter((t) => t.categoryId === c.id).length})
-          </Button>
-        ))}
+        {categories
+          .filter((c) => c.threads.length)
+          .map((c) => (
+            <Button
+              variant="dark"
+              className="btn-sm m-1"
+              key={c.id}
+              onClick={() => props.selectCategory(c.id)}
+            >
+              {c.title} ({c.threads.length})
+            </Button>
+          ))}
       </div>
     </div>
   );

src/components/Forum/Posts.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Handles, Thread, Post } from "../../types";
 import PostBox from "./PostBox";
 
-const ThreadPosts = (props: {
+const Posts = (props: {
   startTime: number;
   handles: Handles;
   thread?: Thread;
@@ -13,16 +13,18 @@ const ThreadPosts = (props: {
   if (!thread) return <div />;
   return (
     <div className="overflow-auto" style={{ height: `90%` }}>
-      {posts.map((post) => (
-        <PostBox
-          key={post.id}
-          handles={handles}
-          startTime={startTime}
-          {...post}
-        />
-      ))}
+      {posts
+        .sort((a, b) => b.createdAt.block - a.createdAt.block)
+        .map((post) => (
+          <PostBox
+            key={post.id}
+            handles={handles}
+            startTime={startTime}
+            {...post}
+          />
+        ))}
     </div>
   );
 };
 
-export default ThreadPosts;
+export default Posts;