Fix warnings and optimize codes (#27)

* refactor: update all dependencies

* refactor: remove no need code

* refactor: move css import from _document to _app

* refactor: support Automatic Static Optimization

* feat: support Custom /_error without /404

* refactor: add useCallback

* refactor: remove initial state tree

* refactor: change to strict=true

* docs: add typescript-fsa and typescript-fsa-reducer

* docs: remove yarn dependency

* docs: add typescript version

* refactor: change page actions to hooks

* refactor: changing the page on the client side

Co-authored-by: username <username@users.noreply.github.com>

Author: treetips

README.md

@@ -28,13 +28,15 @@ VSCode と prettier と TSLint によって、リアルタイムに整形と構
 - [MATERIAL-UI v4](https://material-ui.com/)
 - [Redux](https://redux.js.org/)
 - [redux-saga](https://redux-saga.js.org/)
+- [typescript-fsa](https://github.com/aikoven/typescript-fsa)
+- [typescript-fsa-reducer](https://github.com/dphilipson/typescript-fsa-reducers)
 - [TSLint](https://palantir.github.io/tslint/)
 
 ## Requirement
 
 - [Google Chrome](https://www.google.com/intl/ja_ALL/chrome/)
 - [Visual Studio Code](https://code.visualstudio.com/)
-- [yarn](https://yarnpkg.com/lang/ja/)
+- TypeScript v3.7 or higher( [require Optional Chaining](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) )
 
 ## Install Google Chrome addon
 

components/molecules/PageHeader.tsx

@@ -1,8 +1,7 @@
 import { Paper, Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
-import { useSelector } from "react-redux"
-import { selectedPageSelector } from "../../store/page"
+import { usePage } from "../../hooks"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -30,9 +29,10 @@ type Props = {}
  * Page header component
  * @param props Props
  */
-export const PageHeader = function(props: Props) {
+export const PageHeader = function (props: Props) {
   const classes = useStyles(props)
-  const selectedPage = useSelector(selectedPageSelector)
+  const { selectedPage } = usePage()
+
   return (
     <Paper square={true} className={classes.root}>
       <Typography variant="h1" color="inherit" className={classes.title}>

components/organisms/ReduxSagaSample.tsx

@@ -34,7 +34,7 @@ type Props = {
  * redux-saga sample component
  * @param props {Props} props
  */
-export const ReduxSagaSample = function(props: Props) {
+export const ReduxSagaSample = function (props: Props) {
   const {
     title,
     description,
@@ -49,7 +49,7 @@ export const ReduxSagaSample = function(props: Props) {
   const [previousResponseValue, setPreviousResponseValue] = useState<string>("")
 
   useEffect(() => {
-    if (!storeState.timestamp) {
+    if (!storeState?.timestamp) {
       return
     }
     const fetchResult = `${storeState.timestamp} - ${storeState.input}`
@@ -62,7 +62,7 @@ export const ReduxSagaSample = function(props: Props) {
     }
     setResponseValues(responseValues)
     setPreviousResponseValue(fetchResult)
-  }, [storeState.timestamp])
+  }, [storeState?.timestamp])
 
   const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value || ""

components/organisms/ResponsiveDrawer.tsx

@@ -3,8 +3,7 @@ import IconButton from "@material-ui/core/IconButton"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import MenuIcon from "@material-ui/icons/Menu"
 import React, { useState } from "react"
-import { useSelector } from "react-redux"
-import { selectedPageSelector } from "../../store/page"
+import { usePage } from "../../hooks"
 import { Sidenavi } from "../organisms"
 
 const drawerWidth = 290
@@ -55,10 +54,10 @@ type Props = {
  * Responsive drawer
  * @see https://material-ui.com/demos/drawers/#responsive-drawer
  */
-export const ResponsiveDrawer = function(props: Props) {
+export const ResponsiveDrawer = function (props: Props) {
   const { children } = props
   const classes = useStyles(props)
-  const selectedPage = useSelector(selectedPageSelector)
+  const { selectedPage } = usePage()
   const [mobileOpen, setMobileOpen] = useState<boolean>(false)
   /**
    * Toggle drawer

components/organisms/Sidenavi.tsx

@@ -1,9 +1,8 @@
 import { List } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
-import { useDispatch, useSelector } from "react-redux"
 import { Page, SiteInfo } from "../../constants"
-import { PageActions, selectedPageSelector } from "../../store/page"
+import { usePage } from "../../hooks"
 import { NextListItem } from "../molecules"
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -50,13 +49,10 @@ type Props = {}
  * Side navigation component
  * @param props Props
  */
-export const Sidenavi = function(props: Props) {
+export const Sidenavi = function (props: Props) {
   const classes = useStyles(props)
-  const selectedPage = useSelector(selectedPageSelector)
-  const dispatch = useDispatch()
-
-  const handleChangePage = (page: Page) => () =>
-    dispatch(PageActions.changePage({ selectedPage: page }))
+  const { selectedPage, changePage } = usePage()
+  const handleChangePage = (page: Page) => () => changePage(page)
 
   return (
     <div className={classes.root}>
@@ -65,7 +61,7 @@ export const Sidenavi = function(props: Props) {
       </div>
 
       <List className={classes.list}>
-        {Page.values.map(page => {
+        {Page.values.map((page) => {
           const Icon = page.icon
           return (
             <NextListItem

components/templates/Layout.tsx

@@ -1,8 +1,7 @@
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Head from "next/head"
 import * as React from "react"
-import { useSelector } from "react-redux"
-import { selectedPageSelector } from "../../store/page"
+import { usePage } from "../../hooks"
 import { ResponsiveDrawer } from "../organisms"
 
 const useStyles = makeStyles((_: Theme) =>
@@ -18,10 +17,11 @@ type Props = {
   className?: string
 }
 
-export const Layout = function(props: Props) {
+export const Layout = function (props: Props) {
   const { children, className } = props
   const classes = useStyles(props)
-  const selectedPage = useSelector(selectedPageSelector)
+  const { selectedPage } = usePage()
+
   return (
     <section className={`${classes.root} ${className}`}>
       <Head>

hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./useCounter"
+export * from "./usePage"
 export * from "./useThinOut"

hooks/useCounter.ts

@@ -1,3 +1,4 @@
+import { useCallback } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { CounterActions, countSelector } from "../store/counter"
 
@@ -17,14 +18,21 @@ export const useCounter = (): Readonly<CounterOperators> => {
 
   return {
     count: useSelector(countSelector),
-    increment: () => dispatch(CounterActions.increment()),
-    decrement: () => dispatch(CounterActions.decrement()),
-    calculate: (inputNumber: number) => {
-      dispatch(
-        CounterActions.calculate({
-          inputNumber: inputNumber,
-        })
-      )
-    },
+    increment: useCallback(() => dispatch(CounterActions.increment()), [
+      dispatch,
+    ]),
+    decrement: useCallback(() => dispatch(CounterActions.decrement()), [
+      dispatch,
+    ]),
+    calculate: useCallback(
+      (inputNumber: number) => {
+        dispatch(
+          CounterActions.calculate({
+            inputNumber: inputNumber,
+          })
+        )
+      },
+      [dispatch]
+    ),
   }
 }

hooks/usePage.ts

@@ -0,0 +1,32 @@
+import { useCallback } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { Page } from "../constants"
+import { PageActions, selectedPageSelector } from "../store/page"
+
+type PageOperators = {
+  selectedPage: Page
+  changePage: (selectedPage: Page) => void
+}
+
+/**
+ * Page custom-hooks
+ * @see https://reactjs.org/docs/hooks-custom.html
+ */
+export const usePage = (): Readonly<PageOperators> => {
+  const dispatch = useDispatch()
+  const pageState = useSelector(selectedPageSelector)
+
+  return {
+    selectedPage: pageState,
+    changePage: useCallback(
+      (selectedPage: Page) => {
+        dispatch(
+          PageActions.changePage({
+            selectedPage: selectedPage,
+          })
+        )
+      },
+      [dispatch]
+    ),
+  }
+}

hooks/useThinOut.ts

@@ -1,3 +1,4 @@
+import { useCallback } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import {
   IReduxSagaState,
@@ -22,21 +23,27 @@ export const useThinOut = (): Readonly<ThinOutOperators> => {
   const reduxSagaDebounceState = useSelector(reduxSagaDebounceSelector)
   const reduxSagaThrottleState = useSelector(reduxSagaThrottleSelector)
 
-  const handleDebounce = (inputValue: string) => {
-    dispatch(
-      ReduxSagaActions.fetchDebounce({
-        input: inputValue,
-      })
-    )
-  }
+  const handleDebounce = useCallback(
+    (inputValue: string) => {
+      dispatch(
+        ReduxSagaActions.fetchDebounce({
+          input: inputValue,
+        })
+      )
+    },
+    [dispatch]
+  )
 
-  const handleThrottle = (inputValue: string) => {
-    dispatch(
-      ReduxSagaActions.fetchThrottle({
-        input: inputValue,
-      })
-    )
-  }
+  const handleThrottle = useCallback(
+    (inputValue: string) => {
+      dispatch(
+        ReduxSagaActions.fetchThrottle({
+          input: inputValue,
+        })
+      )
+    },
+    [dispatch]
+  )
 
   return {
     debounce: handleDebounce,