Forum: sort Categories, highlight latest

src/components/Forum/Categories.tsx

@@ -6,6 +6,7 @@ const Categories = (props: {
   categories: Category[];
   threads: Thread[];
   selectCategory: (id: number) => void;
+  latest: number[];
 }) => {
   const categories = props.categories.map((c) => {
     const threads: Thread[] = props.threads.filter(
@@ -13,15 +14,21 @@ const Categories = (props: {
     );
     return { ...c, threads };
   });
+
+  const getColor = (id: number) => {
+    return props.latest.find((i) => i === id) ? "bg-secondary" : "";
+  };
+
   return (
     <div className="overflow-auto" style={{ height: "90%" }}>
       <div className="box">
         {categories
           .filter((c) => c.threads.length)
+          .sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
           .map((c) => (
             <Button
               variant="dark"
-              className="btn-sm m-1"
+              className={`btn-sm m-1 ${getColor(c.id)}`}
               key={c.id}
               onClick={() => props.selectCategory(c.id)}
             >

src/components/Forum/Content.tsx

@@ -15,6 +15,7 @@ const Content = (props: {
   selectCategory: (id: number) => void;
   selectThread: (id: number) => void;
   startTime: number;
+  latest: { threads: number[]; categories: number[] };
 }) => {
   const {
     selectCategory,
@@ -26,6 +27,7 @@ const Content = (props: {
     posts,
     handles,
     startTime,
+    latest,
   } = props;
 
   if (thread)
@@ -41,6 +43,7 @@ const Content = (props: {
   if (category)
     return (
       <Threads
+        latest={latest.threads}
         selectThread={selectThread}
         threads={threads.filter((t) => t.categoryId === category.id)}
         posts={posts}
@@ -49,6 +52,7 @@ const Content = (props: {
 
   return (
     <Categories
+      latest={latest.categories}
       selectCategory={selectCategory}
       categories={categories}
       threads={threads}

src/components/Forum/PostBox.tsx

@@ -1,14 +1,11 @@
 import React from "react";
 import User from "../User";
 import { Handles } from "../../types";
+import { domain } from "../../config";
 import moment from "moment";
 import Markdown from "react-markdown";
 import gfm from "remark-gfm";
 
-const formatTime = (time: number) => {
-  return moment(time).format("DD/MM/YYYY HH:mm");
-};
-
 const PostBox = (props: {
   startTime: number;
   handles: Handles;
@@ -16,15 +13,18 @@ const PostBox = (props: {
   authorId: string;
   createdAt: { block: number; time: number };
   text: string;
+  threadId: number;
 }) => {
-  const { createdAt, startTime, id, authorId, handles, text } = props;
-  const created = formatTime(startTime + createdAt.block * 6000);
+  const { createdAt, startTime, id, authorId, handles, text, threadId } = props;
+  const created = moment(startTime + createdAt.block * 6000).fromNow();
 
   return (
     <div className="box" key={id}>
-      <div className="float-right">{created}</div>
+      <div className="float-right">
+        <a href={`${domain}/#/forum/threads/${threadId}`}>reply</a>
+      </div>
+      <div className="float-left">{created}</div>
       <User key={authorId} id={authorId} handle={handles[authorId]} />
-
       <Markdown
         plugins={[gfm]}
         className="mt-1 overflow-auto text-left"

src/components/Forum/Threads.tsx

@@ -6,15 +6,21 @@ const Threads = (props: {
   threads: Thread[];
   posts: Post[];
   selectThread: (id: number) => void;
+  latest: number[];
 }) => {
   const { selectThread, threads, posts } = props;
+
+  const getColor = (id: number) => {
+    return props.latest.find((i) => i === 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"
+            className={`btn-sm m-1 ${getColor(t.id)}`}
             key={t.id}
             onClick={() => selectThread(t.id)}
           >

src/components/Forum/index.tsx

@@ -53,6 +53,18 @@ class Forum extends React.Component<IProps, IState> {
     if (id > 1) return id;
   }
 
+  getLatest() {
+    let threads: number[] = [];
+    let categories: number[] = [];
+    this.props.posts.slice(0, 20).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 };
+  }
+
   render() {
     const { block, now, handles, categories, posts, threads } = this.props;
     const { categoryId, threadId } = this.state;
@@ -79,6 +91,7 @@ class Forum extends React.Component<IProps, IState> {
           posts={posts}
         />
         <Content
+          latest={this.getLatest()}
           selectCategory={this.selectCategory}
           selectThread={this.selectThread}
           categories={categories}