refactor: apply eslint suggestions

Author: parksb

client/.eslintrc

@@ -14,7 +14,26 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
-    "react/prop-types": 0,
-    "quotes": ["error", "single"]
+    "quotes": ["error", "single"],
+    "max-len": ["warn", { "code": 150 }],
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+    "no-restricted-globals": "warn",
+    "import/no-unresolved": "error"
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx", ".d.ts"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".ts", ".tsx", ".d.ts"],
+        "moduleDirectory": ["node_modules"]
+      }
+    }
   }
 }

client/package.json

@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "scripts": {
     "start": "ts-node tools/esbuild.serve.ts",
-    "build": "npm run check && mkdir -p dist && cp -R public/* dist && ts-node tools/esbuild.build.ts",
-    "check": "tsc -p tsconfig.json --noEmit"
+    "build": "npm run lint && npm run check && mkdir -p dist && cp -R public/* dist && ts-node tools/esbuild.build.ts",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint src --ext .ts --ext .tsx"
   },
   "engines": {
     "node": ">=14",

client/src/api/auth.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import SHA3 from 'crypto-js/sha3';
 
 import Http from '../utils/http';
@@ -25,8 +26,10 @@ async function fetchActiveUserSessions(accessToken: string): Promise<ActiveUserS
   const url = `${serverBaseUrl}/auth/token`;
 
   try {
-    return await Http.get<ActiveUserSession[]>(url, accessToken);
-  } catch (e) { /**/ }
+    return Http.get<ActiveUserSession[]>(url, accessToken);
+  } catch (e) {
+    // do nothing
+  }
 
   return [];
 }
@@ -35,8 +38,10 @@ async function fetchAccessToken(): Promise<string | null> {
   const url = `${serverBaseUrl}/auth/token/access`;
 
   try {
-    return await Http.postWithoutBody<string>(url);
-  } catch (e) { /**/ }
+    return Http.post<string, string | null>(url);
+  } catch (e) {
+    // do nothing
+  }
 
   return null;
 }
