Add post list

app/javascript/components/Board/Board.tsx

@@ -19,8 +19,10 @@ class Board extends React.Component<Props> {
 
     return (
       <div className="boardContainer">
-        <NewPost board={board} isLoggedIn={isLoggedIn} authenticityToken={authenticityToken} />
-        <PostList />
+        <div className="sidebar">
+          <NewPost board={board} isLoggedIn={isLoggedIn} authenticityToken={authenticityToken} />
+        </div>
+        <PostList board={board} />
       </div>
     );
   }

app/javascript/components/Board/NewPost.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 
 import NewPostForm from './NewPostForm';
-import Spinner from '../Shared/Spinner';
+import Spinner from '../shared/Spinner';
 
 import IBoard from '../../interfaces/IBoard';
 
-import '../../stylesheets/components/Board/NewPost.scss';
-
 interface Props {
   board: IBoard;
   isLoggedIn: boolean;

app/javascript/components/Board/NewPostForm.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-import '../../stylesheets/components/Board/NewPostForm.scss';
-
 interface Props {
   title: string;
   description: string;

app/javascript/components/Board/PostList.tsx

@@ -1,11 +1,78 @@
 import * as React from 'react';
 
-import '../../stylesheets/components/Board/PostList.scss';
+import PostListItem from './PostListItem';
+import Spinner from '../shared/Spinner';
 
-const PostList = () => (
-  <div className="postListContainer">
-    Posts will be show here.
-  </div>
-);
+import IBoard from '../../interfaces/IBoard';
+import IPost from '../../interfaces/IPost';
+
+interface Props {
+  board: IBoard;
+}
+
+interface State {
+  posts: Array<IPost>;
+  isLoading: boolean;
+  error: string;
+}
+
+class PostList extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      posts: [],
+      isLoading: true,
+      error: '',
+    };
+  }
+
+  async componentDidMount() {
+    const boardId = this.props.board.id;
+
+    try {
+      let res = await fetch(`http://localhost:3000/posts?board_id=${boardId}`);
+      let data = await res.json();
+      this.setState({isLoading: false});
+
+      this.setState({
+        posts: data.map(post => ({
+          title: post.title,
+          description: post.description,
+          postStatus: {
+            name: post.post_status_name,
+            color: post.post_status_color,
+          },
+        })),
+      });
+    } catch (e) {
+      this.setState({
+        error: 'An unknown error occurred, try again.'
+      });
+    }
+  }
+
+  render() {
+    const { posts, isLoading, error } = this.state;
+
+    return (
+      <div className="postList">
+        { isLoading ? <Spinner /> : null }
+        { error ? <span className="error">{error}</span> : null }
+        {
+          posts.map((post, i) => (
+            <PostListItem
+              title={post.title}
+              description={post.description}
+              postStatus={post.postStatus}
+
+              key={i}
+            />
+          ))
+        }
+      </div>
+    );
+  }
+}
 
 export default PostList;

app/javascript/components/Board/PostListItem.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface Props {
+  title: string;
+  description?: string;
+  postStatus: {name: string, color: string};
+}
+
+const PostListItem = ({ title, description, postStatus}: Props) => (
+  <a href="#" className="postLink">
+    <div className="postListItem">
+      <div className="postTitle">{title}</div>
+      <div className="postDescription">
+        {
+          description && description.length > 120  ?
+            description.slice(0, 119) + '...'
+          :
+            description || '<No description provided.>'
+        }
+      </div>
+      <div className="postDetails">
+        <div className="postDetailsComments">💬 0 comments</div>
+        <div className="postDetailsStatus" style={{color: postStatus.color}}>
+          <div className="dot" style={{backgroundColor: postStatus.color}}></div>
+          <span className="postStatusName">{postStatus.name}</span>
+        </div>
+      </div>
+    </div>
+  </a>
+);
+
+export default PostListItem;

app/javascript/components/Shared/Spinner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 const Spinner = () => (
-  <div className="spinner-border" role="status">
+  <div className="spinner-border d-block mx-auto" role="status">
     <span className="sr-only">Loading...</span>
   </div>
 );