Forum: Post creation time, Markdown

src/components/Forum/Content.tsx

@@ -10,46 +10,39 @@ const Content = (props: {
   categories: Category[];
   category?: Category;
   thread?: Thread;
-  post?: Post;
   threads: Thread[];
   posts: Post[];
   selectCategory: (id: number) => void;
   selectThread: (id: number) => void;
-  selectPost: (id: number) => void;
+  startTime: number;
 }) => {
   const {
     selectCategory,
     selectThread,
-    selectPost,
     category,
     categories,
     threads,
     thread,
     posts,
-    post,
     handles,
+    startTime,
   } = props;
 
   if (thread)
     return (
       <Posts
-        selectPost={selectPost}
-        selectThread={selectThread}
         thread={thread}
         posts={posts.filter((p) => p.threadId === thread.id)}
         handles={handles}
+        startTime={startTime}
       />
     );
 
   if (category)
     return (
       <Threads
-        //selectCategory={selectCategory}
         selectThread={selectThread}
-        //selectPost={selectPost}
-        //category={category}
         threads={threads.filter((t) => t.categoryId === category.id)}
-        //thread={thread}
         posts={posts}
       />
     );

src/components/Forum/NavBar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Nav, Navbar, NavDropdown } from "react-bootstrap";
+import { Navbar } from "react-bootstrap";
 
 import { ChevronRight } from "react-feather";
 import { Category, Post, Thread } from "../../types";
@@ -19,13 +19,10 @@ const CategoryNav = (props: {
   );
 };
 
-const ThreadNav = (props: {
-  selectPost: (id: number) => void;
-  thread?: Thread;
-}) => {
+const ThreadNav = (props: { thread?: Thread }) => {
   if (!props.thread) return <div />;
   return (
-    <Navbar.Brand onClick={() => props.selectPost(0)}>
+    <Navbar.Brand>
       <ChevronRight />
       {props.thread.title}
     </Navbar.Brand>
@@ -35,7 +32,6 @@ const ThreadNav = (props: {
 const NavBar = (props: {
   selectCategory: (id: number) => void;
   selectThread: (id: number) => void;
-  selectPost: (id: number) => void;
   getMinimal: (array: { id: number }[]) => any;
   categories: Category[];
   category?: Category;
@@ -46,7 +42,6 @@ const NavBar = (props: {
   const {
     selectCategory,
     selectThread,
-    selectPost,
     getMinimal,
     categories,
     threads,
@@ -58,9 +53,16 @@ const NavBar = (props: {
   return (
     <Navbar bg="dark" variant="dark">
       <Navbar.Brand href="/">Joystream</Navbar.Brand>
-      <Navbar.Brand onClick={() => selectCategory(0)}>Forum</Navbar.Brand>
+      <Navbar.Brand
+        onClick={() => {
+          selectCategory(0);
+          selectThread(0);
+        }}
+      >
+        Forum
+      </Navbar.Brand>
       <CategoryNav selectThread={selectThread} category={category} />
-      <ThreadNav selectPost={selectPost} thread={thread} />
+      <ThreadNav thread={thread} />
 
       <Navbar.Brand>
         <Loading

src/components/Forum/PostBox.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import User from "../User";
+import { Handles } from "../../types";
+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;
+  id: number;
+  authorId: string;
+  createdAt: { block: number; time: number };
+  text: string;
+}) => {
+  const { createdAt, startTime, id, authorId, handles, text } = props;
+  const created = formatTime(startTime + createdAt.block * 6000);
+
+  return (
+    <div className="box" key={id}>
+      <div className="float-right">{created}</div>
+      <User key={authorId} id={authorId} handle={handles[authorId]} />
+
+      <Markdown
+        plugins={[gfm]}
+        className="mt-1 overflow-auto text-left"
+        children={text}
+      />
+    </div>
+  );
+};
+
+export default PostBox;

src/components/Forum/Posts.tsx

@@ -1,33 +1,25 @@
 import React from "react";
-//import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import { ChevronLeft } from "react-feather";
-
 import { Handles, Thread, Post } from "../../types";
-import User from "../User";
+import PostBox from "./PostBox";
 
 const ThreadPosts = (props: {
+  startTime: number;
   handles: Handles;
   thread?: Thread;
   posts: Post[];
-  selectPost: (id: number) => void;
-  selectThread: (id: number) => void;
 }) => {
-  const { selectPost, selectThread, thread, handles } = props;
-
-  // unique posts
-  let posts: Post[] = [];
-  props.posts.forEach((p) => {
-    if (!posts.find((post) => post.id === p.id)) posts.push(p);
-  });
+  const { thread, handles, startTime, posts } = props;
 
   if (!thread) return <div />;
   return (
-    <div className="">
-      {posts.map((p) => (
-        <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 className="overflow-auto" style={{ height: `90%` }}>
+      {posts.map((post) => (
+        <PostBox
+          key={post.id}
+          handles={handles}
+          startTime={startTime}
+          {...post}
+        />
       ))}
     </div>
   );

src/components/Forum/index.tsx

@@ -9,6 +9,7 @@ interface IProps {
   categories: Category[];
   threads: Thread[];
   handles: Handles;
+  now: number;
 }
 interface IState {
   categoryId: number;
@@ -22,7 +23,6 @@ class Forum extends React.Component<IProps, IState> {
     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(categoryId: number) {
@@ -31,9 +31,6 @@ class Forum extends React.Component<IProps, IState> {
   selectThread(threadId: number) {
     this.setState({ threadId });
   }
-  selectPost(postId: number) {
-    this.setState({ postId });
-  }
 
   getMinimal(array: { id: number }[]) {
     if (!array.length) return `all`;
@@ -45,8 +42,10 @@ class Forum extends React.Component<IProps, IState> {
   }
 
   render() {
-    const { handles, categories, posts, threads } = this.props;
-    const { categoryId, threadId, postId } = this.state;
+    const { block, now, handles, categories, posts, threads } = this.props;
+    const { categoryId, threadId } = this.state;
+
+    const startTime: number = now - block * 6000;
 
     const category = categoryId
       ? categories.find((c) => c.id === categoryId)
@@ -54,14 +53,12 @@ class Forum extends React.Component<IProps, IState> {
     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-dark">
         <NavBar
           selectCategory={this.selectCategory}
           selectThread={this.selectThread}
-          selectPost={this.selectPost}
           getMinimal={this.getMinimal}
           categories={categories}
           category={category}
@@ -72,14 +69,13 @@ class Forum extends React.Component<IProps, IState> {
         <Content
           selectCategory={this.selectCategory}
           selectThread={this.selectThread}
-          selectPost={this.selectPost}
           categories={categories}
           threads={threads}
           posts={posts}
           category={category}
           thread={thread}
-          post={post}
           handles={handles}
+          startTime={startTime}
         />
       </div>
     );

src/types.ts

@@ -129,7 +129,7 @@ export interface Post {
   text: string;
   threadId: number;
   authorId: string;
-  createdAt: string;
+  createdAt: { block: number; time: number };
 }
 
 export interface Thread {