Enable redux dev tools and refactor http requests

app/javascript/actions/changePostBoard.ts

@@ -2,6 +2,8 @@ import { Action } from 'redux';
 import { ThunkAction } from 'redux-thunk';
 import { State } from '../reducers/rootReducer';
 
+import buildRequestHeaders from '../helpers/buildRequestHeaders';
+
 export const CHANGE_POST_BOARD_SUCCESS = 'CHANGE_POST_BOARD_SUCCESS';
 export interface ChangePostBoardSuccessAction {
   type: typeof CHANGE_POST_BOARD_SUCCESS;
@@ -21,11 +23,7 @@ export const changePostBoard = (
   try {
     const response = await fetch(`/posts/${postId}`, {
       method: 'PATCH',
-      headers: {
+      headers: buildRequestHeaders(authenticityToken),
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': authenticityToken,
-      },
       body: JSON.stringify({
         post: {
           board_id: newBoardId,

app/javascript/actions/changePostStatus.ts

@@ -2,6 +2,8 @@ import { Action } from 'redux';
 import { ThunkAction } from 'redux-thunk';
 import { State } from '../reducers/rootReducer';
 
+import buildRequestHeaders from '../helpers/buildRequestHeaders';
+
 export const CHANGE_POST_STATUS_SUCCESS = 'CHANGE_POST_STATUS_SUCCESS';
 export interface ChangePostStatusSuccessAction {
   type: typeof CHANGE_POST_STATUS_SUCCESS;
@@ -21,11 +23,7 @@ export const changePostStatus = (
   try {
     const response = await fetch(`/posts/${postId}`, {
       method: 'PATCH',
-      headers: {
+      headers: buildRequestHeaders(authenticityToken),
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': authenticityToken,
-      },
       body: JSON.stringify({
         post: {
           post_status_id: newPostStatusId,

app/javascript/actions/submitComment.ts

@@ -3,6 +3,7 @@ import { ThunkAction } from 'redux-thunk';
 import { State } from '../reducers/rootReducer';
 
 import ICommentJSON from '../interfaces/json/IComment';
+import buildRequestHeaders from '../helpers/buildRequestHeaders';
 
 export const COMMENT_SUBMIT_START = 'COMMENT_SUBMIT_START';
 interface CommentSubmitStartAction {
@@ -57,11 +58,7 @@ export const submitComment = (
   try {
     const res = await fetch(`/posts/${postId}/comments`, {
       method: 'POST',
-      headers: {
+      headers: buildRequestHeaders(authenticityToken),
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': authenticityToken,
-      },
       body: JSON.stringify({
         comment: {
           body,

app/javascript/actions/submitLike.ts

@@ -3,6 +3,7 @@ import { ThunkAction } from "redux-thunk";
 
 import { State } from "../reducers/rootReducer";
 import ILikeJSON from "../interfaces/json/ILike";
+import buildRequestHeaders from "../helpers/buildRequestHeaders";
 
 export const LIKE_SUBMIT_SUCCESS = 'LIKE_SUBMIT_SUCCESS';
 interface LikeSubmitSuccessAction {
@@ -33,11 +34,7 @@ export const submitLike = (
   try {
     const res = await fetch(`/posts/${postId}/likes`, {
       method: isLike ? 'POST' : 'DELETE',
-      headers: {
+      headers: buildRequestHeaders(authenticityToken),
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': authenticityToken,
-      },
     });
     const json = await res.json();
 

app/javascript/actions/updateComment.ts

@@ -2,6 +2,8 @@ import { ThunkAction } from "redux-thunk";
 import { State } from "../reducers/rootReducer";
 import { Action } from "redux";
 
+import buildRequestHeaders from "../helpers/buildRequestHeaders";
+
 export const TOGGLE_COMMENT_IS_UPDATE_SUCCESS = 'TOGGLE_COMMENT_IS_UPDATE_SUCCESS';
 export interface ToggleIsUpdateSuccessAction {
   type: typeof TOGGLE_COMMENT_IS_UPDATE_SUCCESS;
@@ -24,11 +26,7 @@ export const toggleCommentIsUpdate = (
   try {
     const response = await fetch(`/posts/${postId}/comments/${commentId}`, {
       method: 'PATCH',
-      headers: {
+      headers: buildRequestHeaders(authenticityToken),
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': authenticityToken,
-      },
       body: JSON.stringify({
         comment: {
           is_post_update: !currentIsPostUpdate,

app/javascript/components/Board/NewPost.tsx

@@ -10,6 +10,7 @@ import {
 import Button from '../shared/Button';
 
 import IBoard from '../../interfaces/IBoard';
+import buildRequestHeaders from '../../helpers/buildRequestHeaders';
 
 interface Props {
   board: IBoard;
@@ -93,11 +94,7 @@ class NewPost extends React.Component<Props, State> {
     try {
       const res = await fetch('/posts', {
         method: 'POST',
-        headers: {
+        headers: buildRequestHeaders(authenticityToken),
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-          'X-CSRF-Token': authenticityToken,
-        },
         body: JSON.stringify({
           post: {
             title,

app/javascript/helpers/buildRequestHeaders.ts

@@ -0,0 +1,7 @@
+const buildRequestHeaders = (authenticityToken: string) => ({
+  Accept: 'application/json',
+  'Content-Type': 'application/json',
+  'X-CSRF-Token': authenticityToken,
+});
+
+export default buildRequestHeaders;

app/javascript/helpers/createStore.ts

@@ -1,19 +1,15 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
-// import { composeWithDevTools } from 'redux-devtools-extension';
 import thunkMiddleware from 'redux-thunk';
 
 import rootReducer from '../reducers/rootReducer';
 
-// const composeEnhancers = composeWithDevTools({
-//   trace: true,
-// });
-
 const createStoreHelper = () => (
   createStore(
     rootReducer,
-    // composeEnhancers(
+    compose(
-      applyMiddleware(thunkMiddleware)
+      applyMiddleware(thunkMiddleware),
-    // )
+      (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()
+    )
   )
 );
 

package.json

@@ -29,7 +29,6 @@
   "version": "0.1.0",
   "devDependencies": {
     "@types/react-redux": "^7.1.3",
-    "redux-devtools-extension": "^2.13.8",
     "webpack-dev-server": "^3.8.0"
   }
 }

yarn.lock

@@ -6106,11 +6106,6 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
-redux-devtools-extension@^2.13.8:
-  version "2.13.8"
-  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
-  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
-
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"