Update node modules

.eslintrc.json

@@ -27,6 +27,7 @@
     "@typescript-eslint"
   ],
   "settings": {
+    "react": { "version": "detect" },
     "import/resolver": {
       "node": {
         "paths": ["src"],
@@ -61,6 +62,10 @@
     "@typescript-eslint/no-empty-function": ["off"],
     "jsx-a11y/label-has-associated-control": "off",
     "react/jsx-one-expression-per-line": "off",
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": "error"
   }
-}
+}

.node-version

@@ -1 +1 @@
-v10.22.0
+14.15.1

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

firebase.json

@@ -24,6 +24,9 @@
     "rules": "storage.rules"
   },
   "emulators": {
+    "auth": {
+      "port": "9099"
+    },
     "functions": {
       "port": 5001
     },

functions/.node-version

@@ -0,0 +1 @@
+12.19.1

functions/package.json

@@ -10,20 +10,21 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "10"
+    "node": "12"
   },
   "main": "lib/index.js",
   "dependencies": {
     "date-fns": "^2.16.1",
     "date-fns-tz": "^1.0.10",
-    "firebase-admin": "^8.10.0",
-    "firebase-functions": "^3.6.1",
-    "jsonwebtoken": "^8.5.1"
+    "firebase-admin": "^9.6.0",
+    "firebase-functions": "^3.13.2",
+    "jsonwebtoken": "^8.5.1",
+    "npm-check-updates": "^11.3.0"
   },
   "devDependencies": {
     "@types/jsonwebtoken": "^8.5.0",
     "firebase-functions-test": "^0.2.0",
-    "typescript": "^3.8.0"
+    "typescript": "^4.2.3"
   },
   "private": true
 }

functions/tsconfig.json

@@ -3,6 +3,9 @@
     "typeRoots": [
       "node_modules/@types"
     ],
+    "lib": [
+      "es2018"
+    ],
     "module": "commonjs",
     "noImplicitReturns": true,
     "noUnusedLocals": true,

package.json

@@ -8,24 +8,24 @@
     "@hookform/resolvers": "^0.1.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.1",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^14.14.37",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "date-fns": "^2.16.1",
-    "firebase": "^7.17.2",
+    "firebase": "^8.3.2",
     "firebaseui": "^4.6.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-firebase-hooks": "^2.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-firebase-hooks": "^3.0.3",
     "react-hook-form": "^6.8.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
-    "typescript": "~3.7.2",
-    "yup": "^0.29.3"
+    "react-scripts": "4.0.3",
+    "typescript": "^4.2.3",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -64,15 +64,15 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.2",
     "@types/yup": "^0.29.7",
-    "@typescript-eslint/eslint-plugin": "^3.8.0",
-    "@typescript-eslint/parser": "^3.8.0",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
-    "firebase-tools": "^8.9.0",
+    "firebase-tools": "^9.8.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
     "prettier": "^2.0.5"

src/components/organisms/OtherDrawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 
 import { useTheme } from '@material-ui/core/styles'
 import Drawer from '@material-ui/core/Drawer'

src/components/templates/RegisterApprover/index.tsx

@@ -4,10 +4,6 @@ import { useSharedStyles } from 'styles'
 import SettingNickName from 'components/molecules/SettingNickName'
 import NextActionText from 'components/molecules/NextActionText'
 
-interface FormInputs {
-  nickname: string
-}
-
 interface Props {
   registerApprovalUser: (nickname: string) => void
 }

src/config/firebase.ts

@@ -1,4 +1,4 @@
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 import 'firebase/firestore'
 import 'firebase/functions'
 
@@ -25,13 +25,11 @@ const initializeFirebase = (): void => {
       host: 'localhost:8080',
       ssl: false,
     })
-    functions.useFunctionsEmulator('http://localhost:5001')
+    functions.useEmulator('http://localhost', 5001)
   }
 }
 
-export const serverTimeDocument = (): firebase.firestore.DocumentReference<
-  firebase.firestore.DocumentData
-> => {
+export const serverTimeDocument = (): firebase.firestore.DocumentReference<firebase.firestore.DocumentData> => {
   return firebase.firestore().doc('serverTime/now')
 }
 

src/contexts/AuthorizedProvider/useInjection.ts

@@ -1,19 +1,10 @@
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 import { useAuthState } from 'react-firebase-hooks/auth'
 import { useDocument } from 'react-firebase-hooks/firestore'
 
 import { userDocument, serverTimeDocument } from 'config/firebase'
 import { Roles, Status, Now } from 'types/index'
 
-export interface InjectionResult {
-  isAuthorizeContextLoaded: boolean
-  authenticated: firebase.User | undefined
-  isAuthLoading: boolean
-  authError: firebase.auth.Error | undefined
-  userInfo: UserInfo | null
-  now: Now
-}
-
 interface UserInfo {
   role: Roles | null
   nickname: string
@@ -22,6 +13,14 @@ interface UserInfo {
   year?: string
   month?: string
 }
+export interface InjectionResult {
+  isAuthorizeContextLoaded: boolean
+  authenticated: firebase.User | undefined | null
+  isAuthLoading: boolean
+  authError: firebase.auth.Error | undefined
+  userInfo: UserInfo | null
+  now: Now
+}
 
 const useInjection = (): InjectionResult => {
   const [authenticated, isAuthLoading, authError] = useAuthState(

src/contexts/ContentsProvider/converter.ts

@@ -1,3 +1,4 @@
+import firebase from 'firebase/app'
 import { Item, Budget, Deal } from 'types'
 
 type Props =

src/contexts/ContentsProvider/useInjection.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useContext } from 'react'
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 
 import { useCollection, useDocument } from 'react-firebase-hooks/firestore'
 import {

src/domain/firestore.ts

@@ -1,4 +1,4 @@
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 import { Roles, Status, Item, Budget, Now } from 'types'
 import {
   serverTimeDocument,
@@ -30,9 +30,6 @@ export const registerApprovalUser = async (nickname: string): Promise<void> => {
     })
 }
 
-interface FetchInviteOnetimeUrlParams {
-  isUpdate?: boolean
-}
 export const fetchInviteOnetimeUrl = async (
   isUpdate?: boolean
 ): Promise<firebase.functions.HttpsCallableResult> => {

src/pages/LoginPage/useLogin.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 import { useAuthState } from 'react-firebase-hooks/auth'
@@ -21,7 +21,7 @@ const uiConfig = {
 }
 
 const useLogin = (): [
-  firebase.User | undefined,
+  firebase.User | undefined | null,
   boolean,
   firebase.auth.Error | undefined
 ] => {

src/pages/SettingApproverPage/useInjection.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useContext } from 'react'
-import * as firebase from 'firebase/app'
+import firebase from 'firebase/app'
 
 import { Roles, Status, Deal } from 'types'
 import { AuthorizedContext } from 'contexts/AuthorizedProvider'

tsconfig.json

@@ -18,8 +18,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "incremental": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"