Apply eslint

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+src/serviceWorker.ts

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "extends": ["airbnb-typescript", "prettier", "plugin:@typescript-eslint/eslint-recommended"],
+  "rules": {},
+  "plugins": ["@typescript-eslint"]
+}

package.json

@@ -24,8 +24,9 @@
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^4.0.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "typescript": "^3.7.5",
@@ -37,7 +38,9 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint --fix . --ext .ts,.tsx"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -71,6 +74,14 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/redux": "^3.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@typescript-eslint/parser": "^4.9.0",
+    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "gh-pages": "^3.1.0"
   }
 }

src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { HashRouter as Router } from 'react-router-dom';
-import { Route, Redirect } from 'react-router-dom';
+import { HashRouter as Router, Route, Redirect } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';

src/actions/docActions.ts

@@ -2,7 +2,12 @@ import { ActionCreator, Dispatch } from 'redux';
 import { ThunkAction } from 'redux-thunk';
 import yorkie, { Client, Document } from 'yorkie-js-sdk';
 
-import { IDocState } from '../reducers/docReducer';
+export interface IDocState {
+  client: Client | null;
+  doc: Document | null;
+  loading: boolean;
+  errorMessage: string;
+}
 
 export enum DocActionTypes {
   ATTACH_DOC = 'ATTACH_DOC',
@@ -27,8 +32,8 @@ export interface IErrorAction {
 }
 export type DocActions = AttachDocAction | ILoadDocAction | IErrorAction;
 
-/*<Promise<Return Type>, State Interface, Type of Param, Type of Action> */
-export const AttachDocAction: ActionCreator<ThunkAction<Promise<any>, IDocState, null, AttachDocAction>> = (
+/** <Promise<Return Type>, State Interface, Type of Param, Type of Action> */
+export const AttachDoc: ActionCreator<ThunkAction<Promise<any>, IDocState, null, AttachDocAction>> = (
   docKey: string,
 ) => {
   return async (dispatch: Dispatch) => {
@@ -48,6 +53,7 @@ export const AttachDocAction: ActionCreator<ThunkAction<Promise<any>, IDocState,
 
       dispatch({ type: DocActionTypes.ATTACH_DOC, doc, client });
     } catch (err) {
+      // eslint-disable-next-line no-console
       console.error(err);
       dispatch({ type: DocActionTypes.ERROR, errorMessage: err.message });
     }

src/components/Editor/ClientCursor.ts

@@ -10,8 +10,11 @@ const REMOVE_TIME = (duration + delay) * SECOND;
 // REF https://github.com/FujitsuLaboratories/cattaz/blob/master/src/AppEnabledWikiEditorCodeMirror.jsx#L24
 class ClientCursor {
   id: string;
+
   color: string;
+
   marker: CodeMirror.TextMarker | null;
+
   lineMarker: CodeMirror.TextMarker | null;
 
   constructor(id: string, color: string) {

src/components/Editor/CodeEditor.tsx

@@ -10,7 +10,7 @@ import randomColor from 'randomcolor';
 import ClientCursor from './ClientCursor';
 
 import { IAppState } from '../../store/store';
-import { AttachDocAction, loadDocAction } from '../../actions/docActions';
+import { AttachDoc, loadDocAction } from '../../actions/docActions';
 import { ConnectionStatus, AddPeer, DisconnectPeer } from '../../actions/peerActions';
 
 import 'codemirror/lib/codemirror.css';
@@ -34,6 +34,7 @@ export default function CodeEditor(props: CodeEditorProps) {
   const dispatch = useDispatch();
   const classes = useStyles();
 
+  const { docKey } = props;
   const doc = useSelector((state: IAppState) => state.docState.doc);
   const client = useSelector((state: IAppState) => state.docState.client);
   const loading = useSelector((state: IAppState) => state.docState.loading);
@@ -59,13 +60,13 @@ export default function CodeEditor(props: CodeEditorProps) {
   // Attach document
   useEffect(() => {
     dispatch(loadDocAction(true));
-    dispatch(AttachDocAction(props.docKey));
-  }, [props.docKey, dispatch]);
+    dispatch(AttachDoc(docKey));
+  }, [docKey, dispatch]);
 
   // Subscribe other client
   useEffect(() => {
     if (!client || !doc) {
-      return;
+      return () => {};
     }
 
     const disconnectClient = (clientId: string) => {
@@ -81,12 +82,12 @@ export default function CodeEditor(props: CodeEditorProps) {
         const newPeerClientsId: string[] = event.value[doc.getKey().toIDString()];
         const setNewPeerClientsId = new Set(newPeerClientsId);
 
-        for (const clientId of Object.keys(peerClients)) {
+        Object.keys(peerClients).forEach((clientId) => {
           if (setNewPeerClientsId.has(clientId) && peerClients[clientId].status === ConnectionStatus.Connected) {
-            continue;
+            return;
           }
           disconnectClient(clientId);
-        }
+        });
       }
     });
 
@@ -125,10 +126,10 @@ export default function CodeEditor(props: CodeEditorProps) {
           clientCursor!.updateLine(editor, fromPos, toPos);
         };
 
-        doc?.subscribe((event: any) => {
+        doc.subscribe((event: any) => {
           if (event.name === 'remote-change') {
             event.value.forEach((change: any) => {
-              const actor = change.id.actor;
+              const { actor } = change.id;
               if (actor !== client.getID()) {
                 if (!otherClientsCursor.current.has(actor)) {
                   connectClient(actor);
@@ -142,10 +143,10 @@ export default function CodeEditor(props: CodeEditorProps) {
 
         const root = doc.getRootObject() as any;
         root.content.onChanges((changes: any) => {
-          for (const change of changes) {
-            const actor = change.actor;
-            const from = change.from;
-            const to = change.to;
+          changes.forEach((change: any) => {
+            const { actor } = change;
+            const { from } = change;
+            const { to } = change;
             if (change.type === 'content') {
               const content = change.content || '';
 
@@ -170,7 +171,7 @@ export default function CodeEditor(props: CodeEditorProps) {
                 updateLine(actor, fromPos, toPos);
               }
             }
-          }
+          });
         });
 
         // We need to subtract the height of NavBar.
@@ -186,7 +187,7 @@ export default function CodeEditor(props: CodeEditorProps) {
         const from = editor.indexFromPos(data.ranges[0].anchor);
         const to = editor.indexFromPos(data.ranges[0].head);
 
-        doc?.update((root: any) => {
+        doc.update((root: any) => {
           root.content.updateSelection(from, to);
         });
       }}
@@ -199,7 +200,7 @@ export default function CodeEditor(props: CodeEditorProps) {
         const to = editor.indexFromPos(change.to);
         const content = change.text.join('\n');
 
-        doc?.update((root: any) => {
+        doc.update((root: any) => {
           root.content.edit(from, to, content);
         });
       }}

src/pages/DocPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 
 import NavBar from '../components/NavBar';
 import CodeEditor from '../components/Editor/CodeEditor';
@@ -9,7 +9,7 @@ type DocPageProps = {
   docKey: string;
 };
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     root: {
       flexGrow: 1,
@@ -19,7 +19,10 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function DocPage(props: RouteComponentProps<DocPageProps>) {
   const classes = useStyles();
-  const docKey = props.match.params.docKey;
+  const {
+    match: { params },
+  } = props;
+  const { docKey } = params;
 
   return (
     <div className={classes.root}>

src/reducers/docReducer.ts

@@ -1,14 +1,6 @@
 import { Reducer } from 'redux';
-import { Client, Document } from 'yorkie-js-sdk';
 
-import { DocActionTypes, DocActions } from '../actions/docActions';
-
-export interface IDocState {
-  client: Client | null;
-  doc: Document | null;
-  loading: boolean;
-  errorMessage: string;
-}
+import { DocActionTypes, DocActions, IDocState } from '../actions/docActions';
 
 const initialDocState: IDocState = {
   client: null,
@@ -17,7 +9,7 @@ const initialDocState: IDocState = {
   errorMessage: '',
 };
 
-export const docReducer: Reducer<IDocState, DocActions> = (state = initialDocState, action) => {
+const docReducer: Reducer<IDocState, DocActions> = (state = initialDocState, action) => {
   switch (action.type) {
     case DocActionTypes.ATTACH_DOC: {
       return {
@@ -43,3 +35,5 @@ export const docReducer: Reducer<IDocState, DocActions> = (state = initialDocSta
       return state;
   }
 };
+
+export default docReducer;

src/store/store.ts

@@ -4,16 +4,17 @@
  * combineReducers: Merges reducers into one
  * createStore: Creates a Redux store that holds the state tree
  * Store: The TS Type used for the store, or state tree
- **/
+ */
 import { applyMiddleware, combineReducers, createStore, Store } from 'redux';
 
 /**
  * Thunk
  * Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
- **/
+ */
 import thunk from 'redux-thunk';
 // Import reducers and state type
-import { IDocState, docReducer } from '../reducers/docReducer';
+import { IDocState } from '../actions/docActions';
+import docReducer from '../reducers/docReducer';
 import { PeerState, peerReducer } from '../reducers/peerReducer';
 
 // Create an interface for the application state

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -17,9 +13,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "allowJs": true
+    "allowJs": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }