Forum: tweaks

src/App.tsx

@@ -170,6 +170,7 @@ class App extends React.Component<IProps, IState> {
       const curation = String(data.curation_status);
       const createdAt = data.created;
       const principal = Number(data.principal_id);
+      this.fetchMemberByAccount(api, accountId);
 
       const channel: Channel = {
         id,
@@ -210,6 +211,7 @@ class App extends React.Component<IProps, IState> {
       const unmoderatedThreads = Number(data.num_direct_unmoderated_threads);
       const position = Number(data.position_in_parent_category);
       const moderatorId = String(data.moderator_id);
+      if (moderatorId !== "") this.fetchMemberByAccount(api, moderatorId);
 
       const category: Category = {
         id,
@@ -245,6 +247,7 @@ class App extends React.Component<IProps, IState> {
       //const createdAt = moment(data.created_at);
       const createdAt = data.created_at;
       const authorId = String(data.author_id);
+      this.fetchMemberByAccount(api, authorId);
 
       const post: Post = { id, threadId, text, authorId, createdAt };
 
@@ -266,6 +269,7 @@ class App extends React.Component<IProps, IState> {
       const moderation = data.moderation;
       const createdAt = String(data.created_at.block);
       const authorId = String(data.author_id);
+      this.fetchMemberByAccount(api, authorId);
 
       const thread: Thread = {
         id,

src/components/Forum/Categories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 import { Category, Thread } from "../../types";
 
 const Categories = (props: {
@@ -9,17 +9,19 @@ const Categories = (props: {
 }) => {
   const { selectCategory, categories, threads } = props;
   return (
-    <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>
-      ))}
+    <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>
+        ))}
+      </div>
     </div>
   );
 };

src/components/Forum/Loading.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "react-bootstrap";
 import { Category, Thread, Post } from "../../types";
 
 const Loading = (props: {
@@ -19,9 +20,9 @@ const Loading = (props: {
   if (`${strCategories}${strThreads}${strPosts}` === "") return <div />;
 
   return (
-    <div>
-      Fetching {strCategories} {strThreads} {strPosts}..
-    </div>
+    <Button variant="secondary" className="btn-sm ml-auto">
+      Fetching {strCategories} {strThreads} {strPosts}
+    </Button>
   );
 };
 

src/components/Forum/NavBar.tsx

@@ -64,14 +64,12 @@ const NavBar = (props: {
       <CategoryNav selectThread={selectThread} category={category} />
       <ThreadNav thread={thread} />
 
-      <Navbar.Brand>
-        <Loading
-          getMinimal={getMinimal}
-          categories={categories}
-          threads={threads}
-          posts={posts}
-        />
-      </Navbar.Brand>
+      <Loading
+        getMinimal={getMinimal}
+        categories={categories}
+        threads={threads}
+        posts={posts}
+      />
     </Navbar>
   );
 };

src/components/Forum/Threads.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 import { Thread, Post } from "../../types";
 
 const Threads = (props: {
@@ -9,17 +9,19 @@ const Threads = (props: {
 }) => {
   const { selectThread, threads, posts } = props;
   return (
-    <div className="box d-flex flex-column">
-      {threads.map((t) => (
-        <Button
-          variant="dark"
-          className="btn-sm m-1"
-          key={t.id}
-          onClick={() => selectThread(t.id)}
-        >
-          {t.title} ({posts.filter((p) => p.threadId === t.id).length})
-        </Button>
-      ))}
+    <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"
+            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

@@ -45,7 +45,7 @@ class Forum extends React.Component<IProps, IState> {
   }
 
   getMinimal(array: { id: number }[]) {
-    if (!array.length) return `all`;
+    if (!array.length) return " ";
     let id = array[0].id;
     array.forEach((p) => {
       if (p.id < id) id = p.id;