From 7910367795c2023d5e9ba3d1c69c54d2e6f00bdd Mon Sep 17 00:00:00 2001 From: username Date: Sun, 16 Jun 2019 09:36:07 +0900 Subject: [PATCH 1/4] feature: update react-redux and mui --- package-lock.json | 99 ++++++++++++++++++++++++----------------------- package.json | 10 ++--- 2 files changed, 55 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8dfd0cf..af84a23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1007,19 +1007,18 @@ "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==" }, "@material-ui/core": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.0.2.tgz", - "integrity": "sha512-k7o95UIupTp14lsO9hejmswuPZsmWUafOBNaptHN+Pv8CBp/vW+hD6peuThgUpeGesrCuL2/yTpHB/9JkO9rNg==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.1.1.tgz", + "integrity": "sha512-dZVuVFqKnG3uf+s32U5wMTAXYBGBM6e2LF4fz4ud9woaYcthRiEFJTg2idt0j1jBMg99gqLuznR5+A9TCQbgxQ==", "requires": { "@babel/runtime": "^7.2.0", - "@material-ui/styles": "^4.0.2", - "@material-ui/system": "^4.0.2", - "@material-ui/types": "^4.0.1", - "@material-ui/utils": "^4.0.1", + "@material-ui/styles": "^4.1.1", + "@material-ui/system": "^4.2.0", + "@material-ui/types": "^4.1.0", + "@material-ui/utils": "^4.1.0", "@types/react-transition-group": "^2.0.16", "clsx": "^1.0.2", "convert-css-length": "^2.0.0", - "csstype": "^2.5.2", "debounce": "^1.1.0", "deepmerge": "^3.0.0", "hoist-non-react-statics": "^3.2.1", @@ -1033,41 +1032,42 @@ } }, "@material-ui/icons": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.0.1.tgz", - "integrity": "sha512-03zUfksGXXbaWX2piB1LCmC28eydlT8ah8MbYT4n4mgiX9BTL4HH50lkFn9JIJJSk2oO5kRy4FvpXRGRBI+oxw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.2.0.tgz", + "integrity": "sha512-v+rz61KzH+qR8x17BrfOF73f75x+wUNiBhv9tsKnEed+ElROMK2dqfMAlsdgEP+wgGl4VOcxzUQqWHcaApZ+CA==", "requires": { "@babel/runtime": "^7.2.0" } }, "@material-ui/styles": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.0.2.tgz", - "integrity": "sha512-RUM+2G++2X4M6cbZ/K/PzAdxdSdqIU4zhZ82YYIcEz/OgCx72HC68+VrYxoy7nEjZ9E6R+9JmPPS7CO8O1oPmw==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.1.1.tgz", + "integrity": "sha512-BmtfLRY0CqAkYPdcFmNcD1/zyU6ATRx9vaBxJ31//YVxfRsyPOuQXW6fvAoDvQt/hbZpTR4E0K/+4D3wHHTdHQ==", "requires": { "@babel/runtime": "^7.2.0", "@emotion/hash": "^0.7.1", - "@material-ui/types": "^4.0.1", - "@material-ui/utils": "^4.0.1", + "@material-ui/types": "^4.1.0", + "@material-ui/utils": "^4.1.0", "clsx": "^1.0.2", + "csstype": "^2.5.2", "deepmerge": "^3.0.0", "hoist-non-react-statics": "^3.2.1", - "jss": "^10.0.0-alpha.16", - "jss-plugin-camel-case": "^10.0.0-alpha.16", - "jss-plugin-default-unit": "^10.0.0-alpha.16", - "jss-plugin-global": "^10.0.0-alpha.16", - "jss-plugin-nested": "^10.0.0-alpha.16", - "jss-plugin-props-sort": "^10.0.0-alpha.16", - "jss-plugin-rule-value-function": "^10.0.0-alpha.16", - "jss-plugin-vendor-prefixer": "^10.0.0-alpha.16", + "jss": "10.0.0-alpha.17", + "jss-plugin-camel-case": "10.0.0-alpha.17", + "jss-plugin-default-unit": "10.0.0-alpha.17", + "jss-plugin-global": "10.0.0-alpha.17", + "jss-plugin-nested": "10.0.0-alpha.17", + "jss-plugin-props-sort": "10.0.0-alpha.17", + "jss-plugin-rule-value-function": "10.0.0-alpha.17", + "jss-plugin-vendor-prefixer": "10.0.0-alpha.17", "prop-types": "^15.7.2", "warning": "^4.0.1" } }, "@material-ui/system": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.0.2.tgz", - "integrity": "sha512-gpLYcDycJjK8tvWI9ZKrVLdGjFQ/YJM74TvhIMkP5ML453ZtPuFzMLt6FVEKp8okWxFEgYXVBNNSB4IF3Yig8g==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.2.0.tgz", + "integrity": "sha512-t51525FWVDjca/3UPwN99vqyvbfGNtBVesGYH2UpxVgKOdiP1ZINeHhBrZ8h4uOu5ZwgO4aceuk1TuM9uMttYw==", "requires": { "@babel/runtime": "^7.2.0", "deepmerge": "^3.0.0", @@ -1076,14 +1076,14 @@ } }, "@material-ui/types": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.0.1.tgz", - "integrity": "sha512-FGhogU9l4s+ycMcC3hhOAvu5hcWa5TVSCCGUf4NOUF904ythroWSAvcCHn92NjftXZ8WZqmtPjL1K/d90Pq/3Q==" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.0.tgz", + "integrity": "sha512-F4z7GOAeEucPjrrhJ2PHBhMZjhggE6Jjnzmap5W2PdZ3TSWNlqucB+oOzT6EzWRkHDDhVmANMU8QMfT/kcZtOg==" }, "@material-ui/utils": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.0.1.tgz", - "integrity": "sha512-mWRcMQIrqsXGze73tx3hNfB1NUu+BL/oIQI7TImyuhsia1EQXw3bPVBjgwTzqM6MqfXw6eh1fR45Di+WN5hASA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.1.0.tgz", + "integrity": "sha512-muwmVU799tzPjzb+Q5E/CTDle0rXwkCAdvMVyU0BfbJhenkUsFmuYiCmbvMVOU1m6F1S5HWfXz8EP4pXwwAvrw==", "requires": { "@babel/runtime": "^7.2.0", "prop-types": "^15.7.2", @@ -1227,9 +1227,9 @@ } }, "@types/react-redux": { - "version": "7.0.9", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.0.9.tgz", - "integrity": "sha512-fMVX9SneWWw68d/JoeNUh6hj42kx2G30YhPdCYJTOv3xqbJ1xzIz6tEM/xzi7nBvpNbwZkSa9TMsV06kWOFIIg==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.0.tgz", + "integrity": "sha512-SBJd6oNACDU/taMcDzFfj0mbVa+OI42L8WNvgPsCWiWUNIavPLeX5oA22V64tYIDUc7cGmJjDyLlWeCrqpZu1w==", "dev": true, "requires": { "@types/hoist-non-react-statics": "^3.3.0", @@ -2527,9 +2527,9 @@ } }, "css-vendor": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.2.tgz", - "integrity": "sha512-Xn5ZAlI00d8HaQ8/oQ8d+iBzSF//NCc77LPzsucM32X/R/yTqmXy6otVsAM0XleXk6HjPuXoVZwXsayky/fsFQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.4.tgz", + "integrity": "sha512-ITGWQoPfgHTxZYMYm/OXTxqz+nkG1LHW6xDQYdEUC+/EGbxB4Kg4nR6HutU98DdWmC7G+tPXUvoEmwi30B9HAA==", "requires": { "@babel/runtime": "^7.3.1", "is-in-browser": "^1.0.2" @@ -2574,9 +2574,9 @@ "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" }, "deepmerge": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz", - "integrity": "sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==" + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.1.tgz", + "integrity": "sha512-+hbDSzTqEW0fWgnlKksg7XAOtT+ddZS5lHZJ6f6MdixRs9wQy+50fm1uUCVb1IkvjLUYX/SfFO021ZNwriURTw==" }, "define-properties": { "version": "1.1.3", @@ -5700,11 +5700,11 @@ "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, "react-redux": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.0.3.tgz", - "integrity": "sha512-vYZA7ftOYlDk3NetitsI7fLjryt/widNl1SLXYvFenIpm7vjb4ryK0EeFrgn62usg5fYkyIAWNUPKnwWPevKLg==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.0.tgz", + "integrity": "sha512-hyu/PoFK3vZgdLTg9ozbt7WF3GgX5+Yn3pZm5/96/o4UueXA+zj08aiSC9Mfj2WtD1bvpIb3C5yvskzZySzzaw==", "requires": { - "@babel/runtime": "^7.4.3", + "@babel/runtime": "^7.4.5", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4", "loose-envify": "^1.4.0", @@ -5721,10 +5721,11 @@ } }, "react-transition-group": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.0.tgz", - "integrity": "sha512-/OITbogb3emGN49WaP7468QGSde7er5w6eIHldIDCSQBq/9QTSCzs8OgpgmOnaUXCXzBUcK1zoZ6DqRlM8CJtA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.1.1.tgz", + "integrity": "sha512-K/N1wqJ2GRP2yj3WBqEUYa0KV5fiaAWpUfU9SpHOHefeKvyrO+VrnMBML21M19QZoVbDZKmuQFHZYoMMi1xuJA==", "requires": { + "@babel/runtime": "^7.4.5", "dom-helpers": "^3.4.0", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" diff --git a/package.json b/package.json index ded7868..59330b0 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "author": "", "license": "ISC", "dependencies": { - "@material-ui/core": "^4.0.2", - "@material-ui/icons": "^4.0.1", - "@material-ui/styles": "^4.0.2", + "@material-ui/core": "^4.1.1", + "@material-ui/icons": "^4.2.0", + "@material-ui/styles": "^4.1.1", "@zeit/next-css": "^1.0.1", "@zeit/next-typescript": "^1.1.1", "autobind-decorator": "^2.4.0", @@ -28,7 +28,7 @@ "normalize.css": "^8.0.1", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-redux": "^7.0.3", + "react-redux": "^7.1.0", "redux": "^4.0.1", "typescript-fsa": "^3.0.0-beta-2", "typescript-fsa-reducers": "^1.2.1" @@ -40,7 +40,7 @@ "@types/react": "^16.8.19", "@types/react-dom": "^16.8.4", "@types/react-jss": "^8.6.3", - "@types/react-redux": "^7.0.9", + "@types/react-redux": "^7.1.0", "@types/redux": "^3.6.0", "@types/styled-jsx": "^2.2.8", "prettier": "^1.18.2", From d6361624672697603d2992ef38e2d4d05c008953 Mon Sep 17 00:00:00 2001 From: username Date: Sun, 16 Jun 2019 09:38:17 +0900 Subject: [PATCH 2/4] refactor: remove unnecessary generics for action of no arguments --- store/actions/CounterAction.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/store/actions/CounterAction.ts b/store/actions/CounterAction.ts index 6409787..4e1813f 100644 --- a/store/actions/CounterAction.ts +++ b/store/actions/CounterAction.ts @@ -7,7 +7,9 @@ export interface ICounterPayload { } export const CounterActions = { - increment: actionCreator("increment"), - decrement: actionCreator("decrement"), + // no arguments + increment: actionCreator("increment"), + decrement: actionCreator("decrement"), + // with arguments calculate: actionCreator("calculate"), } From e50cd3fbefbb817cd8799d131ff5474505778f21 Mon Sep 17 00:00:00 2001 From: username Date: Sun, 16 Jun 2019 09:42:14 +0900 Subject: [PATCH 3/4] refactor: migrate connect function to hooks --- components/molecules/NextListItem.tsx | 13 +- components/molecules/PageHeader.tsx | 25 +-- components/organisms/ResponsiveDrawer.tsx | 162 ++++++++---------- components/organisms/Sidenavi.tsx | 33 +--- components/templates/Layout.tsx | 20 +-- pages/about.tsx | 76 +++------ pages/index.tsx | 18 +- pages/redux.tsx | 196 +++++++++------------- 8 files changed, 201 insertions(+), 342 deletions(-) diff --git a/components/molecules/NextListItem.tsx b/components/molecules/NextListItem.tsx index a9efde9..31a0ac1 100644 --- a/components/molecules/NextListItem.tsx +++ b/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({ diff --git a/components/molecules/PageHeader.tsx b/components/molecules/PageHeader.tsx index e7dd819..3829a7c 100644 --- a/components/molecules/PageHeader.tsx +++ b/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 ( @@ -54,12 +50,3 @@ const PageHeaderComponent = (props: IProps) => { ) } - -const mapStateToProps = (state: IInitialState) => ({ - selectedPage: state.page.selectedPage, -}) - -export const PageHeader = connect( - mapStateToProps, - undefined -)(PageHeaderComponent as any) diff --git a/components/organisms/ResponsiveDrawer.tsx b/components/organisms/ResponsiveDrawer.tsx index ec72f57..022cde6 100644 --- a/components/organisms/ResponsiveDrawer.tsx +++ b/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 { +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 { - 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(false) /** * Toggle drawer */ - handleDrawerToggle = () => { - this.setState({ mobileOpen: !this.state.mobileOpen }) + const handleDrawerToggle = () => { + setMobileOpen(!mobileOpen) } - render() { - const { classes, children, selectedPage } = this.props - - return ( -
- - - - - - - {selectedPage.pageTitle} - - - - - - + + + - - - - - - + + - - - + {selectedPage.pageTitle} + + + -
-
- {children} -
-
- ) - } -} + + + + + -const mapStateToProps = (state: IInitialState) => ({ - selectedPage: state.page.selectedPage, -}) + + + + + -export const ResponsiveDrawer = withStyles(styles)( - connect( - mapStateToProps, - undefined - )(ResponsiveDrawerComponent as any) -) +
+
+ {children} +
+ + ) +} diff --git a/components/organisms/Sidenavi.tsx b/components/organisms/Sidenavi.tsx index dcab27e..663422d 100644 --- a/components/organisms/Sidenavi.tsx +++ b/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 (
@@ -96,16 +94,3 @@ const SidenaviComponent = (props: IProps) => {
) } - -const mapStateToProps = (state: IInitialState) => ({ - count: state.counter.count, - selectedPage: state.page.selectedPage, -}) - -const mapDispatchToProps = (dispatch: Dispatch>) => - bindActionCreators(PageActions, dispatch) - -export const Sidenavi = connect( - mapStateToProps, - mapDispatchToProps -)(SidenaviComponent as any) diff --git a/components/templates/Layout.tsx b/components/templates/Layout.tsx index 462fd6f..8ea86f9 100644 --- a/components/templates/Layout.tsx +++ b/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 (
@@ -33,12 +34,3 @@ const LayoutComponent = (props: IProps) => {
) } - -const mapStateToProps = (state: IInitialState) => ({ - selectedPage: state.page.selectedPage, -}) - -export const Layout = connect( - mapStateToProps, - undefined -)(LayoutComponent as any) diff --git a/pages/about.tsx b/pages/about.tsx index 75561dd..9c5e3c5 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,21 +1,12 @@ import { Paper, Typography } from "@material-ui/core" -import { - createStyles, - Theme, - withStyles, - WithStyles, -} from "@material-ui/core/styles" -import autobind from "autobind-decorator" +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" import React from "react" -import { connect } from "react-redux" -import { bindActionCreators, Dispatch } from "redux" -import { Action } from "typescript-fsa" import { HeaderArticleContainer } from "../components/organisms" import { Layout } from "../components/templates" import { Page } from "../constants" import { IPagePayload, PageActions } from "../store/actions" -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: {}, mainContainer: { @@ -23,49 +14,32 @@ const styles = (theme: Theme) => marginBottom: theme.spacing(1), }, }) +) -interface IProps extends WithStyles { - changePage: (pagePayload: IPagePayload) => void +function About() { + const classes = useStyles({}) + return ( + + + + About page !! + + + + ) } -interface IState {} - -@autobind -class About extends React.Component { - static getInitialProps = ctx => { - const pagePayload: IPagePayload = { - selectedPage: Page.ABOUT, - } - ctx.store.dispatch({ - type: PageActions.changePage.toString(), - payload: pagePayload, - }) - } - - constructor(props: IProps) { - super(props) - } - - render() { - const { classes } = this.props - return ( - - - - About page !! - - - - ) +/** + * Server side rendering + */ +About.getInitialProps = async ctx => { + const pagePayload: IPagePayload = { + selectedPage: Page.ABOUT, } + ctx.store.dispatch({ + type: PageActions.changePage.toString(), + payload: pagePayload, + }) } -const mapDispatchToProps = (dispatch: Dispatch>) => - bindActionCreators(PageActions, dispatch) - -export default withStyles(styles)( - connect( - undefined, - mapDispatchToProps - )(About as any) -) +export default About diff --git a/pages/index.tsx b/pages/index.tsx index d8eb630..f1a2f73 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,14 +1,9 @@ import { Paper, Typography } from "@material-ui/core" -import { - createStyles, - Theme, - withStyles, - WithStyles, -} from "@material-ui/core/styles" +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" import { HeaderArticleContainer } from "../components/organisms" import { Layout } from "../components/templates" -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: {}, mainContainer: { @@ -16,11 +11,10 @@ const styles = (theme: Theme) => marginBottom: theme.spacing(1), }, }) +) -interface IProps extends WithStyles {} - -const Index = (props: IProps) => { - const { classes } = props +function Index() { + const classes = useStyles({}) return ( @@ -32,4 +26,4 @@ const Index = (props: IProps) => { ) } -export default withStyles(styles)(Index) +export default Index diff --git a/pages/redux.tsx b/pages/redux.tsx index 3b4b264..babb005 100644 --- a/pages/redux.tsx +++ b/pages/redux.tsx @@ -6,41 +6,16 @@ import { TextField, Typography, } from "@material-ui/core" -import { - createStyles, - Theme, - withStyles, - WithStyles, -} from "@material-ui/core/styles" -import autobind from "autobind-decorator" -import React from "react" -import { connect } from "react-redux" -import { bindActionCreators, Dispatch } from "redux" -import { Action } from "typescript-fsa" +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles" +import React, { useState } from "react" +import { useDispatch, useSelector } from "react-redux" import { HeaderArticleContainer } from "../components/organisms" import { Layout } from "../components/templates" import { Page } from "../constants" -import { - CounterActions, - ICounterPayload, - IPagePayload, - PageActions, -} from "../store/actions" +import { CounterActions, IPagePayload, PageActions } from "../store/actions" import { IInitialState } from "../store/states" -interface IProps extends WithStyles { - count: number - increment: () => number - decrement: () => number - calculate: (inputNumber: ICounterPayload) => number - changePage: (pagePayload: IPagePayload) => void -} - -interface IState { - inputNumber: number -} - -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: {}, counter: { @@ -56,127 +31,110 @@ const styles = (theme: Theme) => fontSize: "2em", }, }) +) -@autobind -class Redux extends React.Component { - /** - * Initialize server side rendering - */ - static getInitialProps = ctx => { - const pagePayload: IPagePayload = { - selectedPage: Page.REDUX, - } - ctx.store.dispatch({ - type: PageActions.changePage.toString(), - payload: pagePayload, - }) - } +const countSelector = (state: IInitialState) => state.counter.count - constructor(props: IProps) { - super(props) - this.state = { - inputNumber: 12, - } - } +function Redux() { + const classes = useStyles({}) + const dispatch = useDispatch() + const count = useSelector(countSelector) + const [inputNumber, setInputNumber] = useState(10) /** - * Increment count + * Increment */ - handleIncrement = () => this.props.increment() + const handleIncrement = () => dispatch(CounterActions.increment()) /** - * Decrement count + * Decrement */ - handleDecrement = () => this.props.decrement() + const handleDecrement = () => dispatch(CounterActions.decrement()) /** * Change inputNumber value */ - handleChangeCount = (e: React.ChangeEvent) => { + const handleChangeCount = (e: React.ChangeEvent) => { const val = e.target.value // ignore not number if (val.match(/^([1-9]|0)+[0-9]*$/i)) { - this.setState({ inputNumber: Number(val) }) + setInputNumber(Number(val)) } } /** * Calculate input number */ - handleCalculate = () => { - this.props.calculate({ - inputNumber: Number(this.state.inputNumber), - }) + const handleCalculate = () => { + dispatch( + CounterActions.calculate({ + inputNumber: Number(inputNumber), + }) + ) } - render() { - const { classes, count } = this.props - const CurrentNumber = () => ( - {count} - ) - return ( - - - + const CurrentNumber = () => ( + {count} + ) + + return ( + + + + + Increment / Decrement + + + +   + + + + + - Increment / Decrement + Calculate + + + + -   - - - - - - Calculate - - - + + + + + ) +} - - - - - - ) +/** + * Server side rendering + */ +Redux.getInitialProps = async ctx => { + const pagePayload: IPagePayload = { + selectedPage: Page.REDUX, } + ctx.store.dispatch({ + type: PageActions.changePage.toString(), + payload: pagePayload, + }) } -const mapStateToProps = (state: IInitialState) => ({ - count: state.counter.count, -}) - -const mapDispatchToProps = (dispatch: Dispatch>) => - bindActionCreators(CounterActions, dispatch) - -export default withStyles(styles)( - connect( - mapStateToProps, - mapDispatchToProps - )(Redux as any) -) +export default Redux From e64e5ad60a61d5c0cda6c440f3d42145a576c666 Mon Sep 17 00:00:00 2001 From: username Date: Sun, 16 Jun 2019 09:45:00 +0900 Subject: [PATCH 4/4] refactor: remove decorator dependency for old style component --- package-lock.json | 5 ----- package.json | 1 - 2 files changed, 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index af84a23..fd95839 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1738,11 +1738,6 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, - "autobind-decorator": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz", - "integrity": "sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==" - }, "autodll-webpack-plugin": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/autodll-webpack-plugin/-/autodll-webpack-plugin-0.4.2.tgz", diff --git a/package.json b/package.json index 59330b0..5d179a3 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "@material-ui/styles": "^4.1.1", "@zeit/next-css": "^1.0.1", "@zeit/next-typescript": "^1.1.1", - "autobind-decorator": "^2.4.0", "compression": "^1.7.4", "express": "^4.17.1", "immer": "^3.1.3",