Skip to content

Commit c4cf6c6

Browse files
joaopaulomoraesjoaopaulomoraes
committed
Add minor improvements
1 parent 7ee4d46 commit c4cf6c6

File tree

6 files changed

+2051
-2667
lines changed

6 files changed

+2051
-2667
lines changed

‎pages/_app.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,41 @@ import wrapper from '../src/store'
77
import theme from '../src/utils/theme'
88

99
class _App extends App {
10-
// static async getInitialProps ({ Component, ctx }) {
11-
// return {
12-
// pageProps: {
13-
// ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
14-
// pathname: ctx.pathname,
15-
// }
16-
// }
17-
// }
10+
static async getInitialProps ({ Component, ctx }) {
11+
return {
12+
pageProps: {
13+
...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
14+
pathname: ctx.pathname,
15+
}
16+
}
17+
}
1818

19-
componentDidMount () {
19+
componentDidMount () {
2020
const jssStyles = document.querySelector('#jss-server-side')
2121
if (jssStyles && jssStyles.parentNode) {
22-
jssStyles.parentNode.removeChild(jssStyles)
22+
jssStyles.parentNode.removeChild(jssStyles)
2323
}
24-
}
24+
}
2525

26-
render () {
26+
render () {
2727
const {
28-
Component,
29-
pageProps,
28+
Component,
29+
pageProps,
3030
} = this.props
31-
console.log(this.props)
31+
3232
return (
33-
<MuiThemeProvider theme={theme}>
34-
<Head>
35-
<title>Home</title>
36-
</Head>
37-
<CssBaseline />
38-
<Component {...pageProps} />
39-
</MuiThemeProvider>
33+
<MuiThemeProvider theme={theme}>
34+
<Head>
35+
<meta charSet="utf-8" />
36+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
37+
<meta name="theme-color" content={theme.palette.primary.main} />
38+
<title>NextJS - With Redux and Material UI</title>
39+
</Head>
40+
<CssBaseline />
41+
<Component {...pageProps} />
42+
</MuiThemeProvider>
4043
)
44+
}
4145
}
42-
}
43-
4446

4547
export default wrapper.withRedux(_App)

‎pages/_document.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React, { Fragment } from 'react'
22
import Document, { Head, Main, NextScript } from 'next/document'
33
import { ServerStyleSheets } from '@material-ui/styles'
4-
import theme from '../src/utils/theme'
54
import {Html} from "next/document";
65

