Fix eslint & prettier

PW486 · Jun 6, 2019 · 99a58aa · 99a58aa
1 parent 97c2f2f
commit 99a58aa
Show file tree

Hide file tree

Showing 24 changed files with 256 additions and 175 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -52,6 +52,8 @@ module.exports = {
     'no-console': 1,
     'no-unused-vars': 2,
     'no-use-before-define': 0,
+    'no-case-declarations': 0,
+    'no-unused-expressions': 0,
     'prefer-template': 2,
     'react/destructuring-assignment': 0,
     'react-hooks/rules-of-hooks': 'error',

diff --git a/README.md b/README.md
@@ -47,8 +47,3 @@ Need to change the **`REACT_APP_BASE_URL`**. Here is an example server. [https:/
 | Authentication      | **JWT**        |
 | Linter              | **ESLint**     |
 | Formatter           | **Prettier**   |
-
-## TODO
-
-- Linter + Formatter
-- Release
diff --git a/src/components/NotFound/index.js b/src/components/NotFound/index.js
@@ -2,14 +2,7 @@ import React from 'react';
 import { Alert } from 'antd';
 
 function NotFound() {
-  return (
-    <Alert
-      message="404 Error"
-      description="Page Not Found."
-      type="error"
-      showIcon
-    />
-  );
+  return <Alert message="404 Error" description="Page Not Found." type="error" showIcon />;
 }
 
 export default NotFound;
diff --git a/src/components/PrivateRoute/index.js b/src/components/PrivateRoute/index.js
@@ -1,14 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Route, Redirect } from 'react-router-dom';
 
 function PrivateRoute({ component: Component, ...rest }) {
   return (
-    <Route {...rest} render={props => (
-      localStorage.getItem('token')
-        ? <Component {...props} />
-        : <Redirect to={{ pathname: '/signin', state: { from: props.location } }} />
-    )} />
+    <Route
+      {...rest}
+      render={props =>
+        localStorage.getItem('token') ? <Component {...props} /> : <Redirect to={{ pathname: '/signin' }} />
+      }
+    />
   );
 }
 
+PrivateRoute.propTypes = {
+  component: PropTypes.any,
+};
+
 export default PrivateRoute;
diff --git a/src/components/Sider/index.js b/src/components/Sider/index.js
@@ -8,29 +8,33 @@ import { Layout, Icon, Menu } from 'antd';
 import routes from 'routes';
 import { makeSelectUser } from 'containers/App/selectors';
 
+/* eslint-disable indent */
 function Sider(props) {
   return (
     <Layout.Sider>
       <Menu theme="dark" selectedKeys={[props.location.pathname]} mode="inline">
-        {routes.map((route) => (
-          (!route.auth) ||
+        {routes.map(route =>
+          !route.auth ||
           (!route.permission && props.user) ||
-          (props.user && props.user.permissions.includes(route.permission)) ?
-          (
-            <Menu.Item key={route.path || "/notfound"}>
-              <Link to={route.path || "/notfound"}>
+          (props.user && props.user.permissions.includes(route.permission)) ? (
+            <Menu.Item key={route.path || '/notfound'}>
+              <Link to={route.path || '/notfound'}>
                 <Icon type={route.Icon} />
                 <span>{route.name}</span>
               </Link>
             </Menu.Item>
-          ) : (<React.Fragment />)))}
+          ) : (
+            <React.Fragment />
+          ),
+        )}
       </Menu>
     </Layout.Sider>
   );
 }
 
 Sider.propTypes = {
   user: PropTypes.object,
+  location: PropTypes.object,
 };
 
 export default connect(

diff --git a/src/containers/App/index.js b/src/containers/App/index.js
@@ -11,17 +11,18 @@ import routes from 'routes';
 export default function App() {
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Helmet titleTemplate="%s - Create React Ant Design Boilerplate" defaultTitle="Create React Ant Design Boilerplate">
+      <Helmet
+        titleTemplate="%s - Create React Ant Design Boilerplate"
+        defaultTitle="Create React Ant Design Boilerplate"
+      >
         <meta name="description" content="A Create React Ant Design Boilerplate application" />
       </Helmet>
       <Header />
       <Layout>
         <Sider />
         <Layout>
           <Layout.Content style={{ margin: '16px' }}>
-            <Switch>
-              {routes.map((route) => (route.auth ? <PrivateRoute {...route} /> : <Route {...route} />))}
-            </Switch>
+            <Switch>{routes.map(route => (route.auth ? <PrivateRoute {...route} /> : <Route {...route} />))}</Switch>
           </Layout.Content>
           <Layout.Footer style={{ textAlign: 'center' }}>Create React Ant Design Boilerplate</Layout.Footer>
         </Layout>

diff --git a/src/containers/App/reducer.js b/src/containers/App/reducer.js
@@ -5,17 +5,17 @@ import { POST_SIGN_IN_SUCCESS } from '../SignIn/constants';
 const token = localStorage.getItem('token');
 const userState = token ? { user: jwtDecode(token) } : {};
 export const initialState = {
-  ...userState
+  ...userState,
 };
 
 /* eslint-disable default-case, no-param-reassign */
 const appReducer = (state = initialState, action) =>
   produce(state, draft => {
     switch (action.type) {
       case POST_SIGN_IN_SUCCESS:
-        const token = action.payload.data.access_token;
-        localStorage.setItem('token', token);
-        draft.user = jwtDecode(token);
+        const newToken = action.payload.data.access_token;
+        localStorage.setItem('token', newToken);
+        draft.user = jwtDecode(newToken);
         break;
     }
   });

diff --git a/src/containers/App/selectors.js b/src/containers/App/selectors.js
@@ -4,14 +4,20 @@ import { initialState } from './reducer';
 const selectGlobal = state => state.global || initialState;
 const selectRouter = state => state.router;
 
-const makeSelectUser = () => createSelector(selectGlobal, globalState => globalState.user);
-const makeSelectUserId = () => createSelector(selectGlobal, globalState => globalState.user.id);
-const makeSelectUserPermissions = () => createSelector(selectGlobal, globalState => globalState.user.permissions);
+const makeSelectUser = () =>
+  createSelector(
+    selectGlobal,
+    globalState => globalState.user,
+  );
+const makeSelectUserId = () =>
+  createSelector(
+    selectGlobal,
+    globalState => globalState.user.id,
+  );
+const makeSelectUserPermissions = () =>
+  createSelector(
+    selectGlobal,
+    globalState => globalState.user.permissions,
+  );
 
-export {
-  selectGlobal,
-  selectRouter,
-  makeSelectUser,
-  makeSelectUserId,
-  makeSelectUserPermissions,
-};
+export { selectGlobal, selectRouter, makeSelectUser, makeSelectUserId, makeSelectUserPermissions };
diff --git a/src/containers/Board/actions.js b/src/containers/Board/actions.js
@@ -1,17 +1,30 @@
-import { GET_POSTS_REQUEST, GET_POSTS_FAILURE, GET_POSTS_SUCCESS, POST_POSTS_REQUEST, POST_POSTS_SUCCESS, POST_POSTS_FAILURE, HANDLE_MODAL_SHOW, HANDLE_MODAL_CANCEL, ON_CHANGE_TITLE, ON_CHANGE_TEXT, ON_CHANGE_ADD_PHOTO, ON_CHANGE_DEL_PHOTO } from './constants';
+import {
+  GET_POSTS_REQUEST,
+  GET_POSTS_FAILURE,
+  GET_POSTS_SUCCESS,
+  POST_POSTS_REQUEST,
+  POST_POSTS_SUCCESS,
+  POST_POSTS_FAILURE,
+  HANDLE_MODAL_SHOW,
+  HANDLE_MODAL_CANCEL,
+  ON_CHANGE_TITLE,
+  ON_CHANGE_TEXT,
+  ON_CHANGE_ADD_PHOTO,
+  ON_CHANGE_DEL_PHOTO,
+} from './constants';
 
-export const getPostsAction = (payload) => ({ type: GET_POSTS_REQUEST, payload });
-export const getPostsSuccess = (payload) => ({ type: GET_POSTS_SUCCESS, payload });
-export const getPostsFailure = (payload) => ({ type: GET_POSTS_FAILURE, payload });
+export const getPostsAction = payload => ({ type: GET_POSTS_REQUEST, payload });
+export const getPostsSuccess = payload => ({ type: GET_POSTS_SUCCESS, payload });
+export const getPostsFailure = payload => ({ type: GET_POSTS_FAILURE, payload });
 
-export const postPostsAction = (payload) => ({ type: POST_POSTS_REQUEST, payload });
-export const postPostsSuccess = (payload) => ({ type: POST_POSTS_SUCCESS, payload });
-export const postPostsFailure = (payload) => ({ type: POST_POSTS_FAILURE, payload });
+export const postPostsAction = payload => ({ type: POST_POSTS_REQUEST, payload });
+export const postPostsSuccess = payload => ({ type: POST_POSTS_SUCCESS, payload });
+export const postPostsFailure = payload => ({ type: POST_POSTS_FAILURE, payload });
 
-export const handleModalShowAction = (payload) => ({ type: HANDLE_MODAL_SHOW, payload });
-export const handleModalCancelAction = (payload) => ({ type: HANDLE_MODAL_CANCEL, payload });
+export const handleModalShowAction = payload => ({ type: HANDLE_MODAL_SHOW, payload });
+export const handleModalCancelAction = payload => ({ type: HANDLE_MODAL_CANCEL, payload });
 
-export const onChangeTitleAction = (payload) => ({ type: ON_CHANGE_TITLE, payload });
-export const onChangeTextAction = (payload) => ({ type: ON_CHANGE_TEXT, payload });
-export const onChangeAddPhotoAction = (payload) => ({ type: ON_CHANGE_ADD_PHOTO, payload });
-export const onChangeDelPhotoAction = (payload) => ({ type: ON_CHANGE_DEL_PHOTO, payload });
+export const onChangeTitleAction = payload => ({ type: ON_CHANGE_TITLE, payload });
+export const onChangeTextAction = payload => ({ type: ON_CHANGE_TEXT, payload });
+export const onChangeAddPhotoAction = payload => ({ type: ON_CHANGE_ADD_PHOTO, payload });
+export const onChangeDelPhotoAction = payload => ({ type: ON_CHANGE_DEL_PHOTO, payload });
diff --git a/src/containers/Board/index.js b/src/containers/Board/index.js
@@ -8,8 +8,24 @@ import { Button, Table, Modal, Input, Icon, Upload, Avatar } from 'antd';
 
 import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
-import { makeSelectPostList, makeSelectModalVisible, makeSelectModalLoading, makeSelectTitle, makeSelectText, makeSelectPhoto } from './selectors';
-import { getPostsAction, handleModalShowAction, handleModalCancelAction, postPostsAction, onChangeTitleAction, onChangeTextAction, onChangeAddPhotoAction, onChangeDelPhotoAction } from './actions';
+import {
+  makeSelectPostList,
+  makeSelectModalVisible,
+  makeSelectModalLoading,
+  makeSelectTitle,
+  makeSelectText,
+  makeSelectPhoto,
+} from './selectors';
+import {
+  getPostsAction,
+  handleModalShowAction,
+  handleModalCancelAction,
+  postPostsAction,
+  onChangeTitleAction,
+  onChangeTextAction,
+  onChangeAddPhotoAction,
+  onChangeDelPhotoAction,
+} from './actions';
 import reducer from './reducer';
 import saga from './saga';
 
@@ -28,27 +44,30 @@ const columns = [
     title: 'Text',
     dataIndex: 'text',
     key: 'text',
-    render: text => (<pre style={{marginBottom: 0, maxHeight: 100}}>{text}</pre>),
+    render: text => <pre style={{ marginBottom: 0, maxHeight: 100 }}>{text}</pre>,
   },
   {
     title: 'Photo',
     dataIndex: 'photo',
     key: 'photo',
-    render: photo => photo ?
-      (<Avatar src={process.env.REACT_APP_BASE_URL + '/' + photo} shape="square"/>) :
-      (<Avatar icon="file-image" shape="square" />),
+    render: photo =>
+      photo ? (
+        <Avatar src={`${process.env.REACT_APP_BASE_URL}/${photo}`} shape="square" />
+      ) : (
+          <Avatar icon="file-image" shape="square" />
+        ),
   },
   {
     title: 'Created At',
     dataIndex: 'createdAt',
     key: 'createdAt',
-    render: time => (<span>{time}</span>),
+    render: time => <span>{time}</span>,
   },
   {
     title: 'Updated At',
     dataIndex: 'updatedAt',
     key: 'updatedAt',
-    render: time => (<span>{time}</span>),
+    render: time => <span>{time}</span>,
   },
 ];
 
@@ -65,7 +84,9 @@ class Board extends React.Component {
           <meta name="description" content="Description of Board" />
         </Helmet>
         <div style={{ marginBottom: 16 }}>
-          <Button type="primary" onClick={this.props.handleModalShow}>Write</Button>
+          <Button type="primary" onClick={this.props.handleModalShow}>
+            Write
+          </Button>
         </div>
         <Modal
           title="Write a Post"
@@ -75,11 +96,7 @@ class Board extends React.Component {
           onCancel={this.props.handleModalCancel}
         >
           <div style={{ marginBottom: 16 }}>
-            <Input
-              placeholder="Title"
-              onChange={this.props.onChangeTitle}
-              value={this.props.title}
-            />
+            <Input placeholder="Title" onChange={this.props.onChangeTitle} value={this.props.title} />
           </div>
           <div style={{ marginBottom: 16 }}>
             <Input.TextArea
@@ -119,6 +136,10 @@ Board.propTypes = {
   postPosts: PropTypes.func,
   handleModalShow: PropTypes.func,
   handleModalCancel: PropTypes.func,
+  onChangeTitle: PropTypes.func,
+  onChangeText: PropTypes.func,
+  onChangeAddPhoto: PropTypes.func,
+  onChangeDelPhoto: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -142,9 +163,12 @@ const mapDispatchToProps = dispatch => ({
     return false;
   },
   onChangeDelPhoto: () => dispatch(onChangeDelPhotoAction()),
-})
+});
 
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
 const withReducer = injectReducer({ key: 'board', reducer });
 const withSaga = injectSaga({ key: 'board', saga });
 

diff --git a/src/containers/Board/reducer.js b/src/containers/Board/reducer.js
@@ -1,5 +1,16 @@
 import produce from 'immer';
-import { GET_POSTS_SUCCESS, HANDLE_MODAL_SHOW, HANDLE_MODAL_CANCEL, POST_POSTS_REQUEST, POST_POSTS_SUCCESS, POST_POSTS_FAILURE, ON_CHANGE_TEXT, ON_CHANGE_TITLE, ON_CHANGE_ADD_PHOTO, ON_CHANGE_DEL_PHOTO } from './constants';
+import {
+  GET_POSTS_SUCCESS,
+  HANDLE_MODAL_SHOW,
+  HANDLE_MODAL_CANCEL,
+  POST_POSTS_REQUEST,
+  POST_POSTS_SUCCESS,
+  POST_POSTS_FAILURE,
+  ON_CHANGE_TEXT,
+  ON_CHANGE_TITLE,
+  ON_CHANGE_ADD_PHOTO,
+  ON_CHANGE_DEL_PHOTO,
+} from './constants';
 
 export const initialState = {
   postList: [],

diff --git a/src/containers/Board/saga.js b/src/containers/Board/saga.js
@@ -1,15 +1,14 @@
-import { getPostsSuccess, getPostsFailure, postPostsFailure, postPostsSuccess, getPostsAction } from "./actions";
 import { takeLatest, call, put, select } from 'redux-saga/effects';
-import { GET_POSTS_REQUEST, POST_POSTS_REQUEST } from "./constants";
-import { getPostsAPI, postPostsAPI } from "./api";
-import { makeSelectTitle, makeSelectText, makeSelectPhoto } from "./selectors";
+import { getPostsSuccess, getPostsFailure, postPostsFailure, postPostsSuccess, getPostsAction } from './actions';
+import { GET_POSTS_REQUEST, POST_POSTS_REQUEST } from './constants';
+import { getPostsAPI, postPostsAPI } from './api';
+import { makeSelectTitle, makeSelectText, makeSelectPhoto } from './selectors';
 
 export function* getPostsSaga() {
   try {
     const postList = yield call(getPostsAPI);
     yield put(getPostsSuccess(postList));
-  }
-  catch (error) {
+  } catch (error) {
     yield put(getPostsFailure(error));
   }
 }
@@ -24,8 +23,7 @@ export function* postPostsSaga() {
     yield call(postPostsAPI, { title, text, photo });
     yield put(postPostsSuccess());
     yield put(getPostsAction());
-  }
-  catch (error) {
+  } catch (error) {
     yield put(postPostsFailure(error));
   }
 }