@@ -51,7 +56,7 @@ async function login(email: string, password: string): Promise<string | null> {
   };
 
   try {
-    return await Http.post<LoginBody, string>(url, body);
+    return Http.post<LoginBody, string>(url, body);
   } catch (e) {
     const i18n = getI18n({
       error404: {
@@ -87,7 +92,7 @@ async function logout(): Promise<boolean | null> {
       },
     });
 
-    alert(i18n.text('error'))
+    alert(i18n.text('error'));
   }
 
   return null;
@@ -105,7 +110,7 @@ async function setSignUpToken(name: string, email: string, password: string, ava
   };
 
   try {
-    return await Http.post<SetSignUpTokenBody, string>(url, body);
+    return Http.post<SetSignUpTokenBody, string>(url, body);
   } catch (e) {
     const i18n = getI18n({
       error: {
@@ -127,7 +132,7 @@ async function setPasswordToken(email: string): Promise<boolean | null> {
   };
 
   try {
-    return await Http.post<SetPasswordTokenBody, boolean>(url, body);
+    return Http.post<SetPasswordTokenBody, boolean>(url, body);
   } catch (e) {
     const i18n = getI18n({
       error404: {
@@ -150,4 +155,6 @@ async function setPasswordToken(email: string): Promise<boolean | null> {
   return null;
 }
 
-export { login, logout, setSignUpToken, setPasswordToken, fetchAccessToken, fetchActiveUserSessions };
+export {
+  login, logout, setSignUpToken, setPasswordToken, fetchAccessToken, fetchActiveUserSessions,
+};

client/src/api/post.ts

@@ -49,9 +49,8 @@ async function fetchPosts(publicKey: string, accessToken: string): Promise<Summa
 
         return null;
       }).filter((post) => post !== null) as SummarizedPost[];
-    } else {
-      return [];
     }
+    return [];
   } catch (e) {
     return [];
   }
@@ -71,18 +70,19 @@ async function fetchPost(id: number, publicKey: string, accessToken: string): Pr
     const privateKey = Secret.decryptAES(encryptedPrivateKey, publicKey);
 
     if (privateKey) {
-      const { id, title, content, date, created_at, updated_at } = post;
+      const {
+        title, content, date, created_at: createdAt, updated_at: updatedAt,
+      } = post;
       return {
         id,
         title: Secret.decryptAES(title, privateKey),
         content: Secret.decryptAES(content, privateKey),
         date,
-        created_at,
-        updated_at,
+        created_at: createdAt,
+        updated_at: updatedAt,
       };
-    } else {
-      return null;
     }
+    return null;
   } catch (e) {
     return null;
   }
@@ -171,7 +171,7 @@ async function deletePost(id: number, accessToken: string): Promise<boolean> {
     const url = `${serverBaseUrl}/posts/${id}`;
     return await Http.delete<boolean>(url, accessToken);
   } catch (e) {
-     const i18n = getI18n({
+    const i18n = getI18n({
       error: {
         ko: '삭제에 실패했습니다',
         en: 'Failed to delete',
@@ -184,4 +184,6 @@ async function deletePost(id: number, accessToken: string): Promise<boolean> {
   return false;
 }
 
-export { fetchPosts, createPost, updatePost, fetchPost, deletePost };
+export {
+  fetchPosts, createPost, updatePost, fetchPost, deletePost,
+};

client/src/api/user.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import SHA3 from 'crypto-js/sha3';
 
 import Http from '../utils/http';
@@ -75,7 +76,7 @@ async function updateUser(userId: string, accessToken: string, password?: string
 
   const body: UpdateUserBody = {
     password: password ? SHA3(password, { outputLength: 512 }).toString() : undefined,
-    name: name,
+    name,
     avatar_url: avatar,
   };
 
@@ -121,4 +122,6 @@ async function resetPassword(email: string, tokenId: string, temporaryPassword:
   return null;
 }
 
-export { fetchUser, createUser, updateUser, resetPassword };
+export {
+  fetchUser, createUser, updateUser, resetPassword,
+};

client/src/components/Button.tsx

@@ -1,4 +1,4 @@
-import React, {ButtonHTMLAttributes} from 'react';
+import React, { ButtonHTMLAttributes } from 'react';
 import styled from 'styled-components';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement>{
@@ -9,17 +9,15 @@ const StyledButton = styled.button`
   font-size: 14px;
   border: 1px solid #000000;
   padding: 5px 10px;
-  background-color: ${props => props.disabled ? '#e9e9e9' : '#ffffff'};
-  color: ${props => props.disabled ? '#808080' : '#000000'};
-  cursor: ${props => props.disabled ? 'arrow' : 'pointer'};
+  background-color: ${(props) => (props.disabled ? '#e9e9e9' : '#ffffff')};
+  color: ${(props) => (props.disabled ? '#808080' : '#000000')};
+  cursor: ${(props) => (props.disabled ? 'arrow' : 'pointer')};
 
   &:hover {
-    background-color: ${props => props.disabled ? '#e9e9e9' : '#ffce05'};
+    background-color: ${(props) => (props.disabled ? '#e9e9e9' : '#ffce05')};
   }
 `;
 
-const Button: React.FC<Props> = ({ children, disabled, ...props }) => {
-  return <StyledButton disabled={disabled} {...props}>{children}</StyledButton>
-};
+const Button: React.FC<Props> = ({ children, disabled, ...props }) => <StyledButton disabled={disabled} {...props}>{children}</StyledButton>;
 
 export default Button;

client/src/components/Checkbox.tsx

@@ -22,7 +22,7 @@ const Checkbox: React.FC<Props> = ({ text, valueState }) => {
   return <label>
     <Input type='checkbox' checked={value} onChange={change} />
     {text}
-  </label>
+  </label>;
 };
 
 export default Checkbox;

client/src/components/Container.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+import styled from 'styled-components';
 
-import { Section, SectionProps } from '../components';
+import { Section, SectionProps } from './Section';
 
 export interface ContainerProps extends SectionProps {
   fullWidth?: boolean;
@@ -9,12 +9,11 @@ export interface ContainerProps extends SectionProps {
 export const Container = styled(Section)<ContainerProps>`
   display: flex;
   width: 100%;
-  flex: ${props => !props.row && props.fullHeight && 1};
-  height: ${props => props.fullHeight ? '100%' : 'auto'};
-  max-width: ${props => props.fullWidth ? 'none' : '800px'};
-  margin-top: ${props => props.top ? `${props.top}px` : 0};
-  margin-bottom: ${props => props.bottom ? `${props.bottom}px` : 0};
+  flex: ${(props) => !props.row && props.fullHeight && 1};
+  height: ${(props) => (props.fullHeight ? '100%' : 'auto')};
+  max-width: ${(props) => (props.fullWidth ? 'none' : '800px')};
+  margin-top: ${(props) => (props.top ? `${props.top}px` : 0)};
+  margin-bottom: ${(props) => (props.bottom ? `${props.bottom}px` : 0)};
   margin-right: auto;
   margin-left: auto;
 `;
-

client/src/components/Footer.tsx

@@ -39,15 +39,13 @@ const ListItem = styled.li`
   font-size: 12px;
 `;
 
-const Footer: React.FC = () => {
-  return <FooterContainer>
+const Footer: React.FC = () => <FooterContainer>
     <List>
       <ListItem>© 2020 Darim.</ListItem>
       <ListItem><StyledLink to='/static/terms'>Terms</StyledLink></ListItem>
       <ListItem><StyledLink to='/static/privacy'>Privacy</StyledLink></ListItem>
       <ListItem><StyledAnchor href='https://github.com/parksb/darim'>GitHub</StyledAnchor></ListItem>
     </List>
-  </FooterContainer>
-};
+  </FooterContainer>;
 
 export default Footer;

client/src/components/Header.tsx

@@ -37,7 +37,7 @@ const UserAvatar = styled.div<{ src: string }>`
   height: 35px;
   background-color: #c0c0c0;
   border-radius: 50%;
-  background-image: url(${props => props.src || ''});
+  background-image: url(${(props) => props.src || ''});
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -60,7 +60,7 @@ const Header: React.FC<Props> = ({ session }) => {
         <UserAvatar src={session?.user?.avatar_url} />
       </Link>
     )}
-  </HeaderContainer>
+  </HeaderContainer>;
 };
 
 export default Header;