Support react redux7.1 with hooks

components/molecules/NextListItem.tsx

@@ -1,12 +1,7 @@
-import {
-  Avatar,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-} from "@material-ui/core"
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
-import Link from "next/link"
-import React from "react"
+import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@material-ui/core";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import Link from "next/link";
+import React from "react";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

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 { connect } from "react-redux"
-import { Page } from "../../constants"
+import { useSelector } from "react-redux"
 import { IInitialState } from "../../store/states"
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -25,20 +24,17 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {
-  /**
-   * from redux
-   */
-  selectedPage?: Page
-}
+interface IProps {}
+
+const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
 
 /**
  * Page header component
  * @param props IProps
  */
-const PageHeaderComponent = (props: IProps) => {
-  const { selectedPage } = props
+export const PageHeader = function(props: IProps) {
   const classes = useStyles(props)
+  const selectedPage = useSelector(selectedPageSelector)
   return (
     <Paper square={true} className={classes.root}>
       <Typography variant="h1" color="inherit" className={classes.title}>
@@ -54,12 +50,3 @@ const PageHeaderComponent = (props: IProps) => {
     </Paper>
   )
 }
-
-const mapStateToProps = (state: IInitialState) => ({
-  selectedPage: state.page.selectedPage,
-})
-
-export const PageHeader = connect(
-  mapStateToProps,
-  undefined
-)(PageHeaderComponent as any)

components/organisms/ResponsiveDrawer.tsx

@@ -1,21 +1,15 @@
 import { AppBar, Drawer, Hidden, Toolbar, Typography } from "@material-ui/core"
 import IconButton from "@material-ui/core/IconButton"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import MenuIcon from "@material-ui/icons/Menu"
-import React from "react"
-import { connect } from "react-redux"
-import { Page } from "../../constants"
+import React, { useState } from "react"
+import { useSelector } from "react-redux"
 import { IInitialState } from "../../store/states"
 import { Sidenavi } from "../organisms"
 
 const drawerWidth = 290
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       flexGrow: 1,
@@ -51,106 +45,86 @@ const styles = (theme: Theme) =>
       fontSize: 25,
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   children: React.ReactNode
-  selectedPage: Page
 }
 
-interface IState {
-  mobileOpen: boolean
-}
+const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
 
 /**
  * Responsive drawer
  * @see https://material-ui.com/demos/drawers/#responsive-drawer
  */
-class ResponsiveDrawerComponent extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props)
-    this.state = {
-      mobileOpen: false,
-    }
-  }
-
+export const ResponsiveDrawer = function(props: IProps) {
+  const { children } = props
+  const classes = useStyles(props)
+  const selectedPage = useSelector(selectedPageSelector)
+  const [mobileOpen, setMobileOpen] = useState<boolean>(false)
   /**
    * Toggle drawer
    */
-  handleDrawerToggle = () => {
-    this.setState({ mobileOpen: !this.state.mobileOpen })
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
   }
 
-  render() {
-    const { classes, children, selectedPage } = this.props
-
-    return (
-      <div className={classes.root}>
-        <AppBar className={classes.appBar}>
-          <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="Open drawer"
-              onClick={this.handleDrawerToggle}
-              className={classes.navIconHide}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography
-              variant="h2"
-              color="inherit"
-              noWrap
-              className={classes.title}
-            >
-              {selectedPage.pageTitle}
-            </Typography>
-          </Toolbar>
-        </AppBar>
-
-        <Hidden mdUp>
-          <Drawer
-            variant="temporary"
-            anchor={"left"}
-            open={this.state.mobileOpen}
-            onClose={this.handleDrawerToggle}
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            ModalProps={{
-              keepMounted: true, // Better open performance on mobile.
-            }}
+  return (
+    <div className={classes.root}>
+      <AppBar className={classes.appBar}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="Open drawer"
+            onClick={handleDrawerToggle}
+            className={classes.navIconHide}
           >
-            <Sidenavi />
-          </Drawer>
-        </Hidden>
-
-        <Hidden smDown implementation="css">
-          <Drawer
-            variant="permanent"
-            open
-            classes={{
-              paper: classes.drawerPaper,
-            }}
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            variant="h2"
+            color="inherit"
+            noWrap
+            className={classes.title}
           >
-            <Sidenavi />
-          </Drawer>
-        </Hidden>
+            {selectedPage.pageTitle}
+          </Typography>
+        </Toolbar>
+      </AppBar>
 
-        <main className={classes.content}>
-          <div className={classes.toolbar} />
-          {children}
-        </main>
-      </div>
-    )
-  }
-}
+      <Hidden mdUp>
+        <Drawer
+          variant="temporary"
+          anchor={"left"}
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+        >
+          <Sidenavi />
+        </Drawer>
+      </Hidden>
 
-const mapStateToProps = (state: IInitialState) => ({
-  selectedPage: state.page.selectedPage,
-})
+      <Hidden smDown implementation="css">
+        <Drawer
+          variant="permanent"
+          open
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+        >
+          <Sidenavi />
+        </Drawer>
+      </Hidden>
 
-export const ResponsiveDrawer = withStyles(styles)(
-  connect(
-    mapStateToProps,
-    undefined
-  )(ResponsiveDrawerComponent as any)
-)
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        {children}
+      </main>
+    </div>
+  )
+}

