Improve Roadmap and Board components

app/javascript/components/Board/NewPost.tsx

@@ -102,10 +102,16 @@ class NewPost extends React.Component<Props, State> {
       });
       this.setState({isLoading: false});
 
-      if (res.status === 204) this.setState({success: 'Your post has been published!'});
-      else {
+      if (res.status === 204) {
+        this.setState({
+          success: 'Your post has been published!',
+
+          title: '',
+          description: '',
+        });
+      } else {
         let data = await res.json();
-        this.setState({error: data.message});
+        this.setState({error: data.error});
       }
 
     } catch (e) {

app/javascript/components/Board/PostList.tsx

@@ -28,15 +28,20 @@ const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: P
       loader={<Spinner key={0} />}
       useWindow={true}
     >
-      {posts.map((post, i) => (
-        <PostListItem
-          title={post.title}
-          description={post.description}
-          postStatus={post.postStatus}
+      {
+        posts.length > 0 ?
+          posts.map((post, i) => (
+            <PostListItem
+              title={post.title}
+              description={post.description}
+              postStatus={post.postStatus}
 
-          key={i}
-        />
-      ))}
+              key={i}
+            />
+          ))
+        :
+          !areLoading ? <span className="infoText text-muted">There are no posts.</span> : null
+      }
     </InfiniteScroll>
   </div>
 );

app/javascript/components/Board/SearchFilter.tsx

@@ -9,7 +9,7 @@ const SearchFilter = ({ searchQuery, handleChange }: Props) => (
   <div className="box sidebar-box">
     <label htmlFor="searchPostInput" className="smallTitle">Search:</label>
     <input
-      type="text"
+      type="search"
       onChange={e => handleChange(e.target.value)}
       id="searchPostInput"
       className="form-control"

app/javascript/components/Board/index.tsx

@@ -9,8 +9,6 @@ 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 {
@@ -40,6 +38,8 @@ interface State {
 }
 
 class Board extends React.Component<Props, State> {
+  searchFilterTimeoutId: number;
+
   constructor(props) {
     super(props);
 
@@ -145,11 +145,13 @@ class Board extends React.Component<Props, State> {
   }
 
   setSearchFilter(searchQuery: string) {
-    debounce(() => (
+    if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
+    
+    this.searchFilterTimeoutId = setTimeout(() => (
         this.setState({
           filters: { ...this.state.filters, searchQuery },
         }, this.requestPosts)
-    ), 1000)();
+    ), 500);
   }
 
   setPostStatusFilter(postStatusId: number) {

app/javascript/components/Roadmap/PostList.tsx

@@ -12,14 +12,19 @@ interface Props {
 
 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}
+    {
+      posts.length > 0 ?
+        posts.map((post, i) => (
+          <PostListItem
+            title={post.title}
+            boardName={boards.find(board => board.id === post.board_id).name}
 
-        key={i}
-      />
-    ))}
+            key={i}
+          />
+        ))
+      :
+        <span className="infoText text-muted">There are no posts that have this status.</span>
+    }
   </div>
 );
 

app/javascript/helpers/debounce.js

@@ -1,4 +0,0 @@
-// 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/javascript/stylesheets/components/Board.scss

@@ -39,7 +39,6 @@
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: nowrap;
-
   
   .sidebar {
     .sidebar-box {
@@ -208,4 +207,10 @@
   margin-top: auto;
   margin-bottom: auto;
   margin-right: 4px;
+}
+
+.infoText {
+  display: block;
+  text-align: center;
+  font-style: italic;
 }

app/javascript/stylesheets/components/Roadmap.scss

@@ -40,6 +40,11 @@
       height: 16px;
       border-radius: 100%;
     }
+
+    .infoText {
+      text-align: center;
+      font-style: italic;
+    }
     
     .columnTitle {
       margin: 0 8px;