Add filter by post status

app/controllers/post_statuses_controller.rb

@@ -0,0 +1,7 @@
+class PostStatusesController < ApplicationController
+  def index
+    post_statuses = PostStatus.order(order: :asc)
+
+    render json: post_statuses
+  end
+end

app/controllers/posts_controller.rb

@@ -4,10 +4,11 @@ class PostsController < ApplicationController
   def index_by_board_id
     board_id = params[:board_id] || 1
 
+    
     posts = Post
       .left_outer_joins(:post_status)
       .select('posts.title, posts.description, post_statuses.name as post_status_name, post_statuses.color as post_status_color')
-      .where(board_id: board_id)
+      .where(filter_params)
     
       render json: posts
   end
@@ -25,7 +26,12 @@ class PostsController < ApplicationController
 
   private
   
+    def filter_params
+      params.permit(:board_id, :post_status_id)
+    end
+    
     def post_params
       params.require(:post).permit(:title, :description, :board_id)
     end
+
 end

app/javascript/components/Board/NewPost.tsx

@@ -127,7 +127,7 @@ class NewPost extends React.Component<Props, State> {
     } = this.state;
 
     return (
-      <div className="newBoardContainer">
+      <div className="box sidebar-box newBoardContainer">
         <span className="boardName">{board.name}</span>
         <span className="boardDescription">{board.description}</span>
         {/* <span>{this.props.authenticityToken}</span> */}

app/javascript/components/Board/PostList.tsx

@@ -3,76 +3,30 @@ import * as React from 'react';
 import PostListItem from './PostListItem';
 import Spinner from '../shared/Spinner';
 
-import IBoard from '../../interfaces/IBoard';
 import IPost from '../../interfaces/IPost';
 
 interface Props {
-  board: IBoard;
-}
-
-interface State {
   posts: Array<IPost>;
-  isLoading: boolean;
+  areLoading: boolean;
   error: string;
 }
 
-class PostList extends React.Component<Props, State> {
+const PostList = ({ posts, areLoading, error }: Props) => (
-  constructor(props) {
+  <div className="box postList">
-    super(props);
+    { areLoading ? <Spinner /> : null }
+    { error ? <span className="error">{error}</span> : null }
+    {
+      posts.map((post, i) => (
+        <PostListItem
+          title={post.title}
+          description={post.description}
+          postStatus={post.postStatus}
 
-    this.state = {
+          key={i}
-      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.'
-      });
     }
-  }
+  </div>
-
+);
-  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/PostStatusFilter.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import PostStatusListItem from './PostStatusListItem';
+import Spinner from '../shared/Spinner';
+
+import IPostStatus from '../../interfaces/IPostStatus';
+
+interface Props {
+  postStatuses: Array<IPostStatus>;
+  areLoading: boolean;
+  error: string;
+  
+  handleFilterClick(postStatusId: number): void;
+  currentFilter: number;
+}
+
+const PostStatusFilter = ({
+  postStatuses,
+  areLoading,
+  error,
+  
+  handleFilterClick,
+  currentFilter,
+}: Props) => (
+  <div className="box sidebar-box postStatusFilterContainer">
+    <span className="smallTitle">Filter by post status:</span>
+
+    { areLoading ? <Spinner /> : null }
+    { error ? <span className="error">{error}</span> : null }
+    {
+      postStatuses.map((postStatus, i) => (
+        <PostStatusListItem
+          name={postStatus.name}
+          color={postStatus.color}
+
+          handleClick={() => handleFilterClick(postStatus.id)}
+          isCurrentFilter={postStatus.id === currentFilter}
+          handleResetFilter={() => handleFilterClick(0)}
+
+          key={i}
+        />
+      ))
+    }
+  </div>
+);
+
+export default PostStatusFilter;

app/javascript/components/Board/PostStatusListItem.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface Props {
+  name: string;
+  color: string;
+
+  handleClick(): void;
+  isCurrentFilter: boolean;
+  handleResetFilter(): void;
+}
+
+const PostStatusListItem = ({
+  name,
+  color,
+  handleClick,
+  isCurrentFilter,
+  handleResetFilter,
+}: Props) => (
+  <div className="postStatusListItemContainer">
+    <a onClick={handleClick} className="postStatusListItemLink">
+      <div className="postStatusListItem">
+        <div className="dot" style={{backgroundColor: color}}></div>
+        <span className="postStatusName" style={{color: color}}>{name}</span>
+      </div>
+    </a>
+    {
+      isCurrentFilter ?
+        <button onClick={handleResetFilter} className="btn btn-outline-dark resetFilter">X</button> : null
+    }
+  </div>
+);
+
+export default PostStatusListItem;

app/javascript/components/Board/index.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 
 import NewPost from './NewPost';
+import PostStatusFilter from './PostStatusFilter';
 import PostList from './PostList';
 
 import IBoard from '../../interfaces/IBoard';
+import IPost from '../../interfaces/IPost';
+import IPostStatus from '../../interfaces/IPostStatus';
 
 import '../../stylesheets/components/Board.scss';
 
@@ -13,16 +16,147 @@ interface Props {
   authenticityToken: string;
 }
 
-class Board extends React.Component<Props> {
+interface State {
+  filters: {
+    byPostStatus: number;
+  };
+  posts: {
+    items: Array<IPost>;
+    areLoading: boolean;
+    error: string;
+  };
+  postStatuses: {
+    items: Array<IPostStatus>;
+    areLoading: boolean;
+    error: string;
+  };
+}
+
+class Board extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filters: {
+        byPostStatus: 0,
+      },
+      posts: {
+        items: [],
+        areLoading: true,
+        error: '',
+      },
+      postStatuses: {
+        items: [],
+        areLoading: true,
+        error: '',
+      }
+    };
+
+    this.requestPosts = this.requestPosts.bind(this);
+    this.requestPostStatuses = this.requestPostStatuses.bind(this);
+    this.setPostStatusFilter = this.setPostStatusFilter.bind(this);
+  }
+
+  componentDidMount() {
+    this.requestPosts();
+    this.requestPostStatuses();
+  }
+
+  async requestPosts() {
+    this.setState({
+      posts: { ...this.state.posts, areLoading: true },
+    });
+
+    const boardId = this.props.board.id;
+    const { byPostStatus } = this.state.filters;
+
+    let params = '';
+    if (byPostStatus) params += `&post_status_id=${byPostStatus}`;
+
+    try {
+      let res = await fetch(`http://localhost:3000/posts?board_id=${boardId}${params}`);
+      let data = await res.json();
+
+      this.setState({
+        posts: {
+          items: data.map(post => ({
+            title: post.title,
+            description: post.description,
+            postStatus: {
+              name: post.post_status_name,
+              color: post.post_status_color,
+            },
+          })),
+          areLoading: false,
+          error: '',
+        }
+      });
+    } catch (e) {
+      this.setState({
+        posts: { ...this.state.posts, error: 'An unknown error occurred, try again.' },
+      });
+    }
+  }
+
+  setPostStatusFilter(postStatusId: number) {
+    this.setState({
+      filters: { byPostStatus: postStatusId },
+    }, this.requestPosts);
+  }
+
+  async requestPostStatuses() {
+    this.setState({
+      postStatuses: { ...this.state.postStatuses, areLoading: true },
+    });
+
+    try {
+      let res = await fetch('http://localhost:3000/post_statuses');
+      let data = await res.json();
+
+      this.setState({
+        postStatuses: {
+          items: data.map(postStatus => ({
+            id: postStatus.id,
+            name: postStatus.name,
+            color: postStatus.color,
+          })),
+          areLoading: false,
+          error: '',
+        },
+      });
+    } catch (e) {
+      this.setState({
+        postStatuses: { ...this.state.postStatuses, error: 'An unknown error occurred, try again.' },
+      });
+    }
+  }
+
   render() {
     const { board, isLoggedIn, authenticityToken } = this.props;
+    const { posts, postStatuses } = this.state;
 
     return (
       <div className="boardContainer">
         <div className="sidebar">
-          <NewPost board={board} isLoggedIn={isLoggedIn} authenticityToken={authenticityToken} />
+          <NewPost
+            board={board}
+            isLoggedIn={isLoggedIn}
+            authenticityToken={authenticityToken}
+          />
+          <PostStatusFilter
+            postStatuses={postStatuses.items}
+            areLoading={postStatuses.areLoading}
+            error={postStatuses.error}
+
+            handleFilterClick={this.setPostStatusFilter}
+            currentFilter={this.state.filters.byPostStatus}
+          />
         </div>
-        <PostList board={board} />
+        <PostList
+          posts={posts.items}
+          areLoading={posts.areLoading}
+          error={posts.error}
+        />
       </div>
     );
   }

app/javascript/stylesheets/components/Board.scss

@@ -5,27 +5,36 @@
   align-items: flex-start;
   flex-wrap: nowrap;
 
+  .smallTitle {
+    font-size: 18px;
+    font-weight: 500;
+  }
+
   .sidebar {
     top: 20px;
     position: sticky;
+
+    .sidebar-box {
+      flex: 0 0 auto;
+  
+      width: 250px;
+    
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+    }
   }
 
-  .newBoardContainer {
+  .box {
-    flex: 0 0 auto;
-  
-    width: 250px;
-  
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-  
     border: 1px solid black;
     border-radius: 4px;
   
     padding: 8px;
     margin: 8px;
+  }
 
+  .newBoardContainer {
     .boardName {
       font-size: 24px;
       font-weight: 600;
@@ -58,18 +67,53 @@
     }
   }
 
+  .postStatusFilterContainer {
+    .postStatusListItemContainer {
+      display: flex;
+
+      flex: 1 1 auto;
+      align-self: stretch;
+    }
+
+    .postStatusListItemLink {
+      flex: 1 1 auto;
+    }
+
+    .postStatusListItem {
+      height: 40px;
+
+      display: flex;
+      align-items: center;
+
+      text-transform: uppercase;
+
+      padding: 4px;
+    }
+
+    .postStatusListItem:hover {
+      cursor: pointer;
+
+      background-color: #f5f5f5;
+      border-radius: 4px;
+    }
+
+    .resetFilter {
+      flex: 0 0 auto;
+      width: 30px;
+      height: 30px;
+
+      padding: 0;
+
+      align-self: center;
+    }
+  }
+  
   .postList {
     display: flex;
     flex-direction: column;
     
     flex: 1 1 auto;
 
-    border: 1px solid black;
-    border-radius: 4px;
-    
-    padding: 8px;
-    margin: 8px;
-
     .postLink {
       text-decoration: none;
       border-radius: 4px;
@@ -117,16 +161,17 @@
           display: flex;
         }
   
-        .dot {
-          width: 16px;
-          height: 16px;
-          border-radius: 100%;
-    
-          margin-top: auto;
-          margin-bottom: auto;
-          margin-right: 4px;
-        }
       }
     }
   }
 }
+
+.dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 4px;
+}

config/routes.rb

@@ -16,4 +16,5 @@ Rails.application.routes.draw do
 
   post '/posts', to: 'posts#create'
   get '/posts', to: 'posts#index_by_board_id'
+  get '/post_statuses', to: 'post_statuses#index'
 end