Add Redux and use it for state management

app/javascript/actions/changeFilters.ts

@@ -0,0 +1,27 @@
+export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER';
+interface SetSearchFilterAction {
+  type: typeof SET_SEARCH_FILTER;
+  searchQuery: string;
+}
+
+export const SET_POST_STATUS_FILTER = 'SET_POST_STATUS_FILTER';
+interface SetPostStatusFilterAction {
+  type: typeof SET_POST_STATUS_FILTER;
+  postStatusId: number;
+}
+
+
+export const setSearchFilter = (searchQuery: string): SetSearchFilterAction => ({
+  type: SET_SEARCH_FILTER,
+  searchQuery,
+});
+
+export const setPostStatusFilter = (postStatusId: number): SetPostStatusFilterAction => ({
+  type: SET_POST_STATUS_FILTER,
+  postStatusId,
+});
+
+
+export type ChangeFiltersActionTypes =
+  SetSearchFilterAction |
+  SetPostStatusFilterAction;

app/javascript/actions/requestPostStatuses.ts

@@ -0,0 +1,59 @@
+import { Action } from 'redux';
+import { ThunkAction } from 'redux-thunk';
+
+import IPostStatus from '../interfaces/IPostStatus';
+
+import { State } from '../reducers/rootReducer';
+
+export const POST_STATUSES_REQUEST_START = 'POST_STATUSES_REQUEST_START';
+interface PostStatusesRequestStartAction {
+  type: typeof POST_STATUSES_REQUEST_START;
+}
+
+export const POST_STATUSES_REQUEST_SUCCESS = 'POST_STATUSES_REQUEST_SUCCESS';
+interface PostStatusesRequestSuccessAction {
+  type: typeof POST_STATUSES_REQUEST_SUCCESS;
+  postStatuses: Array<IPostStatus>;
+}
+
+export const POST_STATUSES_REQUEST_FAILURE = 'POST_STATUSES_REQUEST_FAILURE';
+interface PostStatusesRequestFailureAction {
+  type: typeof POST_STATUSES_REQUEST_FAILURE;
+  error: string;
+}
+
+export type PostStatusesRequestActionTypes =
+  PostStatusesRequestStartAction |
+  PostStatusesRequestSuccessAction |
+  PostStatusesRequestFailureAction
+
+
+const postStatusesRequestStart = (): PostStatusesRequestActionTypes => ({
+  type: POST_STATUSES_REQUEST_START,
+});
+
+const postStatusesRequestSuccess = (
+  postStatuses: Array<IPostStatus>
+): PostStatusesRequestActionTypes => ({
+  type: POST_STATUSES_REQUEST_SUCCESS,
+  postStatuses,
+});
+
+const postStatusesRequestFailure = (error: string): PostStatusesRequestActionTypes => ({
+  type: POST_STATUSES_REQUEST_FAILURE,
+  error,
+});
+
+export const requestPostStatuses = (): ThunkAction<void, State, null, Action<string>> => (
+  async (dispatch) => {
+    dispatch(postStatusesRequestStart());
+
+    try {
+      const response = await fetch('/post_statuses');
+      const json = await response.json();
+      dispatch(postStatusesRequestSuccess(json));
+    } catch (e) {
+      dispatch(postStatusesRequestFailure(e));
+    }
+  }
+)

app/javascript/actions/requestPosts.ts

@@ -0,0 +1,68 @@
+import { Action } from 'redux';
+import { ThunkAction } from 'redux-thunk';
+
+import IPostJSON from '../interfaces/json/IPost';
+
+import { State } from '../reducers/rootReducer';
+
+export const POSTS_REQUEST_START = 'POSTS_REQUEST_START';
+interface PostsRequestStartAction {
+  type: typeof POSTS_REQUEST_START;
+}
+
+export const POSTS_REQUEST_SUCCESS = 'POSTS_REQUEST_SUCCESS';
+interface PostsRequestSuccessAction {
+  type: typeof POSTS_REQUEST_SUCCESS;
+  posts: Array<IPostJSON>;
+  page: number;
+}
+
+export const POSTS_REQUEST_FAILURE = 'POSTS_REQUEST_FAILURE';
+interface PostsRequestFailureAction {
+  type: typeof POSTS_REQUEST_FAILURE;
+  error: string;
+}
+
+export type PostsRequestActionTypes =
+  PostsRequestStartAction |
+  PostsRequestSuccessAction |
+  PostsRequestFailureAction;
+
+
+const postsRequestStart = (): PostsRequestActionTypes => ({
+  type: POSTS_REQUEST_START,
+});
+
+const postsRequestSuccess = (posts: Array<IPostJSON>, page: number): PostsRequestActionTypes => ({
+  type: POSTS_REQUEST_SUCCESS,
+  posts,
+  page,
+});
+
+const postsRequestFailure = (error: string): PostsRequestActionTypes => ({
+  type: POSTS_REQUEST_FAILURE,
+  error,
+});
+
+export const requestPosts = (
+  boardId: number,
+  page: number,
+  searchQuery: string,
+  postStatusId: number,
+): ThunkAction<void, State, null, Action<string>> => async (dispatch) => {
+  dispatch(postsRequestStart());
+
+  try {
+    let params = '';
+    params += `page=${page}`;
+    params += `&board_id=${boardId}`;
+    if (searchQuery) params += `&search=${searchQuery}`;
+    if (postStatusId) params += `&post_status_id=${postStatusId}`;
+
+    const response = await fetch(`/posts?${params}`);
+    const json = await response.json();
+    dispatch(postsRequestSuccess(json, page));
+  } catch (e) {
+    dispatch(postsRequestFailure(e));
+  }
+}