update eslint configuration

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ['react-app'],
+  rules: {
+    'react/react-in-jsx-scope': 0,
+    'react/jsx-pascal-case': [
+      'warn',
+      {
+        allowAllCaps: true,
+        ignore: [],
+      },
+    ],
+  },
+};

eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "react-app"
-}

package.json

@@ -8,7 +8,8 @@
     "postbuild": "next-sitemap",
     "start": "next start",
     "start:production": "NODE_ENV=production yarn run start",
-    "codegen": "graphql-codegen"
+    "codegen": "graphql-codegen",
+    "lint": "eslint . --ext ts --ext tsx --ext js"
   },
   "dependencies": {
     "@kichiyaki/roboto": "^1.0.0",

src/common/Section/Section.tsx

@@ -32,12 +32,12 @@ const Section = ({
   return (
     <section
       className={clsx(className, classes.section, {
-        ['is-medium']: size === Size.Medium,
-        ['is-large']: size === Size.Large,
-        ['is-primary']: bgColor === BgColor.Primary,
-        ['is-primary-dark']: bgColor === BgColor.PrimaryDark,
-        ['is-secondary']: bgColor === BgColor.Secondary,
-        ['is-secondary-dark']: bgColor === BgColor.SecondaryDark,
+        'is-medium': size === Size.Medium,
+        'is-large': size === Size.Large,
+        'is-primary': bgColor === BgColor.Primary,
+        'is-primary-dark': bgColor === BgColor.PrimaryDark,
+        'is-secondary': bgColor === BgColor.Secondary,
+        'is-secondary-dark': bgColor === BgColor.SecondaryDark,
       })}
       {...rest}
     >

src/features/IndexPage/components/Header/QualificationSelector.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 import { Maybe, Qualification } from 'libs/graphql';
 import { SECTION_ID as PROFESSIONS_SECTION_ID } from '../Professions/Professions';
 

src/features/IndexPage/components/Timer/Timer.tsx

@@ -3,7 +3,7 @@ import { useCountdown } from 'libs/hooks';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Container, Grid, Typography } from '@material-ui/core';
-import Section, { BgColor, Size } from 'common/Section/Section';
+import Section, { BgColor } from 'common/Section/Section';
 
 export interface TimerProps {
   dateOfTheExam: Date | string;

src/libs/hooks/usePrompt.ts

@@ -3,6 +3,13 @@ import { useEffect, useRef, useCallback } from 'react';
 export const usePrompt = (when: boolean) => {
   const whenRef = useRef(when);
 
+  const handleUnload = useCallback((event: BeforeUnloadEvent) => {
+    if (whenRef.current) {
+      event.preventDefault();
+      event.returnValue = '';
+    }
+  }, []);
+
   useEffect(() => {
     whenRef.current = when;
   }, [when]);
@@ -12,12 +19,5 @@ export const usePrompt = (when: boolean) => {
     return () => {
       window.removeEventListener('beforeunload', handleUnload);
     };
-  }, []);
-
-  const handleUnload = useCallback((event: BeforeUnloadEvent) => {
-    if (whenRef.current) {
-      event.preventDefault();
-      event.returnValue = '';
-    }
-  }, []);
+  }, [handleUnload]);
 };