Add Redux and use it for state management

app/javascript/reducers/filtersReducer.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeFiltersActionTypes,
+  SET_SEARCH_FILTER,
+  SET_POST_STATUS_FILTER,
+} from '../actions/changeFilters';
+
+export interface FiltersState {
+  searchQuery: string;
+  postStatusId: number;
+}
+
+const initialState: FiltersState = {
+  searchQuery: '',
+  postStatusId: null,
+}
+
+const filtersReducer = (
+  state = initialState,
+  action: ChangeFiltersActionTypes,
+) => {
+  switch (action.type) {
+    case SET_SEARCH_FILTER:
+      return {
+        ...state,
+        searchQuery: action.searchQuery,
+      };
+
+    case SET_POST_STATUS_FILTER:
+      return {
+        ...state,
+        postStatusId: action.postStatusId,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default filtersReducer;

app/javascript/reducers/postReducer.ts

@@ -0,0 +1,34 @@
+import IPost from '../interfaces/IPost';
+
+const initialState: IPost = {
+  id: 0,
+  title: '',
+  description: null,
+  boardId: 0,
+  postStatusId: null,
+  userId: 0,
+  createdAt: '',
+};
+
+const postReducer = (
+  state = initialState,
+  action,
+): IPost => {
+  switch (action.type) {
+    case 'CONVERT':
+      return {
+        id: action.post.id,
+        title: action.post.title,
+        description: action.post.description,
+        boardId: action.post.board_id,
+        postStatusId: action.post.post_status_id,
+        userId: action.post.user_id,
+        createdAt: action.post.created_at,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default postReducer;

app/javascript/reducers/postStatusesReducer.ts

@@ -0,0 +1,57 @@
+import {
+  PostStatusesRequestActionTypes,
+  POST_STATUSES_REQUEST_START,
+  POST_STATUSES_REQUEST_SUCCESS,
+  POST_STATUSES_REQUEST_FAILURE,
+} from '../actions/requestPostStatuses';
+
+import IPostStatus from '../interfaces/IPostStatus';
+
+export interface PostStatusesState {
+  items: Array<IPostStatus>;
+  areLoading: boolean;
+  error: string;
+}
+
+const initialState: PostStatusesState = {
+  items: [],
+  areLoading: false,
+  error: '',
+}
+
+const postStatusesReducer = (
+  state = initialState,
+  action: PostStatusesRequestActionTypes,
+) => {
+  switch (action.type) {
+    case POST_STATUSES_REQUEST_START:
+      return {
+        ...state,
+        areLoading: true,
+      };
+
+    case POST_STATUSES_REQUEST_SUCCESS:
+      return {
+        ...state,
+        items: action.postStatuses.map(postStatus => ({
+          id: postStatus.id,
+          name: postStatus.name,
+          color: postStatus.color,
+        })),
+        areLoading: false,
+        error: '',
+      };
+
+    case POST_STATUSES_REQUEST_FAILURE:
+      return {
+        ...state,
+        areLoading: false,
+        error: action.error,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default postStatusesReducer;

app/javascript/reducers/postsReducer.ts

@@ -0,0 +1,85 @@
+import IPost from '../interfaces/IPost';
+
+import { FiltersState } from './filtersReducer';
+
+import postReducer from './postReducer';
+import filtersReducer from './filtersReducer';
+
+import {
+  PostsRequestActionTypes,
+  POSTS_REQUEST_START,
+  POSTS_REQUEST_SUCCESS,
+  POSTS_REQUEST_FAILURE,
+} from '../actions/requestPosts';
+
+import {
+  ChangeFiltersActionTypes,
+  SET_SEARCH_FILTER,
+  SET_POST_STATUS_FILTER,
+} from '../actions/changeFilters';
+
+export interface PostsState {
+  items: Array<IPost>;
+  page: number;
+  haveMore: boolean;
+  areLoading: boolean;
+  error: string;
+  filters: FiltersState;
+}
+
+const initialState: PostsState = {
+  items: [],
+  page: 0,
+  haveMore: true,
+  areLoading: false,
+  error: '',
+  filters: { // improve
+    searchQuery: '',
+    postStatusId: null,
+  },
+};
+
+const postsReducer = (
+  state = initialState,
+  action: PostsRequestActionTypes | ChangeFiltersActionTypes,
+): PostsState => {
+  switch (action.type) {
+    case POSTS_REQUEST_START:
+      return {
+        ...state,
+        areLoading: true,
+      };
+
+    case POSTS_REQUEST_SUCCESS:
+      return {
+        ...state,
+        items: action.page === 1 ?
+          action.posts.map(post => postReducer(undefined, {type: 'CONVERT', post})) //improve
+          :
+          [...state.items, ...action.posts.map(post => postReducer(undefined, {type: 'CONVERT', post}))],
+        page: action.page,
+        haveMore: action.posts.length === 15,
+        areLoading: false,
+        error: '',
+      };
+
+    case POSTS_REQUEST_FAILURE:
+      return {
+        ...state,
+        areLoading: false,
+        error: action.error,
+      };
+
+    case SET_SEARCH_FILTER:
+    case SET_POST_STATUS_FILTER:
+      return {
+        ...state,
+        filters: filtersReducer(state.filters, action),
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default postsReducer;

app/javascript/reducers/rootReducer.ts

@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux';
+
+import postsReducer from './postsReducer';
+import postStatusesReducer from './postStatusesReducer';
+
+const rootReducer = combineReducers({
+  posts: postsReducer,
+  postStatuses: postStatusesReducer,
+});
+
+export type State = ReturnType<typeof rootReducer>
+export default rootReducer;