Skip to content

Commit 688814a

Browse files
zoltantothcomzoltantothcom
committed
Added Redux with a simple JS version toggle button
1 parent 325d7d4 commit 688814a

File tree

9 files changed

+158
-24
lines changed

9 files changed

+158
-24
lines changed

‎.babelrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"]
2+
"presets": ["@babel/preset-env", "@babel/preset-react"],
3+
"plugins": ["@babel/plugin-proposal-class-properties"]
34
}

‎index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import { Provider } from 'react-redux';
4+
import store from './src/store';
35
import Layout from './src/Layout';
46

5-
const App = () => <Layout />;
7+
const App = () => (
8+
<Provider store={store}>
9+
<Layout />
10+
</Provider>
11+
);
612

713
ReactDOM.render(<App />, document.getElementById('root'));

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"prop-types": "^15.6.2",
67
"react": "^16.7.0",
78
"react-dom": "^16.7.0",
9+
"react-redux": "^6.0.0",
810
"react-syntax-highlighter": "^10.1.2",
11+
"redux": "^4.0.1",
912
"styled-components": "^4.1.3"
1013
},
1114
"scripts": {
@@ -30,6 +33,7 @@
3033
},
3134
"devDependencies": {
3235
"@babel/core": "^7.2.2",
36+
"@babel/plugin-proposal-class-properties": "^7.3.0",
3337
"@babel/preset-env": "^7.3.1",
3438
"@babel/preset-react": "^7.0.0",
3539
"babel-eslint": "^10.0.1",

‎src/Layout.jsx

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { connect } from 'react-redux';
24
import styled from 'styled-components';
3-
45
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
56
import js from 'react-syntax-highlighter/dist/languages/hljs/javascript';
67
import style from 'react-syntax-highlighter/dist/styles/hljs/atom-one-dark';
8+
import ToggleButton from './components/ToggleButton';
79

810
SyntaxHighlighter.registerLanguage('javascript', js);
911

@@ -56,21 +58,28 @@ module.exports = Pattern;
5658
5759
`;
5860

59-
class Layout extends React.Component {
60-
render() {
61-
return (
62-
<React.Fragment>
63-
<Title>JavaScript</Title>
64-
<SyntaxHighlighter language="javascript" style={style} customStyle={{ fontSize: '1.25rem' }}>
65-
{code}
66-
</SyntaxHighlighter>
67-
ES6
68-
<SyntaxHighlighter language="javascript" style={style} customStyle={{ fontSize: '1.25rem' }}>
69-
{codeES6}
70-
</SyntaxHighlighter>
71-
</React.Fragment>
72-
);
73-
}
74-
}
61+
const Layout = props => (
62+
<React.Fragment>
63+
<Title>JavaScript</Title>
64+
<ToggleButton />
65+
{props.js === 'es5' && (
66+
<SyntaxHighlighter language="javascript" style={style} customStyle={{ fontSize: '1.25rem' }}>
67+
{code}
68+
</SyntaxHighlighter>
69+
)}
70+
71+
{props.js === 'es6' && (
72+
<SyntaxHighlighter language="javascript" style={style} customStyle={{ fontSize: '1.25rem' }}>
73+
{codeES6}
74+
</SyntaxHighlighter>
75+
)}
76+
</React.Fragment>
77+
);
78+
79+
Layout.propTypes = {
80+
js: PropTypes.string.isRequired
81+
};
82+
83+
const mapStateToProps = ({ js }) => ({ js });
7584

76-
export default Layout;
85+
export default connect(mapStateToProps)(Layout);

‎src/actions/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const addAnswer = payload => ({
2+
type: 'ADD_ANSWER',
3+
payload
4+
});
5+
6+
export const toggleJS = payload => ({
7+
type: 'TOGGLE_JS',
8+
payload
9+
});

‎src/components/ToggleButton.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* eslint-disable */
2+
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
import { connect } from 'react-redux';
6+
import { toggleJS } from '../actions';
7+
8+
const ToggleButton = props => {
9+
const toggleJS = () => {
10+
const { js, toggleJS } = props;
11+
toggleJS(js === 'es5' ? 'es6' : 'es5');
12+
};
13+
14+
return <button onClick={toggleJS}>{props.js}</button>;
15+
};
16+
17+
ToggleButton.propTypes = {
18+
js: PropTypes.string.isRequired,
19+
};
20+
21+
// const mapStateToProps = state => ({ js: state.js });
22+
const mapStateToProps = ({ js }) => ({ js });
23+
24+
const mapDispatchToProps = dispatch => {
25+
return { toggleJS: version => dispatch(toggleJS(version)) };
26+
};
27+
28+
export default connect(
29+
mapStateToProps,
30+
mapDispatchToProps
31+
)(ToggleButton);

‎src/reducers/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const initialState = {
2+
js: 'es5',
3+
answers: []
4+
};
5+
6+
const rootReducer = (state = initialState, action) => {
7+
switch (action.type) {
8+
case 'ADD_ANSWER':
9+
return { ...state, answers: [...state.answers, action.payload] };
10+
case 'TOGGLE_JS':
11+
return { ...state, js: action.payload };
12+
default:
13+
return state;
14+
}
15+
};
16+
17+
export default rootReducer;

‎src/store/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createStore } from 'redux';
2+
import reducer from '../reducers/index';
3+
4+
const store = createStore(reducer);
5+
6+
export default store;

‎yarn.lock

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,17 @@
7272
"@babel/traverse" "^7.1.0"
7373
"@babel/types" "^7.0.0"
7474

75+
"@babel/helper-create-class-features-plugin@^7.3.0":
76+
version "7.3.0"
77+
resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.3.0.tgz#2b01a81b3adc2b1287f9ee193688ef8dc71e718f"
78+
integrity sha512-DUsQNS2CGLZZ7I3W3fvh0YpPDd6BuWJlDl+qmZZpABZHza2ErE3LxtEzLJFHFC1ZwtlAXvHhbFYbtM5o5B0WBw==
79+
dependencies:
80+
"@babel/helper-function-name" "^7.1.0"
81+
"@babel/helper-member-expression-to-functions" "^7.0.0"
82+
"@babel/helper-optimise-call-expression" "^7.0.0"
83+
"@babel/helper-plugin-utils" "^7.0.0"
84+
"@babel/helper-replace-supers" "^7.2.3"
85+
7586
"@babel/helper-define-map@^7.1.0":
7687
version "7.1.0"
7788
resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
@@ -168,7 +179,7 @@
168179
"@babel/traverse" "^7.1.0"
169180
"@babel/types" "^7.0.0"
170181

171-
"@babel/helper-replace-supers@^7.1.0":
182+
"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.2.3":
172183
version "7.2.3"
173184
resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.2.3.tgz#19970020cf22677d62b3a689561dbd9644d8c5e5"
174185
integrity sha512-GyieIznGUfPXPWu0yLS6U55Mz67AZD9cUk0BfirOWlPrXlBcan9Gz+vHGz+cPfuoweZSnPzPIm67VtQM0OWZbA==
@@ -235,6 +246,14 @@
235246
"@babel/helper-remap-async-to-generator" "^7.1.0"
236247
"@babel/plugin-syntax-async-generators" "^7.2.0"
237248

249+
"@babel/plugin-proposal-class-properties@^7.3.0":
250+
version "7.3.0"
251+
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.0.tgz#272636bc0fa19a0bc46e601ec78136a173ea36cd"
252+
integrity sha512-wNHxLkEKTQ2ay0tnsam2z7fGZUi+05ziDJflEt3AZTP3oXLKHJp9HqhfroB/vdMvt3sda9fAbq7FsG8QPDrZBg==
253+
dependencies:
254+
"@babel/helper-create-class-features-plugin" "^7.3.0"
255+
"@babel/helper-plugin-utils" "^7.0.0"
256+
238257
"@babel/plugin-proposal-json-strings@^7.2.0":
239258
version "7.2.0"
240259
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -617,7 +636,7 @@
617636
"@babel/plugin-transform-react-jsx-self" "^7.0.0"
618637
"@babel/plugin-transform-react-jsx-source" "^7.0.0"
619638

620-
"@babel/runtime@^7.1.2":
639+
"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
621640
version "7.3.1"
622641
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
623642
integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==
@@ -3922,6 +3941,13 @@ hmac-drbg@^1.0.0:
39223941
minimalistic-assert "^1.0.0"
39233942
minimalistic-crypto-utils "^1.0.1"
39243943

3944+
hoist-non-react-statics@^3.2.1:
3945+
version "3.3.0"
3946+
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
3947+
integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
3948+
dependencies:
3949+
react-is "^16.7.0"
3950+
39253951
homedir-polyfill@^1.0.1:
39263952
version "1.0.1"
39273953
resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
@@ -5208,7 +5234,7 @@ loglevel@^1.4.1:
52085234
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
52095235
integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=
52105236

5211-
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
5237+
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
52125238
version "1.4.0"
52135239
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
52145240
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6460,11 +6486,23 @@ react-dom@^16.7.0:
64606486
prop-types "^15.6.2"
64616487
scheduler "^0.12.0"
64626488

6463-
react-is@^16.6.0, react-is@^16.7.0:
6489+
react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0:
64646490
version "16.7.0"
64656491
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
64666492
integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
64676493

6494+
react-redux@^6.0.0:
6495+
version "6.0.0"
6496+
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0.tgz#09e86eeed5febb98e9442458ad2970c8f1a173ef"
6497+
integrity sha512-EmbC3uLl60pw2VqSSkj6HpZ6jTk12RMrwXMBdYtM6niq0MdEaRq9KYCwpJflkOZj349BLGQm1MI/JO1W96kLWQ==
6498+
dependencies:
6499+
"@babel/runtime" "^7.2.0"
6500+
hoist-non-react-statics "^3.2.1"
6501+
invariant "^2.2.4"
6502+
loose-envify "^1.4.0"
6503+
prop-types "^15.6.2"
6504+
react-is "^16.6.3"
6505+
64686506
react-syntax-highlighter@^10.1.2:
64696507
version "10.1.2"
64706508
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-10.1.2.tgz#645ad5e3d8667fd7a2b73fc1059f871055d23f82"
@@ -6561,6 +6599,14 @@ realpath-native@^1.0.0, realpath-native@^1.0.2:
65616599
dependencies:
65626600
util.promisify "^1.0.0"
65636601

6602+
redux@^4.0.1:
6603+
version "4.0.1"
6604+
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
6605+
integrity sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==
6606+
dependencies:
6607+
loose-envify "^1.4.0"
6608+
symbol-observable "^1.2.0"
6609+
65646610
refractor@^2.4.1:
65656611
version "2.6.2"
65666612
resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.6.2.tgz#8e0877ab8864165275aafeea5d9c8eebe871552f"
@@ -7458,6 +7504,11 @@ supports-color@^6.0.0, supports-color@^6.1.0:
74587504
dependencies:
74597505
has-flag "^3.0.0"
74607506

7507+
symbol-observable@^1.2.0:
7508+
version "1.2.0"
7509+
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
7510+
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
7511+
74617512
symbol-tree@^3.2.2:
74627513
version "3.2.2"
74637514
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"

0 commit comments

Comments
 (0)