Skip to content

Commit bc9cbb5

Browse files
syedabuthahirmsyedabuthahirm
authored
Merge pull request #2 from tkanos/feature/eject-react-script
All the dependencies are update to latest version. Added reduxjs/toolkit..
2 parents 5a8d8a3 + 7b04a69 commit bc9cbb5

File tree

21 files changed

+473
-520
lines changed

21 files changed

+473
-520
lines changed

‎client/package.json‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@material-ui/core": "3.9.3",
7-
"@material-ui/icons": "3.0.2",
8-
"react": "16.8.6",
9-
"react-dom": "16.8.6",
10-
"react-redux": "6.0.1",
11-
"react-router": "5.0.0",
12-
"react-router-dom": "5.0.0",
13-
"react-scripts": "2.1.8",
14-
"redux": "4.0.1",
6+
"@material-ui/core": "4.11.0",
7+
"@material-ui/icons": "4.9.1",
8+
"@reduxjs/toolkit": "^1.4.0",
9+
"classnames": "^2.2.6",
10+
"react": "16.13.1",
11+
"react-dom": "16.13.1",
12+
"react-redux": "7.2.1",
13+
"react-router": "5.2.0",
14+
"react-router-dom": "5.2.0",
15+
"react-scripts": "3.4.3",
16+
"redux": "4.0.5",
1517
"redux-logger": "3.0.6",
1618
"redux-thunk": "2.3.0"
1719
},

‎client/public/index.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33

44
<head>
55
<meta charset="utf-8">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
67
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
78
<meta name="theme-color" content="#000000">
89
<!--
910
manifest.json provides metadata used when your web app is added to the
1011
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1112
-->
1213
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
1414
<!--
1515
Notice the use of %PUBLIC_URL% in the tags above.
1616
It will be replaced with the URL of the `public` folder during the build.
@@ -20,13 +20,8 @@
2020
work correctly both with client-side routing and a non-root public URL.
2121
Learn how to configure a non-root public URL by running `npm run build`.
2222
-->
23-
<style>
24-
* {
25-
padding: 0;
26-
margin: 0;
27-
}
28-
</style>
29-
<title>React App</title>
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
24+
<title>React Redux MaterialUI App</title>
3025
</head>
3126

3227
<body>

‎client/public/robots.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *

‎client/src/App.js‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22
import {
33
BrowserRouter as Router,
44
Route,
55
Switch
66
} from "react-router-dom";
77
import CssBaseline from "@material-ui/core/CssBaseline";
88
import { MuiThemeProvider } from "@material-ui/core/styles";
9-
import { connect } from "react-redux";
9+
import { createMuiTheme } from "@material-ui/core/styles";
10+
import { useSelector } from 'react-redux';
1011

11-
import Home from "./containers/Home";
12-
import Setting from "./containers/Setting";
12+
import Home from "./containers/Home/Home";
13+
import Setting from "./containers/Setting/Setting";
1314

1415
import MainLayout from "./layouts/MainLayout";
1516
import EmptyLayout from "./layouts/EmptyLayout";
1617

18+
import { getTheme } from "./containers/Setting/settingsReducer";
19+
1720
const NotFound = () => {
1821
return <div>NotFound</div>;
1922
};
@@ -44,12 +47,12 @@ const EmptyRoute = ({ component: Component, ...rest }) => {
4447
);
4548
};
4649