76
class _Document extends Document {
87
render () {
98
return (
109
<Html lang='pt-BR' dir='ltr'>
1110
<Head>
12-
<meta charSet="utf-8" />
13-
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
14-
<meta name="theme-color" content={theme.palette.primary.main} />
1511
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
1612
</Head>
1713
<body>
@@ -28,20 +24,14 @@ _Document.getInitialProps = async ctx => {
2824
const originalRenderPage = ctx.renderPage
2925

3026
ctx.renderPage = () => originalRenderPage({
31-
//Wrap app inside sss
32-
enhanceApp: App => props => sheets.collect(<App {...props} />)
27+
enhanceApp: WrappedComponent => props => sheets.collect(<WrappedComponent {...props} />)
3328
})
3429

3530
const initialProps = await Document.getInitialProps(ctx)
3631

3732
return {
3833
...initialProps,
39-
styles: (
40-
<Fragment>
41-
{initialProps.styles}
42-
{sheets.getStyleElement()}
43-
</Fragment>
44-
)
34+
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
4535
}
4636
}
4737

‎pages/index.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import RemoveIcon from '@material-ui/icons/Remove'
99
import Typography from '@material-ui/core/Typography'
1010
import { connect } from 'react-redux'
1111
import { increment, decrement } from '../src/actions'
12-
import {bindActionCreators} from "redux";
13-
import {INCREMENT} from "../src/constants";
12+
import { bindActionCreators } from 'redux'
13+
import { INCREMENT } from '../src/constants'
1414

1515
const useStyles = makeStyles({
1616
container: {
@@ -22,19 +22,19 @@ const useStyles = makeStyles({
2222
}
2323
})
2424

25-
const Index = (props) => {
26-
const {
27-
value,
28-
from,
29-
action
30-
} = props
31-
const {
32-
increment:inc,
33-
decrement:dec
34-
}=props.actions
25+
const Index = ({
26+
value,
27+
from,
28+
action,
29+
actions: {
30+
increment,
31+
decrement
32+
}
33+
}) => {
3534
const classes = useStyles()
35+
3636
return (
37-
<Card className={classes.card}>
37+
<Card className={classes.card}>
3838
<CardContent>
3939
<Typography
4040
className={classes.title}
@@ -53,36 +53,33 @@ const {
5353
variant='round'
5454
color='primary'
5555
size='small'
56-
onClick={() => inc()}
56+
onClick={() => increment()}
5757
>
5858
<AddIcon />
5959
</Fab>
6060
<Fab
6161
variant='round'
6262
color='secondary'
6363
size='small'
64-
onClick={() => dec()}
64+
onClick={() => decrement()}
6565
>
6666
<RemoveIcon />
6767
</Fab>
6868
</CardActions>
6969
</Card>
7070
)
7171
}
72-
// only required to make changes on the server side, can be removed
73-
Index.getInitialProps = ({ store, isServer }) => {
72+
73+
Index.getInitialProps = ({ store }) => {
7474
store.dispatch({
7575
type: INCREMENT,
76-
from: isServer ? 'server' : 'client'
76+
from: 'server'
7777
})
7878

79-
return { isServer }
79+
return {}
8080
}
8181

82-
8382
export default connect(
84-
state=>{
85-
return {...state}
86-
},
87-
(dispatch=>({actions:bindActionCreators({increment,decrement},dispatch)}))
83+
state => state,
84+
dispatch => ({ actions: bindActionCreators({ increment, decrement }, dispatch) })
8885
)(Index)

‎src/reducers/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { INCREMENT, DECREMENT } from '../constants'
2-
import {HYDRATE} from "next-redux-wrapper";
2+
import { HYDRATE } from 'next-redux-wrapper'
33

44
export const initialState = {
55
value: 0,
@@ -10,7 +10,11 @@ export const initialState = {
1010
export const counter = (state = initialState, action) => {
1111
switch (action.type) {
1212
case HYDRATE:
13-
return {...state, ...action.payload};
13+
return {
14+
...state,
15+
...action.payload
16+
}
17+
1418
case INCREMENT:
1519
return {
1620
...state,

‎src/store/index.js‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,17 @@
1-
import {createStore, applyMiddleware, compose} from 'redux'
2-
import {composeWithDevTools} from 'redux-devtools-extension'
1+
import { createStore, applyMiddleware, compose } from 'redux'
2+
import { composeWithDevTools } from 'redux-devtools-extension'
33
import thunk from 'redux-thunk'
4-
import {createWrapper} from "next-redux-wrapper";
5-
import {counter, initialState} from "../reducers";
4+
import { createWrapper } from 'next-redux-wrapper'
5+
import { counter, initialState } from '../reducers'
66

7-
const makeStore = context => {
8-
let composeEnhancers = compose;
7+
const makeStore = () => {
8+
const composeEnhancers = process.env.NODE_ENV !== 'production' ? composeWithDevTools : compose
99

10-
// If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
11-
if (process.env.NODE_ENV !== 'production' && typeof window === 'object') {
12-
composeEnhancers = composeWithDevTools;
13-
// NOTE: Uncomment the code below to restore support for Redux Saga
14-
// Dev Tools once it supports redux-saga version 1.x.x
15-
// if (window.__SAGA_MONITOR_EXTENSION__)
16-
// reduxSagaMonitorOptions = {
17-
// sagaMonitor: window.__SAGA_MONITOR_EXTENSION__,
18-
// };
19-
}
20-
return createStore(
21-
counter,
22-
initialState,
23-
composeEnhancers(applyMiddleware(thunk))
24-
)
10+
return createStore(
11+
counter,
12+
initialState,
13+
composeEnhancers(applyMiddleware(thunk))
14+
)
2515
}
26-
// create a makeStore function
27-
// const makeStore = context => createStore(counter);
2816

29-
30-
// export an assembled wrapper
3117
export default createWrapper(makeStore, {debug: true})

0 commit comments

Comments
 (0)