Forum design

src/components/Forum/Categories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-//import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { Category, Thread } from "../../types";
 
 const Categories = (props: {
@@ -9,12 +9,16 @@ const Categories = (props: {
 }) => {
   const { selectCategory, categories, threads } = props;
   return (
-    <div>
-      <h2>Categories</h2>
+    <div className="box">
       {categories.map((c) => (
-        <div key={c.id} onClick={() => selectCategory(c.id)}>
+        <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})
-        </div>
+        </Button>
       ))}
     </div>
   );

src/components/Forum/Category.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-//import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import { Category, Thread, Post } from "../../types";
-import Threads from "./Threads";
-import Posts from "./Posts";
-import { ChevronLeft } from "react-feather";
-
-const CategoryThreads = (props: {
-  category?: Category;
-  thread?: number;
-  threads: Thread[];
-  posts: Post[];
-  selectCategory: (id: number) => void;
-  selectThread: (id: number) => void;
-  selectPost: (id: number) => void;
-}) => {
-  const {
-    selectCategory,
-    selectThread,
-    selectPost,
-    category,
-    threads,
-    thread,
-    posts,
-  } = props;
-  if (!category) return <div />;
-
-  return (
-    <div>
-      <h2>
-        <ChevronLeft onClick={() => selectCategory(0)} />
-        <div onClick={() => selectThread(0)}>{category.title}</div>
-      </h2>
-      {thread ? (
-        <Posts
-          selectPost={selectPost}
-          selectThread={selectThread}
-          thread={threads.find((t) => t.id === thread)}
-          posts={posts.filter((p) => p.threadId === thread)}
-        />
-      ) : (
-        <Threads selectThread={selectThread} threads={threads} posts={posts} />
-      )}
-    </div>
-  );
-};
-
-export default CategoryThreads;

src/components/Forum/Content.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import Categories from "./Categories";
+import Threads from "./Threads";
+import Posts from "./Posts";
+
+import { Handles, Category, Thread, Post } from "../../types";
+
+const Content = (props: {
+  handles: Handles;
+  categories: Category[];
+  category?: Category;
+  thread?: Thread;
+  post?: Post;
+  threads: Thread[];
+  posts: Post[];
+  selectCategory: (id: number) => void;
+  selectThread: (id: number) => void;
+  selectPost: (id: number) => void;
+}) => {
+  const {
+    selectCategory,
+    selectThread,
+    selectPost,
+    category,
+    categories,
+    threads,
+    thread,
+    posts,
+    post,
+    handles,
+  } = props;
+
+  if (thread)
+    return (
+      <Posts
+        selectPost={selectPost}
+        selectThread={selectThread}
+        thread={thread}
+        posts={posts.filter((p) => p.threadId === thread.id)}
+        handles={handles}
+      />
+    );
+
+  if (category)
+    return (
+      <Threads
+        //selectCategory={selectCategory}
+        selectThread={selectThread}
+        //selectPost={selectPost}
+        //category={category}
+        threads={threads.filter((t) => t.categoryId === category.id)}
+        //thread={thread}
+        posts={posts}
+      />
+    );
+
+  return (
+    <Categories
+      selectCategory={selectCategory}
+      categories={categories}
+      threads={threads}
+    />
+  );
+};
+export default Content;

src/components/Forum/Loading.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Category, Thread, Post } from "../../types";
+
+const Loading = (props: {
+  getMinimal: (array: { id: number }[]) => any;
+  categories: Category[];
+  threads: Thread[];
+  posts: Post[];
+}) => {
+  const { getMinimal, categories, threads, posts } = props;
+  const categoryId = getMinimal(categories);
+  const threadId = getMinimal(threads);
+  const postId = getMinimal(posts);
+
+  const strCategories = categoryId ? `${categoryId} categories, ` : "";
+  const strThreads = threadId ? `${threadId} threads, ` : "";
+  const strPosts = postId ? `${postId} posts ` : "";
+
+  if (`${strCategories}${strThreads}${strPosts}` === "") return <div />;
+
+  return (
+    <div>
+      Fetching {strCategories} {strThreads} {strPosts}..
+    </div>
+  );
+};
+
+export default Loading;

src/components/Forum/NavBar.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Button, Nav, Navbar, NavDropdown } from "react-bootstrap";
+
+import { ChevronRight } from "react-feather";
+import { Category, Post, Thread } from "../../types";
+
+import Loading from "./Loading";
+
+const CategoryNav = (props: {
+  selectThread: (id: number) => void;
+  category?: Category;
+}) => {
+  if (!props.category) return <div />;
+  return (
+    <Navbar.Brand onClick={() => props.selectThread(0)}>
+      <ChevronRight />
+      {props.category.title}
+    </Navbar.Brand>
+  );
+};
+
+const ThreadNav = (props: {
+  selectPost: (id: number) => void;
+  thread?: Thread;
+}) => {
+  if (!props.thread) return <div />;
+  return (
+    <Navbar.Brand onClick={() => props.selectPost(0)}>
+      <ChevronRight />
+      {props.thread.title}
+    </Navbar.Brand>
+  );
+};
+
+const NavBar = (props: {
+  selectCategory: (id: number) => void;
+  selectThread: (id: number) => void;
+  selectPost: (id: number) => void;
+  getMinimal: (array: { id: number }[]) => any;
+  categories: Category[];
+  category?: Category;
+  threads: Thread[];
+  thread?: Thread;
+  posts: Post[];
+}) => {
+  const {
+    selectCategory,
+    selectThread,
+    selectPost,
+    getMinimal,
+    categories,
+    threads,
+    posts,
+    category,
+    thread,
+  } = props;
+
+  return (
+    <Navbar bg="dark" variant="dark">
+      <Navbar.Brand href="/">Joystream</Navbar.Brand>
+      <Navbar.Brand onClick={() => selectCategory(0)}>Forum</Navbar.Brand>
+      <CategoryNav selectThread={selectThread} category={category} />
+      <ThreadNav selectPost={selectPost} thread={thread} />
+
+      <Navbar.Brand>
+        <Loading
+          getMinimal={getMinimal}
+          categories={categories}
+          threads={threads}
+          posts={posts}
+        />
+      </Navbar.Brand>
+    </Navbar>
+  );
+};
+
+export default NavBar;

