Add first version of roadmap

app/controllers/static_pages_controller.rb

@@ -1,4 +1,20 @@
 class StaticPagesController < ApplicationController
-  def home
+  def roadmap
+    @post_statuses = PostStatus.select(:id, :name, :color)
+
+    @posts = Post
+      .select(:id, :title, :board_id, :post_status_id, :user_id, :created_at)
+      .where(post_status_id: get_array_of_ids(@post_statuses))
   end
+
+  private
+
+    def get_array_of_ids(resources)
+      array_of_ids = []
+      resources.each do |resource|
+        array_of_ids.push resource.id
+      end
+
+      array_of_ids
+    end
 end

app/javascript/components/Hello.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-interface IProps {
-  name: string;
-}
-
-class Hello extends React.Component<IProps> {
-  render () {
-    const {name} = this.props;
-
-    return (
-      <React.Fragment>
-        <span>Hello {name}!</span>
-      </React.Fragment>
-    );
-  }
-}
-
-export default Hello;

app/javascript/components/Roadmap/PostList.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import PostListItem from './PostListItem';
+
+import IPost from '../../interfaces/IPost';
+import IBoard from '../../interfaces/IBoard';
+
+import '../../stylesheets/components/Roadmap/PostList.scss';
+
+interface Props {
+  posts: Array<IPost>;
+  boards: Array<IBoard>;
+}
+
+const PostList = ({ posts, boards }: Props) => (
+  <div className="postList">
+    {posts.map((post, i) => (
+      <PostListItem
+        title={post.title}
+        boardName={boards.find(board => board.id === post.board_id).name}
+
+        key={i}
+      />
+    ))}
+  </div>
+);
+
+export default PostList;

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import PostList from './PostList';
+
+import IPostStatus from '../../interfaces/IPostStatus';
+import IPost from '../../interfaces/IPost';
+import IBoard from '../../interfaces/IBoard';
+
+import '../../stylesheets/components/Roadmap/PostListByPostStatus.scss';
+
+interface Props {
+  postStatus: IPostStatus;
+  posts: Array<IPost>;
+  boards: Array<IBoard>;
+}
+
+const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => (
+  <div className="roadmapColumn" style={{borderColor: postStatus.color}}>
+    <div className="columnHeader" style={{borderBottomColor: postStatus.color}}>
+      <div className="dot" style={{backgroundColor: postStatus.color}}></div>
+      <div className="columnTitle">{postStatus.name}</div>
+    </div>
+    <div className="scrollContainer">
+      <PostList
+        posts={posts}
+        boards={boards}
+      />
+    </div>
+  </div>
+);
+
+export default PostListByPostStatus;

app/javascript/components/Roadmap/PostListItem.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import '../../stylesheets/components/Roadmap/PostListItem.scss';
+
+interface Props {
+  title: string;
+  boardName: string;
+}
+
+const PostListItem = ({title, boardName}: Props) => (
+  <a href="#" className="postLink">
+    <div className="postListItem">
+      <div className="postTitle">{title}</div>
+      <div className="postBoard">{boardName}</div>
+    </div>
+  </a>
+);
+
+export default PostListItem;

app/javascript/components/Roadmap/Roadmap.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import PostListByPostStatus from './PostListByPostStatus';
+
+import IPostStatus from '../../interfaces/IPostStatus';
+import IPost from '../../interfaces/IPost';
+import IBoard from '../../interfaces/IBoard';
+
+import '../../stylesheets/components/Roadmap/Roadmap.scss';
+
+interface Props {
+  postStatuses: Array<IPostStatus>;
+  posts: Array<IPost>;
+  boards: Array<IBoard>;
+}
+
+class Roadmap extends React.Component<Props> {
+  render () {
+    const { postStatuses, posts, boards } = this.props;
+
+    return (
+      <div className="roadmapColumns">
+        {postStatuses.map((postStatus, i) => (
+          <PostListByPostStatus
+            postStatus={postStatus}
+            posts={posts.filter(post => post.post_status_id === postStatus.id)}
+            boards={boards}
+
+            key={i}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Roadmap;

app/javascript/interfaces/IBoard.ts

@@ -0,0 +1,7 @@
+interface IBoard {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+export default IBoard;

app/javascript/interfaces/IPost.ts

@@ -0,0 +1,11 @@
+interface IPost {
+  id: number;
+  title: string;
+  description?: string;
+  board_id: number;
+  post_status_id?: number;
+  user_id: number;
+  created_at: string;
+}
+
+export default IPost;

app/javascript/interfaces/IPostStatus.ts

@@ -0,0 +1,7 @@
+interface IPostStatus {
+  id: number;
+  name: string;
+  color: string;
+}
+
+export default IPostStatus;

app/javascript/stylesheets/components/Roadmap/PostList.scss

@@ -0,0 +1,4 @@
+.postList {
+  display: flex;
+  flex-direction: column;
+}

app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss

@@ -0,0 +1,46 @@
+@media (max-width: 800px) {
+  .roadmapColumn {
+    width: 100%;
+  }
+}
+
+@media (min-width: 801px) {
+  .roadmapColumn {
+    width: 32%;
+  }
+}
+
+.roadmapColumn {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+
+  margin: 8px 0;
+  padding: 8px;
+}
+
+.columnHeader {
+  display: flex;
+  align-items: center;
+
+  padding-bottom: 4px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  margin-bottom: 8px;
+}
+
+.dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+}
+
+.columnTitle {
+  margin: 0 8px;
+  font-weight: 700;
+}
+
+.scrollContainer {
+  overflow-y: auto;
+  max-height: 350px;
+}

app/javascript/stylesheets/components/Roadmap/PostListItem.scss

@@ -0,0 +1,26 @@
+.postLink {
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.postLink:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+.postListItem {
+  margin: 4px 0;
+  padding: 8px 4px;
+}
+
+.postTitle {
+  color: black;
+  font-weight: 500;
+  font-size: 17px;
+}
+
+.postBoard {
+  color: grey;
+  font-weight: 400;
+  font-size: 14px;
+}

app/javascript/stylesheets/components/Roadmap/Roadmap.scss

@@ -0,0 +1,7 @@
+.roadmapColumns {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}

app/views/boards/show.html.erb

@@ -1,6 +1,2 @@
 <h1><%= @board.name %></h1>
-<p><%= @board.description %></p>
+<p><%= @board.description %></p>
-
-<%=
-  react_component('Hello', { name: 'TypeScript on React on Rails' })
-%>

app/views/static_pages/home.html.erb

@@ -1,3 +0,0 @@
-<h2>Home</h2>
-
-<p>This is the home page of the website Astuto.</p>

app/views/static_pages/roadmap.html.erb

@@ -0,0 +1,12 @@
+<h2>Roadmap</h2>
+
+<%=
+  react_component(
+    'Roadmap/Roadmap',
+    {
+      postStatuses: @post_statuses,
+      posts: @posts,
+      boards: @boards,
+    }
+  )
+%>

config/routes.rb

@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-  root to: 'static_pages#home'
+  root to: 'static_pages#roadmap'
 
   namespace :admin do
     root to: 'boards#index'