Skip to content

Commit 679e45f

Browse files
treetipstreetips
authored
Merge pull request #6 from treetips/feature/support_react-redux7.1_with_hooks
Support react redux7.1 with hooks
2 parents 9432af2 + e64e5ad commit 679e45f

File tree

11 files changed

+260
-404
lines changed

11 files changed

+260
-404
lines changed

‎components/molecules/NextListItem.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
import {
2-
Avatar,
3-
ListItem,
4-
ListItemAvatar,
5-
ListItemText,
6-
} from "@material-ui/core"
7-
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
8-
import Link from "next/link"
9-
import React from "react"
1+
import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@material-ui/core";
2+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
3+
import Link from "next/link";
4+
import React from "react";
105

116
const useStyles = makeStyles((theme: Theme) =>
127
createStyles({

‎components/molecules/PageHeader.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Paper, Typography } from "@material-ui/core"
22
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
33
import React from "react"
4-
import { connect } from "react-redux"
5-
import { Page } from "../../constants"
4+
import { useSelector } from "react-redux"
65
import { IInitialState } from "../../store/states"
76

87
const useStyles = makeStyles((theme: Theme) =>
@@ -25,20 +24,17 @@ const useStyles = makeStyles((theme: Theme) =>
2524
})
2625
)
2726

28-
interface IProps {
29-
/**
30-
* from redux
31-
*/
32-
selectedPage?: Page
33-
}
27+
interface IProps {}
28+
29+
const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
3430

3531
/**
3632
* Page header component
3733
* @param props IProps
3834
*/
39-
const PageHeaderComponent = (props: IProps) => {
40-
const { selectedPage } = props
35+
export const PageHeader = function(props: IProps) {
4136
const classes = useStyles(props)
37+
const selectedPage = useSelector(selectedPageSelector)
4238
return (
4339
<Paper square={true} className={classes.root}>
4440
<Typography variant="h1" color="inherit" className={classes.title}>
@@ -54,12 +50,3 @@ const PageHeaderComponent = (props: IProps) => {
5450
</Paper>
5551
)
5652
}
57-
58-
const mapStateToProps = (state: IInitialState) => ({
59-
selectedPage: state.page.selectedPage,
60-
})
61-
62-
export const PageHeader = connect(
63-
mapStateToProps,
64-
undefined
65-
)(PageHeaderComponent as any)

‎components/organisms/ResponsiveDrawer.tsx‎

Lines changed: 68 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import { AppBar, Drawer, Hidden, Toolbar, Typography } from "@material-ui/core"
22
import IconButton from "@material-ui/core/IconButton"
3-
import {
4-
createStyles,
5-
Theme,
6-
withStyles,
7-
WithStyles,
8-
} from "@material-ui/core/styles"
3+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
94
import MenuIcon from "@material-ui/icons/Menu"
10-
import React from "react"
11-
import { connect } from "react-redux"
12-
import { Page } from "../../constants"
5+
import React, { useState } from "react"
6+
import { useSelector } from "react-redux"
137
import { IInitialState } from "../../store/states"
148
import { Sidenavi } from "../organisms"
159

1610
const drawerWidth = 290
1711

18-
const styles = (theme: Theme) =>
12+
const useStyles = makeStyles((theme: Theme) =>
1913
createStyles({
2014
root: {
2115
flexGrow: 1,
@@ -51,106 +45,86 @@ const styles = (theme: Theme) =>
5145
fontSize: 25,
5246
},
5347
})
48+
)
5449

55-
interface IProps extends WithStyles<typeof styles> {
50+
interface IProps {
5651
children: React.ReactNode
57-
selectedPage: Page
5852
}
5953

60-
interface IState {
61-
mobileOpen: boolean
62-
}
54+
const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
6355

6456
/**
6557
* Responsive drawer
6658
* @see https://material-ui.com/demos/drawers/#responsive-drawer
6759
*/
68-
class ResponsiveDrawerComponent extends React.Component<IProps, IState> {
69-
constructor(props: IProps) {
70-
super(props)
71-
this.state = {
72-
mobileOpen: false,
73-
}
74-
}
75-
60+
export const ResponsiveDrawer = function(props: IProps) {
61+
const { children } = props
62+
const classes = useStyles(props)
63+
const selectedPage = useSelector(selectedPageSelector)
64+
const [mobileOpen, setMobileOpen] = useState<boolean>(false)
7665
/**
7766
* Toggle drawer
7867
*/
79-
handleDrawerToggle = () => {
80-
this.setState({ mobileOpen: !this.state.mobileOpen })
68+
const handleDrawerToggle = () => {
69+
setMobileOpen(!mobileOpen)
8170
}
8271

83-
render() {
84-
const { classes, children, selectedPage } = this.props
85-
86-
return (
87-
<div className={classes.root}>
88-
<AppBar className={classes.appBar}>
89-
<Toolbar>
90-
<IconButton
91-
color="inherit"
92-
aria-label="Open drawer"
93-
onClick={this.handleDrawerToggle}
94-
className={classes.navIconHide}
95-
>
96-
<MenuIcon />
97-
</IconButton>
98-
<Typography
99-
variant="h2"
100-
color="inherit"
101-
noWrap
102-
className={classes.title}
103-
>
104-
{selectedPage.pageTitle}
105-
</Typography>
106-
</Toolbar>
107-
</AppBar>
108-
109-
<Hidden mdUp>
110-
<Drawer
111-
variant="temporary"
112-
anchor={"left"}
113-
open={this.state.mobileOpen}
114-
onClose={this.handleDrawerToggle}
115-
classes={{
116-
paper: classes.drawerPaper,
117-
}}
118-
ModalProps={{
119-
keepMounted: true, // Better open performance on mobile.
120-
}}
72+
return (
73+
<div className={classes.root}>
74+
<AppBar className={classes.appBar}>
75+
<Toolbar>
76+
<IconButton
77+
color="inherit"
78+
aria-label="Open drawer"
79+
onClick={handleDrawerToggle}
80+
className={classes.navIconHide}
12181
>
122-
<Sidenavi />
123-
</Drawer>
124-
</Hidden>
125-
126-
<Hidden smDown implementation="css">
127-
<Drawer
128-
variant="permanent"
129-
open
130-
classes={{
131-
paper: classes.drawerPaper,
132-
}}
82+
<MenuIcon />
83+
</IconButton>
84+
<Typography
85+
variant="h2"
86+
color="inherit"
87+
noWrap
88+
className={classes.title}
13389
>
134-
<Sidenavi />
135-
</Drawer>
136-
</Hidden>
90+
{selectedPage.pageTitle}
91+
</Typography>
92+
</Toolbar>
93+
</AppBar>
13794

138-
<main className={classes.content}>
139-
<div className={classes.toolbar} />
140-
{children}
141-
</main>
142-
</div>
143-
)
144-
}
145-
}
95+
<Hidden mdUp>
96+
<Drawer
97+
variant="temporary"
98+
anchor={"left"}
99+
open={mobileOpen}
100+
onClose={handleDrawerToggle}
101+
classes={{
102+
paper: classes.drawerPaper,
103+
}}
104+
ModalProps={{
105+
keepMounted: true, // Better open performance on mobile.
106+
}}
107+
>
108+
<Sidenavi />
109+
</Drawer>
110+
</Hidden>
146111

147-
const mapStateToProps = (state: IInitialState) => ({
148-
selectedPage: state.page.selectedPage,
149-
})
112+
<Hidden smDown implementation="css">
113+
<Drawer
114+
variant="permanent"
115+
open
116+
classes={{
117+
paper: classes.drawerPaper,
118+
}}
119+
>
120+
<Sidenavi />
121+
</Drawer>
122+
</Hidden>
150123

151-
export const ResponsiveDrawer = withStyles(styles)(
152-
connect(
153-
mapStateToProps,
154-
undefined
155-
)(ResponsiveDrawerComponent as any)
156-
)
124+
<main className={classes.content}>
125+
<div className={classes.toolbar} />
126+
{children}
127+
</main>
128+
</div>
129+
)
130+
}

‎components/organisms/Sidenavi.tsx‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { List } from "@material-ui/core"
22
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
33
import SvgIcon from "@material-ui/core/SvgIcon"
4-
import { connect } from "react-redux"
5-
import { bindActionCreators, Dispatch } from "redux"
6-
import { Action } from "typescript-fsa"
4+
import { useDispatch, useSelector } from "react-redux"
75
import { Page, SiteInfo } from "../../constants"
8-
import { IPagePayload, PageActions } from "../../store/actions"
6+
import { PageActions } from "../../store/actions"
97
import { IInitialState } from "../../store/states"
108
import { NextListItem } from "../molecules"
119

@@ -47,21 +45,21 @@ const useStyles = makeStyles((theme: Theme) =>
4745
})
4846
)
4947

50-
interface IProps {
51-
changePage: (pagePayload: IPagePayload) => number
52-
selectedPage: Page
53-
}
48+
interface IProps {}
49+
50+
const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
5451

5552
/**
5653
* Side navigation component
5754
* @param props IProps
5855
*/
59-
const SidenaviComponent = (props: IProps) => {
60-
const { changePage, selectedPage } = props
56+
export const Sidenavi = function(props: IProps) {
6157
const classes = useStyles(props)
58+
const selectedPage = useSelector(selectedPageSelector)
59+
const dispatch = useDispatch()
6260

6361
const handleChangePage = (page: Page) => () =>
64-
changePage({ selectedPage: page })
62+
dispatch(PageActions.changePage({ selectedPage: page }))
6563

6664
return (
6765
<div className={classes.root}>
@@ -96,16 +94,3 @@ const SidenaviComponent = (props: IProps) => {
9694
</div>
9795
)
9896
}
99-
100-
const mapStateToProps = (state: IInitialState) => ({
101-
count: state.counter.count,
102-
selectedPage: state.page.selectedPage,
103-
})
104-
105-
const mapDispatchToProps = (dispatch: Dispatch<Action<IPagePayload>>) =>
106-
bindActionCreators(PageActions, dispatch)
107-
108-
export const Sidenavi = connect(
109-
mapStateToProps,
110-
mapDispatchToProps
111-
)(SidenaviComponent as any)

‎components/templates/Layout.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
22
import Head from "next/head"
33
import * as React from "react"
4-
import { connect } from "react-redux"
5-
import { Page } from "../../constants"
4+
import { useSelector } from "react-redux"
65
import { IInitialState } from "../../store/states"
76
import { ResponsiveDrawer } from "../organisms"
87

@@ -16,12 +15,14 @@ const useStyles = makeStyles((theme: Theme) =>
1615

1716
interface IProps {
1817
children: React.ReactNode
19-
selectedPage: Page
2018
}
2119

22-
const LayoutComponent = (props: IProps) => {
23-
const { children, selectedPage } = props
20+
const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
21+
22+
export const Layout = function(props: IProps) {
23+
const { children } = props
2424
const classes = useStyles(props)
25+
const selectedPage = useSelector(selectedPageSelector)
2526
return (
2627
<section className={classes.root}>
2728
<Head>
@@ -33,12 +34,3 @@ const LayoutComponent = (props: IProps) => {
3334
</section>
3435
)
3536
}
36-
37-
const mapStateToProps = (state: IInitialState) => ({
38-
selectedPage: state.page.selectedPage,
39-
})
40-
41-
export const Layout = connect(
42-
mapStateToProps,
43-
undefined
44-
)(LayoutComponent as any)

0 commit comments

Comments
 (0)