components/organisms/Sidenavi.tsx

@@ -1,11 +1,9 @@
 import { List } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
-import { connect } from "react-redux"
-import { bindActionCreators, Dispatch } from "redux"
-import { Action } from "typescript-fsa"
+import { useDispatch, useSelector } from "react-redux"
 import { Page, SiteInfo } from "../../constants"
-import { IPagePayload, PageActions } from "../../store/actions"
+import { PageActions } from "../../store/actions"
 import { IInitialState } from "../../store/states"
 import { NextListItem } from "../molecules"
 
@@ -47,21 +45,21 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {
-  changePage: (pagePayload: IPagePayload) => number
-  selectedPage: Page
-}
+interface IProps {}
+
+const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
 
 /**
  * Side navigation component
  * @param props IProps
  */
-const SidenaviComponent = (props: IProps) => {
-  const { changePage, selectedPage } = props
+export const Sidenavi = function(props: IProps) {
   const classes = useStyles(props)
+  const selectedPage = useSelector(selectedPageSelector)
+  const dispatch = useDispatch()
 
   const handleChangePage = (page: Page) => () =>
-    changePage({ selectedPage: page })
+    dispatch(PageActions.changePage({ selectedPage: page }))
 
   return (
     <div className={classes.root}>
@@ -96,16 +94,3 @@ const SidenaviComponent = (props: IProps) => {
     </div>
   )
 }
-
-const mapStateToProps = (state: IInitialState) => ({
-  count: state.counter.count,
-  selectedPage: state.page.selectedPage,
-})
-
-const mapDispatchToProps = (dispatch: Dispatch<Action<IPagePayload>>) =>
-  bindActionCreators(PageActions, dispatch)
-
-export const Sidenavi = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SidenaviComponent as any)

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 { connect } from "react-redux"
-import { Page } from "../../constants"
+import { useSelector } from "react-redux"
 import { IInitialState } from "../../store/states"
 import { ResponsiveDrawer } from "../organisms"
 
@@ -16,12 +15,14 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface IProps {
   children: React.ReactNode
-  selectedPage: Page
 }
 
-const LayoutComponent = (props: IProps) => {
-  const { children, selectedPage } = props
+const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
+
+export const Layout = function(props: IProps) {
+  const { children } = props
   const classes = useStyles(props)
+  const selectedPage = useSelector(selectedPageSelector)
   return (
     <section className={classes.root}>
       <Head>
@@ -33,12 +34,3 @@ const LayoutComponent = (props: IProps) => {
     </section>
   )
 }
-
-const mapStateToProps = (state: IInitialState) => ({
-  selectedPage: state.page.selectedPage,
-})
-
-export const Layout = connect(
-  mapStateToProps,
-  undefined
-)(LayoutComponent as any)