Add Redux and use it for state management

app/javascript/components/Board/BoardP.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+import NewPost from './NewPost';
+import SearchFilter from './SearchFilter';
+import PostStatusFilter from './PostStatusFilter';
+import PostList from './PostList';
+
+import IBoard from '../../interfaces/IBoard';
+import IPost from '../../interfaces/IPost';
+
+import { PostsState } from '../../reducers/postsReducer';
+import { PostStatusesState } from '../../reducers/postStatusesReducer';
+
+interface Props {
+  board: IBoard;
+  isLoggedIn: boolean;
+  authenticityToken: string;
+  posts: PostsState;
+  postStatuses: PostStatusesState;
+
+  requestPosts(
+    boardId: number,
+    page?: number,
+    searchQuery?: string,
+    postStatusId?: number,
+  ): void;
+  requestPostStatuses(): void;
+  handleSearchFilterChange(searchQuery: string): void;
+  handlePostStatusFilterChange(postStatusId: number): void;
+}
+
+class BoardP extends React.Component<Props> {
+  searchFilterTimeoutId: ReturnType<typeof setTimeout>;
+
+  componentDidMount() {
+    this.props.requestPosts(this.props.board.id);
+    this.props.requestPostStatuses();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { searchQuery } = this.props.posts.filters;
+    const prevSearchQuery = prevProps.posts.filters.searchQuery;
+
+    const { postStatusId } = this.props.posts.filters;
+    const prevPostStatusId = prevProps.posts.filters.postStatusId;
+
+    // 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)
+      ), 500);
+    }
+
+    // post status filter changed
+    if (postStatusId !== prevPostStatusId) {
+      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusId);
+    }
+  }
+
+  render() {
+    const {
+      board,
+      isLoggedIn,
+      authenticityToken,
+      posts,
+      postStatuses,
+
+      requestPosts,
+      handleSearchFilterChange,
+      handlePostStatusFilterChange,
+    } = this.props;
+
+    return (
+      <div className="boardContainer">
+        <div className="sidebar">
+          <NewPost
+            board={board}
+            isLoggedIn={isLoggedIn}
+            authenticityToken={authenticityToken}
+          />
+          <SearchFilter
+            searchQuery={posts.filters.searchQuery}
+            handleChange={handleSearchFilterChange}
+          />
+          <PostStatusFilter
+            postStatuses={postStatuses.items}
+            areLoading={postStatuses.areLoading}
+            error={postStatuses.error}
+
+            currentFilter={posts.filters.postStatusId}
+            handleFilterClick={handlePostStatusFilterChange}
+          />
+        </div>
+
+        <PostList
+          posts={posts.items}
+          postStatuses={postStatuses.items}
+          page={posts.page}
+          hasMore={posts.haveMore}
+          areLoading={posts.areLoading}
+          error={posts.error}
+
+          handleLoadMore={() => requestPosts(board.id, posts.page + 1)}
+        />
+      </div>
+    );
+  }
+}
+
+export default BoardP;

app/javascript/components/Board/PostList.tsx

@@ -6,9 +6,11 @@ import PostListItem from './PostListItem';
 import Spinner from '../shared/Spinner';
 
 import IPost from '../../interfaces/IPost';
