Improve post list filter by status (#267)

app/javascript/components/Board/BoardP.tsx

@@ -25,7 +25,7 @@ interface Props {
     boardId: number,
     page?: number,
     searchQuery?: string,
-    postStatusId?: number,
+    postStatusIds?: Array<number>,
   ): void;
   requestPostStatuses(): void;
   handleSearchFilterChange(searchQuery: string): void;
@@ -44,21 +44,21 @@ class BoardP extends React.Component<Props> {
     const { searchQuery } = this.props.posts.filters;
     const prevSearchQuery = prevProps.posts.filters.searchQuery;
 
-    const { postStatusId } = this.props.posts.filters;
-    const prevPostStatusId = prevProps.posts.filters.postStatusId;
+    const { postStatusIds } = this.props.posts.filters;
+    const prevPostStatusIds = prevProps.posts.filters.postStatusIds;
 
     // search filter changed
     if (searchQuery !== prevSearchQuery) {
       if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
 
       this.searchFilterTimeoutId = setTimeout(() => (
-        this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusId)
+        this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds)
       ), 500);
     }
 
     // post status filter changed
-    if (postStatusId !== prevPostStatusId) {
-      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusId);
+    if (postStatusIds.length !== prevPostStatusIds.length) {
+      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds);
     }
   }
 
@@ -95,7 +95,7 @@ class BoardP extends React.Component<Props> {
             areLoading={postStatuses.areLoading}
             error={postStatuses.error}
 
-            currentFilter={filters.postStatusId}
+            currentFilter={filters.postStatusIds}
             handleFilterClick={handlePostStatusFilterChange}
           />
         </Sidebar>
@@ -113,7 +113,7 @@ class BoardP extends React.Component<Props> {
             posts.areLoading ?
               null
             :
-              requestPosts(board.id, posts.page + 1, filters.searchQuery, filters.postStatusId)
+              requestPosts(board.id, posts.page + 1, filters.searchQuery, filters.postStatusIds)
           }
 
           isLoggedIn={isLoggedIn}

app/javascript/components/Board/PostStatusFilter.tsx

@@ -14,7 +14,7 @@ interface Props {
   error: string;
   
   handleFilterClick(postStatusId: number): void;
-  currentFilter: number;
+  currentFilter: Array<number>;
 }
 
 const PostStatusFilter = ({
@@ -33,13 +33,19 @@ const PostStatusFilter = ({
           color={postStatus.color}
 
           handleClick={() => handleFilterClick(postStatus.id)}
-          isCurrentFilter={postStatus.id === currentFilter}
-          handleResetFilter={() => handleFilterClick(0)}
+          isCurrentFilter={currentFilter.includes(postStatus.id)}
 
           key={i}
         />
       ))
     }
+    <PostStatusListItem
+      name={I18n.t('common.no_status')}
+      color='black'
+
+      handleClick={() => handleFilterClick(0)}
+      isCurrentFilter={currentFilter.includes(0)}
+    />
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
   </SidebarBox>

app/javascript/components/Board/PostStatusListItem.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import PostStatusLabel from '../common/PostStatusLabel';
 import Button from '../common/Button';
+import { CancelIcon } from '../common/Icons';
 
 interface Props {
   name: string;
@@ -9,7 +10,6 @@ interface Props {
 
   handleClick(): void;
   isCurrentFilter: boolean;
-  handleResetFilter(): void;
 }
 
 const PostStatusListItem = ({
@@ -17,19 +17,18 @@ const PostStatusListItem = ({
   color,
   handleClick,
   isCurrentFilter,
-  handleResetFilter,
 }: Props) => (
   <div className={
     "postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')}`
   }>
     <a onClick={handleClick} className="postStatusListItemLink">
-      <div className="postStatusListItem">
+      <div className={`postStatusListItem${isCurrentFilter ? ' postStatusListItemSelected' : ''}`}>
         <PostStatusLabel name={name} color={color} />
       </div>
     </a>
     {
       isCurrentFilter ?
-        <Button onClick={handleResetFilter} className="resetFilter" outline>
+        <Button onClick={handleClick} className="resetFilter" outline>
           X
         </Button>
       :