Replace TSLint with ESLint

.circleci/config.yml

@@ -28,7 +28,7 @@ jobs:
           key: v2-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: yarn tslint
+      - run: yarn eslint
       - run: yarn test:compile
       - run: yarn firebase setup:emulators:firestore
       - run:

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+      "react-app", 
+      "plugin:prettier/recommended"
+  ]
+}

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "env-cmd": "^8.0.2",
+    "eslint-config-prettier": "^4.2.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "fetch-jsonp": "^1.1.3",
     "firebase": "^5.10.1",
     "firebaseui": "^3.6.0",
@@ -43,9 +45,8 @@
     "storybook:visual": "start-storybook -p 9001 -s ./build",
     "deploy-storybook": "storybook-to-ghpages",
     "test:compile": "tsc --noEmit",
-    "tslint:prettier-check": "tslint-config-prettier-check ./tslint.json",
-    "tslint": "tslint --project ./tsconfig.json ./{src,__tests__}/**/*.{ts,tsx}",
-    "tslint:fix": "tslint --fix --force --format stylish --project ./tsconfig.json ./{src,__tests__}/**/*.{ts,tsx}",
+    "eslint": "eslint ./src/**/*.{ts,tsx}",
+    "eslint:fix": "eslint --fix ./src/**/*.{ts,tsx}",
     "prettier": "prettier --write ./{src,__tests__}/**/*.{ts,tsx}",
     "precommit": "lint-staged"
   },
@@ -82,11 +83,6 @@
     "prettier": "^1.17.0",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "ts-jest": "^24.0.2",
-    "tslint": "^5.16.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-config-standard": "^8.0.1",
-    "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^4.0.0",
     "typescript": "^3.4.5"
   },
   "browserslist": [
@@ -101,7 +97,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "tslint --fix",
+      "eslint --fix",
       "git add"
     ]
   },

src/components/atoms/Anker/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import * as properties from '../../properties';
 

src/components/atoms/Button/index.stories.tsx

@@ -1,4 +1,4 @@
-import { storiesOf, Story } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 import React from 'react';
 import Button, { PrimaryButton, WarningButton } from './index';
 

src/components/atoms/Button/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import * as properties from '../../properties';
 

src/components/atoms/CountUpAnimation/index.stories.tsx

@@ -1,4 +1,4 @@
-import { storiesOf, Story } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 import React from 'react';
 import CountUp from './index';
 

src/components/atoms/Favicon/index.stories.tsx

@@ -1,4 +1,4 @@
-import { storiesOf, Story } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 import React from 'react';
 import Favicon from './index';
 

src/components/atoms/Favicon/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { faviconSize } from '../../properties';
 

src/components/atoms/ScrollView/index.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 // inspired from ScrollView via React Native for Web

src/components/atoms/TwincleAnimation/index.tsx

@@ -60,7 +60,7 @@ function randomFloat(min: number, max: number) {
   return Math.random() * (max - min + 1) + min;
 }
 
-const Spark = (props: any) => <img src="/images/twincle-perticle.svg" {...props} />;
+const Spark = (props: any) => <img src="/images/twincle-perticle.svg" alt="twincle particle" {...props} />;
 
 const Wrapper = styled.div`
   position: relative;

src/components/atoms/Wrapper/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`

src/components/molecules/CountButton/index.stories.tsx

@@ -1,4 +1,4 @@
-import { storiesOf, Story } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { CountType } from '../../../models/consts/count-type';
 import CountButton from './index';

src/components/organisms/AnimatedCountButton/index.stories.tsx

@@ -1,4 +1,4 @@
-import { storiesOf, Story } from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { CountType } from '../../../models/consts/count-type';
 import AnimatedCountButton from './index';

src/components/organisms/Header/index.stories.tsx

@@ -1,4 +1,3 @@
-import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import Header from './index';