+import IPostStatus from '../../interfaces/IPostStatus';
 
 interface Props {
   posts: Array<IPost>;
+  postStatuses: Array<IPostStatus>;
   areLoading: boolean;
   error: string;
 
@@ -17,7 +19,15 @@ interface Props {
   hasMore: boolean;
 }
 
-const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: Props) => (
+const PostList = ({
+  posts,
+  postStatuses,
+  areLoading,
+  error,
+  handleLoadMore,
+  page,
+  hasMore
+}: Props) => (
   <div className="box postList">
     { error ? <span className="error">{error}</span> : null }
     <InfiniteScroll
@@ -34,7 +44,7 @@ const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: P
             <PostListItem
               title={post.title}
               description={post.description}
-              postStatus={post.postStatus}
+              postStatus={postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
 
               key={i}
             />

app/javascript/components/Board/PostListItem.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 
+import IPostStatus from '../../interfaces/IPostStatus';
+
 interface Props {
   title: string;
   description?: string;
-  postStatus: {name: string, color: string};
+  postStatus: IPostStatus;
 }
 
 const PostListItem = ({ title, description, postStatus}: Props) => (
@@ -23,10 +25,15 @@ const PostListItem = ({ title, description, postStatus}: Props) => (
           <span className="comment icon"></span>
           <span>0 comments</span>
         </div>
-        <div className="postDetailsStatus">
-          <div className="dot" style={{backgroundColor: postStatus.color}}></div>
-          <span className="postStatusName">{postStatus.name}</span>
-        </div>
+        {
+          postStatus ?
+            <div className="postDetailsStatus">
+              <div className="dot" style={{backgroundColor: postStatus.color}}></div>
+              <span className="postStatusName">{postStatus.name}</span>
+            </div>
+          :
+            null
+        }
       </div>
     </div>
   </a>

app/javascript/components/Board/index.tsx

@@ -1,229 +1,20 @@
 import * as React from 'react';
+import { Provider } from 'react-redux';
 
-import NewPost from './NewPost';
-import SearchFilter from './SearchFilter';
-import PostStatusFilter from './PostStatusFilter';
-import PostList from './PostList';
+import store from '../../stores';
 
-import IBoard from '../../interfaces/IBoard';
-import IPost from '../../interfaces/IPost';
-import IPostStatus from '../../interfaces/IPostStatus';
+import Board from '../../containers/Board';
 
 import '../../stylesheets/components/Board.scss';
 
-interface Props {
-  board: IBoard;
-  isLoggedIn: boolean;
-  authenticityToken: string;
-}
+const BoardRoot = ({ board, isLoggedIn, authenticityToken }) => (
+  <Provider store={store}>
+    <Board
+      board={board}
+      isLoggedIn={isLoggedIn}
+      authenticityToken={authenticityToken}
+    />
+  </Provider>
+);
 
-interface State {
-  filters: {
-    byPostStatus: number;
-    searchQuery: string;
-  };
-  posts: {
-    items: Array<IPost>;
-    areLoading: boolean;
-    error: string;
-
-    page: number;
-    hasMore: boolean;
-  };
-  postStatuses: {
-    items: Array<IPostStatus>;
-    areLoading: boolean;
-    error: string;
-  };
-}
-
-class Board extends React.Component<Props, State> {
-  searchFilterTimeoutId: ReturnType<typeof setTimeout>;
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      filters: {
-        byPostStatus: 0,
-        searchQuery: '',
-      },
-      posts: {
-        items: [],
-        areLoading: false,
-        error: '',
-
-        page: 0,
-        hasMore: true,
-      },
-      postStatuses: {
-        items: [],
-        areLoading: false,
-        error: '',
-      }
-    };
-
-    this.requestPosts = this.requestPosts.bind(this);
-    this.loadMorePosts = this.loadMorePosts.bind(this);
-    this.requestPostStatuses = this.requestPostStatuses.bind(this);
-
-    this.setSearchFilter = this.setSearchFilter.bind(this);
-    this.setPostStatusFilter = this.setPostStatusFilter.bind(this);
-  }
-
-  componentDidMount() {
-    this.requestPosts();
-    this.requestPostStatuses();
-  }
-
-  loadMorePosts() {
-    this.requestPosts(this.state.posts.page + 1);
-  }
-
-  async requestPosts(page = 1) {
-    if (this.state.posts.areLoading) return;
-
-    this.setState({
-      posts: { ...this.state.posts, areLoading: true },
-    });
-
-    const boardId = this.props.board.id;
-    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}`);
-      let data = await res.json();
-
-      if (page === 1) {
-        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: '',
-            page,
-            hasMore: data.length === 15,
-          }
-        });
-      } else {
-        this.setState({
-          posts: {
-            items: [...this.state.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: '',
-            page,
-            hasMore: data.length === 15,
-          }
-        });
-      }
-
-      
-    } catch (e) {
-      this.setState({
-        posts: { ...this.state.posts, error: 'An unknown error occurred, try again.' },
-      });
-    }
-  }
-
-  setSearchFilter(searchQuery: string) {
-    if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
-    
-    this.searchFilterTimeoutId = setTimeout(() => (
-        this.setState({
-          filters: { ...this.state.filters, searchQuery },
-        }, this.requestPosts)
-    ), 500);
-  }
-
-  setPostStatusFilter(postStatusId: number) {
-    this.setState({
-      filters: { ...this.state.filters, byPostStatus: postStatusId },
-    }, this.requestPosts);
-  }
-
-  async requestPostStatuses() {
-    this.setState({
-      postStatuses: { ...this.state.postStatuses, areLoading: true },
-    });
-
-    try {
-      let res = await fetch('/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, filters } = this.state;
-
-    return (
-      <div className="boardContainer">
-        <div className="sidebar">
-          <NewPost
-            board={board}
-            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={filters.byPostStatus}
-          />
-        </div>
-        <PostList
-          posts={posts.items}
-          areLoading={posts.areLoading}
-          error={posts.error}
-
-          handleLoadMore={this.loadMorePosts}
-          page={posts.page}
-          hasMore={posts.hasMore}
-        />
-      </div>
-    );
-  }
-}
-
-export default Board;
+export default BoardRoot;

app/javascript/components/Roadmap/PostList.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import PostListItem from './PostListItem';
 
-import IPost from '../../interfaces/IPost';
+import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';
 
 interface Props {
-  posts: Array<IPost>;
+  posts: Array<IPostJSON>;
   boards: Array<IBoard>;
 }
 

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -3,12 +3,12 @@ import * as React from 'react';
 import PostList from './PostList';
 
 import IPostStatus from '../../interfaces/IPostStatus';
-import IPost from '../../interfaces/IPost';
+import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';
 
 interface Props {
   postStatus: IPostStatus;
-  posts: Array<IPost>;
+  posts: Array<IPostJSON>;
   boards: Array<IBoard>;
 }
 

app/javascript/components/Roadmap/index.tsx

@@ -3,14 +3,14 @@ import * as React from 'react';
 import PostListByPostStatus from './PostListByPostStatus';
 
 import IPostStatus from '../../interfaces/IPostStatus';
-import IPost from '../../interfaces/IPost';
+import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';
 
 import '../../stylesheets/components/Roadmap.scss';
 
 interface Props {
   postStatuses: Array<IPostStatus>;
-  posts: Array<IPost>;
+  posts: Array<IPostJSON>;
   boards: Array<IBoard>;
 }