Add search to post list

app/controllers/posts_controller.rb

@@ -6,6 +6,7 @@ class PostsController < ApplicationController
       .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(filter_params)
+      .search(params[:search])
       .page(params[:page])
     
     render json: posts
@@ -26,12 +27,12 @@ class PostsController < ApplicationController
   private
   
     def filter_params
-      defaults = { board_id: Board.first.id, page: 1 }
+      defaults = { board_id: Board.first.id }
 
       params
-        .permit(:board_id, :post_status_id, :page)
+        .permit(:board_id, :post_status_id, :page, :search)
         .with_defaults(defaults)
-        .except(:page) # do not return page param
+        .except(:page, :search) # permit, but do not return page and search params
     end
     
     def post_params

app/javascript/components/Board/SearchFilter.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface Props {
+  searchQuery: string;
+  handleChange(newSearchQuery: string): void;
+}
+
+const SearchFilter = ({ searchQuery, handleChange }: Props) => (
+  <div className="box sidebar-box">
+    <label htmlFor="searchPostInput" className="smallTitle">Search:</label>
+    <input
+      type="text"
+      onChange={e => handleChange(e.target.value)}
+      id="searchPostInput"
+      className="form-control"
+    />
+  </div>
+);
+
+export default SearchFilter;

app/javascript/components/Board/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import NewPost from './NewPost';
+import SearchFilter from './SearchFilter';
 import PostStatusFilter from './PostStatusFilter';
 import PostList from './PostList';
 
@@ -8,6 +9,8 @@ import IBoard from '../../interfaces/IBoard';
 import IPost from '../../interfaces/IPost';
 import IPostStatus from '../../interfaces/IPostStatus';
 
+import debounce from '../../helpers/debounce.js';
+
 import '../../stylesheets/components/Board.scss';
 
 interface Props {
@@ -19,6 +22,7 @@ interface Props {
 interface State {
   filters: {
     byPostStatus: number;
+    searchQuery: string;
   };
   posts: {
     items: Array<IPost>;
@@ -42,6 +46,7 @@ class Board extends React.Component<Props, State> {
     this.state = {
       filters: {
         byPostStatus: 0,
+        searchQuery: '',
       },
       posts: {
         items: [],
@@ -61,8 +66,9 @@ class Board extends React.Component<Props, State> {
     this.requestPosts = this.requestPosts.bind(this);
     this.loadMorePosts = this.loadMorePosts.bind(this);
     this.requestPostStatuses = this.requestPostStatuses.bind(this);
-    this.setPostStatusFilter = this.setPostStatusFilter.bind(this);
 
+    this.setSearchFilter = this.setSearchFilter.bind(this);
+    this.setPostStatusFilter = this.setPostStatusFilter.bind(this);
   }
 
   componentDidMount() {
@@ -82,12 +88,13 @@ class Board extends React.Component<Props, State> {
     });
 
     const boardId = this.props.board.id;
-    const { byPostStatus } = this.state.filters;
+    const { byPostStatus, searchQuery } = this.state.filters;
 
     let params = '';
     params += `page=${page}`;
     params += `&board_id=${boardId}`;
     if (byPostStatus) params += `&post_status_id=${byPostStatus}`;
+    if (searchQuery) params += `&search=${searchQuery}`;
 
     try {
       let res = await fetch(`/posts?${params}`);
@@ -137,9 +144,17 @@ class Board extends React.Component<Props, State> {
     }
   }
 
+  setSearchFilter(searchQuery: string) {
+    debounce(() => (
+        this.setState({
+          filters: { ...this.state.filters, searchQuery },
+        }, this.requestPosts)
+    ), 1000)();
+  }
+
   setPostStatusFilter(postStatusId: number) {
     this.setState({
-      filters: { byPostStatus: postStatusId },
+      filters: { ...this.state.filters, byPostStatus: postStatusId },
     }, this.requestPosts);
   }
 
@@ -172,7 +187,7 @@ class Board extends React.Component<Props, State> {
 
   render() {
     const { board, isLoggedIn, authenticityToken } = this.props;
-    const { posts, postStatuses } = this.state;
+    const { posts, postStatuses, filters } = this.state;
 
     return (
       <div className="boardContainer">
@@ -182,13 +197,17 @@ class Board extends React.Component<Props, State> {
             isLoggedIn={isLoggedIn}
             authenticityToken={authenticityToken}
           />
+          <SearchFilter
+            searchQuery={filters.searchQuery}
+            handleChange={this.setSearchFilter}
+          />
           <PostStatusFilter
             postStatuses={postStatuses.items}
             areLoading={postStatuses.areLoading}
             error={postStatuses.error}
 
             handleFilterClick={this.setPostStatusFilter}
-            currentFilter={this.state.filters.byPostStatus}
+            currentFilter={filters.byPostStatus}
           />
         </div>
         <PostList

app/javascript/helpers/debounce.js

@@ -0,0 +1,4 @@
+// https://toughcompetent.com/blog/es5-es6-debounce-react-events-on-inputs/
+function debounce(a,b,c){var d,e;return function(){function h(){d=null,c||(e=a.apply(f,g))}var f=this,g=arguments;return clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e}}
+
+export default debounce;

app/models/post.rb

@@ -6,4 +6,10 @@ class Post < ApplicationRecord
   validates :title, presence: true, length: { in: 4..64 }
 
   paginates_per 15
+
+  def self.search(s = '')
+    s = s || ''
+    s = sanitize_sql_like(s)
+    where("posts.title ILIKE ? OR posts.description ILIKE ?", "%#{s}%", "%#{s}%")
+  end
 end