src/components/organisms/Header/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { FiPlus } from 'react-icons/fi';
-import { MdAdd, MdArrowBack, MdSettings } from 'react-icons/md';
+import { MdArrowBack, MdSettings } from 'react-icons/md';
 import styled from 'styled-components';
 import * as properties from '../../properties';
 
-import { Link, NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import HeaderLoadingIndicator from '../../molecules/HeaderLoadingIndicator/index';
 
 export type HeaderProps = {

src/components/organisms/SettingCell/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import Wrapper from '../../atoms/Wrapper/index';
 import PlainCell from '../../molecules/PlainCell/index';

src/components/organisms/SettingSectionHeader/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import * as properties from '../../properties';
 

src/components/pages/AddBlogPage/index.tsx

@@ -39,7 +39,7 @@ const AddBlogView: React.FC<Props> = props => {
     return () => {
       props.addBlogInitialize();
     };
-  }, []);
+  }, [props]);
 
   const handleSubmit = (url: string, reportMailEnabled: boolean) => {
     props.addBlog(firebase.auth(), url, reportMailEnabled);

src/components/pages/AuthPage/index.tsx

@@ -26,7 +26,7 @@ const AuthPage: React.FC<Props> = props => {
   useEffect(() => {
     fetchUser(firebase.auth());
     return () => undefined;
-  }, []);
+  }, [fetchUser]);
 
   const { user, loading } = userState;
   if (user) {

src/components/pages/BlogsPage/index.tsx

@@ -32,7 +32,7 @@ const BlogsPage: React.FC<Props> = props => {
   const { blog, fetchBlogs } = props;
   useEffect(() => {
     fetchBlogs(firebase.auth());
-  }, []);
+  }, [fetchBlogs]);
 
   const { blogs, loading } = blog;
   return (

src/components/pages/FeedPage/index.tsx

@@ -13,7 +13,6 @@ import { FeedActions, feedBlogURLChange, feedBlogURLClear, fetchFeed } from '../
 import { AppState } from '../../../redux/states/app-state';
 import { FeedState } from '../../../redux/states/feed-state';
 import ScrollView from '../../atoms/ScrollView/index';
-import Wrapper from '../../atoms/Wrapper/index';
 import LoadingView from '../../molecules/LoadingView/index';
 import EntryCell, { Count } from '../../organisms/EntryCell/index';
 import { colorsValue } from '../../properties';
@@ -46,7 +45,7 @@ const FeedPage: React.FC<Props> = props => {
     return () => {
       feedBlogURLClear();
     };
-  }, []);
+  }, [blogURL, feedBlogURLChange, feedBlogURLClear, fetchFeed]);
 
   return (
     <PageLayout

src/components/pages/IndexPage/index.tsx

@@ -25,7 +25,7 @@ const IndexPage: React.FC<Props> = props => {
   useEffect(() => {
     props.fetchUser(firebase.auth());
     return () => undefined;
-  }, []);
+  }, [props]);
 
   const { loading, user } = props.user;
   if (loading) {

src/components/pages/SettingPage/index.tsx

@@ -71,7 +71,7 @@ const SettingPage: React.FC<Props> = props => {
     fetchFirebaseBlog(firebase.auth(), blogURL);
     fetchUser(firebase.auth());
     return () => undefined;
-  }, []);
+  }, [blogURL, deleteBlogReset, fetchFirebaseBlog, fetchUser]);
 
   const saveSettings = (
     sendReport: boolean,

src/components/pages/SettingsPage/index.tsx

@@ -41,7 +41,7 @@ const SettingsPage: React.FC<Props> = props => {
   useEffect(() => {
     fetchBlogs(firebase.auth());
     return () => undefined;
-  }, []);
+  }, [fetchBlogs]);
 
   const blogCells = (
     <React.Fragment>
@@ -80,7 +80,7 @@ const SettingsPage: React.FC<Props> = props => {
         <Link to="/privacy" target="_blank">
           <SettingCell title="プライバシーポリシー" LeftIcon={<MdAssignmentInd size="16" />} />
         </Link>
-        <a href="https://github.com/ninjinkun/blog-feedback-app" target="_blank" rel="noopener">
+        <a href="https://github.com/ninjinkun/blog-feedback-app" target="_blank" rel="noopener noreferrer">
           <SettingCell
             title="要望・PullRequest (Github)"
             LeftIcon={<FiGithub size="16" />}

src/components/pages/SignInPage/index.tsx

@@ -31,7 +31,7 @@ const SignInPage: React.FC<Props> = props => {
   useEffect(() => {
     props.fetchUser(firebase.auth());
     return () => undefined;
-  }, []);
+  }, [props]);
 
   const { loading, user } = props.user;
   if (user) {

src/components/templates/SmartphoneLayout/index.stories.tsx

@@ -1,4 +1,3 @@
-import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import SmartphoneLayout from './index';

src/models/save-count-response.ts

@@ -1,7 +1,7 @@
 import { firestore, User } from 'firebase/app';
 
 import { CountType } from './consts/count-type';
-import { CountEntity, ItemEntity, Services } from './entities';
+import { CountEntity, ItemEntity } from './entities';
 import { serverTimestamp, writeBatch } from './repositories/app-repository';
 import { CountSaveEntities, saveItemBatch } from './repositories/item-repository';
 import { CountResponse, ItemResponse } from './responses';

src/redux/actions/add-blog-action.ts

@@ -24,14 +24,6 @@ function addBlogFetchBlogResponse(blog: BlogResponse) {
   };
 }
 
-export const FETCH_BLOG_ERROR = 'addblog/FETCH_BLOG_ERROR';
-function addBogFetchBlogError(error: Error) {
-  return {
-    type: FETCH_BLOG_ERROR as typeof FETCH_BLOG_ERROR,
-    error,
-  };
-}
-
 export const FETCH_FEED_REQUEST = 'addblog/FETCH_FEED_REQUEST';
 function addBlogFetchFeedRequest() {
   return {

src/redux/actions/blog-action.ts

@@ -1,5 +1,3 @@
-import { Action } from 'redux';
-
 import { ThunkAction } from 'redux-thunk';
 import { BlogEntity } from '../../models/entities';
 import { findAllBlogs } from '../../models/repositories/blog-repository';

src/redux/actions/feed-action.ts

@@ -2,7 +2,6 @@ import firebase from 'firebase/app';
 import 'firebase/auth';
 
 import { ItemEntity } from '../../models/entities';
-import { CountResponse, ItemResponse } from '../../models/responses';
 import { FeedFetchCountJsoonCountActions } from './feed-actions/count-jsoon-action';
 import { FeedFetchFacebookCountActions } from './feed-actions/facebook-action';
 import { FeedFirebaseActions } from './feed-actions/feed-firebase-action';

src/redux/actions/user-action.ts

@@ -106,7 +106,7 @@ export function signOut(auth: firebase.auth.Auth): ThunkAction<void, AppState, u
   return async dispatch => {
     try {
       dispatch(userFirebaseSignoutRequest());
-      const user = await auth.signOut();
+      await auth.signOut();
       dispatch(userFirebaseSignoutResponse());
     } catch (e) {
       dispatch(userFirebaseSignoutError(e));

src/redux/create-store.ts

@@ -1,4 +1,4 @@
-import { applyMiddleware, compose, createStore } from 'redux';
+import { applyMiddleware, createStore } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import createSagaMiddleware from 'redux-saga';
 import thunk from 'redux-thunk';

src/redux/sagas/ga-saga.ts

@@ -8,6 +8,6 @@ export default function* gaSaga() {
 
 function* handleUserAction(action: UserFirebaseUserResponseAction) {
   const { user } = action;
-  ReactGA.set({ userId: user.uid });
+  yield ReactGA.set({ userId: user.uid });
   return undefined;
 }