src/components/Forum/Posts.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 //import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import { Thread, Post } from "../../types";
 import { ChevronLeft } from "react-feather";
 
+import { Handles, Thread, Post } from "../../types";
+import User from "../User";
+
 const ThreadPosts = (props: {
+  handles: Handles;
   thread?: Thread;
   posts: Post[];
   selectPost: (id: number) => void;
   selectThread: (id: number) => void;
 }) => {
-  const { selectPost, selectThread, thread } = props;
+  const { selectPost, selectThread, thread, handles } = props;
 
   // unique posts
   let posts: Post[] = [];
@@ -19,15 +22,11 @@ const ThreadPosts = (props: {
 
   if (!thread) return <div />;
   return (
-    <div>
-      <h4>
-        <ChevronLeft onClick={() => selectThread(0)} />
-
-        {thread.title}
-      </h4>
+    <div className="">
       {posts.map((p) => (
-        <div key={p.id} onClick={() => selectPost(p.id)}>
-          {p.id}: {p.text}
+        <div className="box" key={p.id} onClick={() => selectPost(p.id)}>
+          <User key={p.authorId} id={p.authorId} handle={handles[p.authorId]} />
+          {p.text}
         </div>
       ))}
     </div>

src/components/Forum/Threads.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-//import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { Thread, Post } from "../../types";
 
 const Threads = (props: {
@@ -9,11 +9,16 @@ const Threads = (props: {
 }) => {
   const { selectThread, threads, posts } = props;
   return (
-    <div>
+    <div className="box d-flex flex-column">
       {threads.map((t) => (
-        <div key={t.id} onClick={() => selectThread(t.id)}>
+        <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})
-        </div>
+        </Button>
       ))}
     </div>
   );

src/components/Forum/index.tsx

@@ -1,64 +1,86 @@
 import React from "react";
-//import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import { Category, Post, Thread } from "../../types";
-import Categories from "./Categories";
-import CategoryThreads from "./Category";
+import { Handles, Category, Post, Thread } from "../../types";
+import NavBar from "./NavBar";
+import Content from "./Content";
 
 interface IProps {
   block: number;
   posts: Post[];
   categories: Category[];
   threads: Thread[];
+  handles: Handles;
 }
 interface IState {
-  category: number;
-  thread: number;
-  post: number;
+  categoryId: number;
+  threadId: number;
+  postId: number;
 }
 
 class Forum extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
-    this.state = { category: 0, thread: 0, post: 0 };
+    this.state = { categoryId: 0, threadId: 0, postId: 0 };
     this.selectCategory = this.selectCategory.bind(this);
     this.selectThread = this.selectThread.bind(this);
     this.selectPost = this.selectPost.bind(this);
   }
 
-  selectCategory(category: number) {
-    this.setState({ category });
+  selectCategory(categoryId: number) {
+    this.setState({ categoryId });
   }
-  selectThread(thread: number) {
-    this.setState({ thread });
+  selectThread(threadId: number) {
+    this.setState({ threadId });
   }
-  selectPost(post: number) {
-    this.setState({ post });
+  selectPost(postId: number) {
+    this.setState({ postId });
+  }
+
+  getMinimal(array: { id: number }[]) {
+    if (!array.length) return `all`;
+    let id = array[0].id;
+    array.forEach((p) => {
+      if (p.id < id) id = p.id;
+    });
+    if (id > 1) return id;
   }
 
   render() {
-    const { categories, posts, threads } = this.props;
-    const { category, thread } = this.state;
+    const { handles, categories, posts, threads } = this.props;
+    const { categoryId, threadId, postId } = this.state;
+
+    const category = categoryId
+      ? categories.find((c) => c.id === categoryId)
+      : undefined;
+    const thread = threadId
+      ? threads.find((t) => t.id === threadId)
+      : undefined;
+    const post = postId ? posts.find((p) => p.id === postId) : undefined;
 
     return (
-      <div className="h-100 overflow-hidden bg-light">
-        <h1>Forum</h1>
-        {category ? (
-          <CategoryThreads
-            selectCategory={this.selectCategory}
-            selectThread={this.selectThread}
-            selectPost={this.selectPost}
-            category={categories.find((c) => c.id === category)}
-            threads={threads.filter((t) => t.categoryId === category)}
-            thread={thread}
-            posts={posts}
-          />
-        ) : (
-          <Categories
-            selectCategory={this.selectCategory}
-            categories={categories}
-            threads={threads}
-          />
-        )}
+      <div className="h-100 overflow-hidden bg-dark">
+        <NavBar
+          selectCategory={this.selectCategory}
+          selectThread={this.selectThread}
+          selectPost={this.selectPost}
+          getMinimal={this.getMinimal}
+          categories={categories}
+          category={category}
+          threads={threads}
+          thread={thread}
+          posts={posts}
+        />
+        <Content
+          selectCategory={this.selectCategory}
+          selectThread={this.selectThread}
+          selectPost={this.selectPost}
+          categories={categories}
+          threads={threads}
+          posts={posts}
+          category={category}
+          thread={thread}
+          post={post}
+          handles={handles}
+        />
       </div>
     );
   }