47-
class App extends Component {
48-
render() {
49-
const { settings } = this.props;
50+
export default function App() {
51+
52+
const theTheme = useSelector(getTheme);
5053

51-
return (
52-
<MuiThemeProvider theme={settings.theme}>
54+
return (
55+
<MuiThemeProvider theme={createMuiTheme(theTheme)}>
5356
<CssBaseline />
5457
<div style={{ height: "100vh" }}>
5558
<Router>
@@ -63,16 +66,4 @@ class App extends Component {
6366
</div>
6467
</MuiThemeProvider>
6568
);
66-
}
67-
}
68-
69-
const mapStateToProps = state => {
70-
return {
71-
settings: state.settings,
72-
};
73-
};
74-
75-
export default connect(
76-
mapStateToProps,
77-
null
78-
)(App);
69+
};

‎client/src/components/Header/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Header = props => {
3636
<MenuIcon />
3737
</IconButton>
3838
<Typography
39-
variant="title"
39+
variant="h6"
4040
color="inherit"
4141
noWrap
4242
className={classes.title}

‎client/src/components/Sidebar/Sidebar.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const drawerWidth = 240;
1515
const styles = theme => ({
1616
drawerPaper: {
1717
position: "fixed",
18-
top: theme.spacing.unit * 8,
18+
top: theme.spacing(8),
1919
whiteSpace: "nowrap",
2020
width: drawerWidth,
2121
transition: theme.transitions.create("width", {
@@ -29,9 +29,9 @@ const styles = theme => ({
2929
easing: theme.transitions.easing.sharp,
3030
duration: theme.transitions.duration.leavingScreen
3131
}),
32-
width: theme.spacing.unit * 8,
32+
width: theme.spacing(8),
3333
[theme.breakpoints.up("sm")]: {
34-
width: theme.spacing.unit * 9
34+
width: theme.spacing(9)
3535
}
3636
}
3737
});
@@ -63,7 +63,7 @@ const Sidebar = props => {
6363
<ListItemIcon>
6464
<SettingsIcon />
6565
</ListItemIcon>
66-
<ListItemText primary="Orders" />
66+
<ListItemText primary="Settings" />
6767
</ListItem>
6868
</Link>
6969
</List>

‎client/src/components/Sidebar/listItems.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const mainListItems = (
2222
<ListItemIcon>
2323
<ShoppingCartIcon />
2424
</ListItemIcon>
25-
<ListItemText primary="Orders" />
25+
<ListItemText primary="Settings" />
2626
</ListItem>
2727
<ListItem button>
2828
<ListItemIcon>

‎client/src/containers/Home.js‎ renamed to ‎client/src/containers/Home/Home.js‎

Lines changed: 14 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import Card from "@material-ui/core/Card";
44
import CardContent from "@material-ui/core/CardContent";
55
import CardActions from "@material-ui/core/CardActions";
66
import Typography from "@material-ui/core/Typography";
7-
import { bindActionCreators } from "redux";
8-
import { connect } from "react-redux";
97

10-
import { increment, decrement } from "../store/reducers/stepCounter";
8+
import { increment, decrement, getCounter } from "./counterReducer";
9+
import { useSelector, useDispatch } from "react-redux";
10+
11+
export default function Home() {
12+
13+
const counter = useSelector(getCounter);
14+
15+
const dispatch = useDispatch();
1116

12-
const Home = props => {
1317
return (
1418
<div
1519
style={{
@@ -20,51 +24,29 @@ const Home = props => {
2024
>
2125
<Card>
2226
<CardContent>
23-
<Typography variant="headline" headlineMapping={"h1"}>
27+
<Typography variant="h5">
2428
Redux Example
2529
</Typography>
2630
<Typography
2731
align="center"
28-
variant="subheading"
29-
headlineMapping={"h1"}
32+
variant="subtitle1"
3033
>
31-
Counter: {props.stepCounter.counter}
34+
Counter: {counter}
3235
</Typography>
3336
</CardContent>
3437
<CardActions>
35-
<Button color="primary" variant="contained" onClick={props.increment}>
38+
<Button color="primary" variant="contained" onClick={() => dispatch(increment())}>
3639
Increment
3740
</Button>
3841
<Button
3942
color="secondary"
4043
variant="contained"
41-
onClick={props.decrement}
44+
onClick={() => dispatch(decrement())}
4245
>
4346
Decrement
4447
</Button>
4548
</CardActions>
4649
</Card>
4750
</div>
4851
);
49-
};
50-
51-
const mapStateToProps = state => {
52-
return {
53-
stepCounter: state.stepCounter
54-
};
55-
};
56-
57-
const mapDispatchToProps = dispatch => {
58-
return bindActionCreators(
59-
{
60-
increment: () => increment(),
61-
decrement: () => decrement()
62-
},
63-
dispatch
64-
);
65-
};
66-
67-
export default connect(
68-
mapStateToProps,
69-
mapDispatchToProps
70-
)(Home);
52+
};

‎client/src/containers/Home/counterReducer.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createSlice } from '@reduxjs/toolkit';
2+
3+
export const counter = createSlice({
4+
name: 'counter',
5+
initialState: {
6+
value: 0,
7+
},
8+
reducers: {
9+
increment: state => {
10+
// Redux Toolkit allows us to write "mutating" logic in reducers. It
11+
// doesn't actually mutate the state because it uses the Immer library,
12+
// which detects changes to a "draft state" and produces a brand new
13+
// immutable state based off those changes
14+
state.value += 1;
15+
},
16+
decrement: state => {
17+
state.value -= 1;
18+
},
19+
},
20+
});
21+
22+
export const { increment, decrement } = counter.actions;
23+
24+
25+
// The function below is called a selector and allows us to select a value from
26+
// the state. Selectors can also be defined inline where they're used instead of
27+
// in the slice file. For example: `useSelector((state) => state.counter.value)`
28+
export const getCounter = state => state.counter.value;
29+
30+
export default counter.reducer;

‎client/src/containers/Setting.js‎ renamed to ‎client/src/containers/Setting/Setting.js‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,20 @@ import ListItemText from "@material-ui/core/ListItemText";
1010
import Switch from "@material-ui/core/Switch";
1111
import PaletteIcon from "@material-ui/icons/Palette";
1212
import CompareArrowsIcon from "@material-ui/icons/CompareArrows";
13-
import { bindActionCreators } from "redux";
14-
import { connect } from "react-redux";
13+
import { useSelector, useDispatch } from 'react-redux';
1514

16-
import { toggleThemeMode, swapThemeColors } from "../store/reducers/settings";
15+
import { toggleThemeMode, swapThemeColors, isDarkMode, isColorSwaped } from "./settingsReducer";
1716

18-
const Settings = props => (
17+
export default function Setting() {
18+
19+
const darkMode = useSelector(isDarkMode);
20+
const colorSwaped = useSelector(isColorSwaped);
21+
22+
const dispatch = useDispatch();
23+
24+
return (
1925
<div>
20-
<Typography variant="headline">Settings</Typography>
26+
<Typography variant="h5">Settings</Typography>
2127
<Card>
2228
<CardContent>
2329
<List>
@@ -28,8 +34,8 @@ const Settings = props => (
2834
<ListItemText primary="Dark Mode" />
2935
<ListItemSecondaryAction>
3036
<Switch
31-
onChange={(e, checked) => props.toggleThemeMode(checked)}
32-
checked={props.settings.darkMode}
37+
onChange={(e, checked) => dispatch(toggleThemeMode(checked))}
38+
checked={darkMode}
3339
/>
3440
</ListItemSecondaryAction>
3541
</ListItem>
@@ -40,34 +46,13 @@ const Settings = props => (
4046
<ListItemText primary="Swap Colors" />
4147
<ListItemSecondaryAction>
4248
<Switch
43-
onChange={(e, checked) => props.swapThemeColors(checked)}
44-
checked={props.settings.colorsSwaped}
49+
onChange={(e, checked) => dispatch(swapThemeColors(checked))}
50+
checked={colorSwaped}
4551
/>
4652
</ListItemSecondaryAction>
4753
</ListItem>
4854
</List>
4955
</CardContent>
5056
</Card>
51-
</div>
52-
);
53-
54-
const mapStateToProps = state => {
55-
return {
56-
settings: state.settings
57-
};
57+
</div>);
5858
};
59-
60-
const mapDispatchToProps = dispatch => {
61-
return bindActionCreators(
62-
{
63-
toggleThemeMode: checked => toggleThemeMode(checked),
64-
swapThemeColors: checked => swapThemeColors(checked)
65-
},
66-
dispatch
67-
);
68-
};
69-
70-
export default connect(
71-
mapStateToProps,
72-
mapDispatchToProps
73-
)(Settings);

0 commit comments

Comments
 (0)