From 5661e8088a29a3fd62669434e1602f59511be8d6 Mon Sep 17 00:00:00 2001 From: daisho Date: Sun, 23 Aug 2020 22:03:50 -0400 Subject: [PATCH 1/2] Starting to add redux and react-redux --- package-lock.json | 34 ++++++++++++++++++++ package.json | 4 ++- src/client/App.js | 44 +++++++++++++++++++------- src/client/List.js | 16 ++++++---- src/client/actionCreators/changeApp.js | 5 +++ src/client/index.js | 9 +++++- src/client/reducers/currentApp.js | 9 ++++++ src/client/reducers/index.js | 6 ++++ src/client/store.js | 6 ++++ 9 files changed, 113 insertions(+), 20 deletions(-) create mode 100644 src/client/actionCreators/changeApp.js create mode 100644 src/client/reducers/currentApp.js create mode 100644 src/client/reducers/index.js create mode 100644 src/client/store.js diff --git a/package-lock.json b/package-lock.json index 43715d1..05b7af3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4979,6 +4979,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -7533,6 +7541,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-redux": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz", + "integrity": "sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "read-pkg": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz", @@ -7638,6 +7658,15 @@ "picomatch": "^2.0.7" } }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -8729,6 +8758,11 @@ "has-flag": "^3.0.0" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, "table": { "version": "5.4.6", "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", diff --git a/package.json b/package.json index a90ab42..1d35b60 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "jimp": "^0.9.3", "multer": "^1.4.2", "react": "^16.12.0", - "react-dom": "^16.12.0" + "react-dom": "^16.12.0", + "react-redux": "^7.2.1", + "redux": "^4.0.5" }, "devDependencies": { "@babel/core": "^7.8.3", diff --git a/src/client/App.js b/src/client/App.js index 4965808..3e5b9b6 100644 --- a/src/client/App.js +++ b/src/client/App.js @@ -8,7 +8,11 @@ import FileUpload from "./FileUpload"; import Status from "./Status"; import SortAndSearch from "./SortAndSearch"; import Spinner from "./Spinner"; -import Modal from "./Modal.js"; +import Modal from "./Modal"; + +import { connect } from "react-redux"; +import changeApp from "./actionCreators/changeApp"; + import "./App.css"; class App extends Component { @@ -48,6 +52,7 @@ class App extends Component { } getInitialApp = () => { + console.log("PR", this.props); fetch(`/api/init`) .then((res) => res.json()) .then((applications) => { @@ -56,10 +61,13 @@ class App extends Component { defaultApp = applications[key]; break; } - this.setState({ currentApp: defaultApp, applications }, () => { + this.props.updateApp(defaultApp); + // this.setState({ currentApp: defaultApp, applications }, () => { + this.setState({ applications }, () => { !Object.keys(this.state.applications).length ? this.setState({ showNoAppMsg: true }) - : this.getList(this.state.currentApp.appId); + : // : this.getList(this.state.currentApp.appId); + this.getList(this.props.currentApp.appId); }); }) .catch((error) => { @@ -155,7 +163,8 @@ class App extends Component { this.state.file && this.state.file.name ) { - this.handleSubmitFile(this.state.currentApp.appId, fileName); + // this.handleSubmitFile(this.state.currentApp.appId, fileName); + this.handleSubmitFile(this.props.currentApp.appId, fileName); this.setState({ editing: false }); } this.getList(appId); @@ -300,14 +309,17 @@ class App extends Component { this.setState({ keyPressed: {} }); }; - handleChangeApp = () => { + handleChangeApp = (currentApp) => { + // this.props.changeApp(this.state.applications[event.target.value]); + this.props.updateApp(this.state.applications[event.target.value]); this.setState( { - currentApp: this.state.applications[event.target.value], + // currentApp: this.state.applications[event.target.value], switching: true }, () => { - this.getList(this.state.currentApp["appId"]); + // this.getList(this.state.currentApp["appId"]); + this.getList(this.props.currentApp["appId"]); } ); }; @@ -321,9 +333,10 @@ class App extends Component { }; render() { + console.log("UU", this.props); const { applications, - currentApp, + // currentApp, categoryList, navOpen, status, @@ -338,7 +351,7 @@ class App extends Component { return (
-

{currentApp.name}

+

{this.props.currentApp.name}

{lastUpdated && ( @@ -373,14 +386,14 @@ class App extends Component { {editing ? ( ) : ( @@ -441,4 +454,11 @@ class App extends Component { } } -export default App; +const mapStateToProps = ({ currentApp }) => ({ currentApp }); + +const mapDispatchToProps = (dispatch) => ({ + updateApp: (currentApp) => dispatch(changeApp(currentApp)) +}); + +// export default App; +export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/src/client/List.js b/src/client/List.js index a0fb288..e180c7c 100644 --- a/src/client/List.js +++ b/src/client/List.js @@ -1,9 +1,11 @@ import React from "react"; import Spinner from "./Spinner"; +import { connect } from "react-redux"; const List = (props) => { + console.log("ho", props); const { - currentApp, + // currentApp, categoryList, searchTerm, sortAl, @@ -16,8 +18,8 @@ const List = (props) => { let total = 0; const currentPort = window.location.href.replace(/https?:\/\/localhost:(\d{4})\//, "$1"); - const filePathDev = `./dist/images/uploads/${currentApp.appId}/`; - const filePathProd = `./images/uploads/${currentApp.appId}/`; + const filePathDev = `./dist/images/uploads/${props.currentApp.appId}/`; + const filePathProd = `./images/uploads/${props.currentApp.appId}/`; const currentPath = currentPort === "3000" ? filePathDev : filePathProd; return ( @@ -26,8 +28,8 @@ const List = (props) => { Index - {currentApp.category} - {currentApp.subcategory} + {props.currentApp.category} + {props.currentApp.subcategory} Image Status Action @@ -103,4 +105,6 @@ const List = (props) => { ); }; -export default List; +const mapStateToProps = ({ currentApp }) => ({ currentApp }); + +export default connect(mapStateToProps)(List); diff --git a/src/client/actionCreators/changeApp.js b/src/client/actionCreators/changeApp.js new file mode 100644 index 0000000..e4c16cf --- /dev/null +++ b/src/client/actionCreators/changeApp.js @@ -0,0 +1,5 @@ +const changeApp = (app) => { + return { type: "CHANGE_APP", payload: app }; +}; + +export default changeApp; diff --git a/src/client/index.js b/src/client/index.js index 468dea2..e6d13fc 100644 --- a/src/client/index.js +++ b/src/client/index.js @@ -1,5 +1,12 @@ import React from "react"; import { render } from "react-dom"; +import { Provider } from "react-redux"; import App from "./App"; +import store from "./store"; -render(, document.getElementById("root")); +render( + + + , + document.getElementById("root") +); diff --git a/src/client/reducers/currentApp.js b/src/client/reducers/currentApp.js new file mode 100644 index 0000000..67fccd2 --- /dev/null +++ b/src/client/reducers/currentApp.js @@ -0,0 +1,9 @@ +const currentApp = (state = {}, action) => { + if (action.type === "CHANGE_APP") { + return action.payload; + } else { + return state; + } +}; + +export default currentApp; diff --git a/src/client/reducers/index.js b/src/client/reducers/index.js new file mode 100644 index 0000000..707f2a7 --- /dev/null +++ b/src/client/reducers/index.js @@ -0,0 +1,6 @@ +import { combineReducers } from "redux"; +import currentApp from "./currentApp"; + +export default combineReducers({ + currentApp +}); diff --git a/src/client/store.js b/src/client/store.js new file mode 100644 index 0000000..bf85b12 --- /dev/null +++ b/src/client/store.js @@ -0,0 +1,6 @@ +import { createStore } from "redux"; +import reducer from "./reducers"; + +const store = createStore(reducer); + +export default store; From 3ba3b4cb2b481061a42f5b63bd54da410ce274b7 Mon Sep 17 00:00:00 2001 From: daisho Date: Sun, 23 Aug 2020 22:24:31 -0400 Subject: [PATCH 2/2] Wrapping up to add redux --- src/client/App.js | 15 ++------------- src/client/CategoryDropdown.js | 5 ++++- src/client/CategoryInput.js | 5 ++++- src/client/List.js | 6 ++---- src/client/SortAndSearch.js | 5 ++++- src/client/SubcategoryInput.js | 5 ++++- 6 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/client/App.js b/src/client/App.js index 3e5b9b6..2e89916 100644 --- a/src/client/App.js +++ b/src/client/App.js @@ -18,7 +18,6 @@ import "./App.css"; class App extends Component { state = { applications: {}, - currentApp: {}, categoryList: [], category: "", subcategory: "", @@ -52,7 +51,6 @@ class App extends Component { } getInitialApp = () => { - console.log("PR", this.props); fetch(`/api/init`) .then((res) => res.json()) .then((applications) => { @@ -62,12 +60,10 @@ class App extends Component { break; } this.props.updateApp(defaultApp); - // this.setState({ currentApp: defaultApp, applications }, () => { this.setState({ applications }, () => { !Object.keys(this.state.applications).length ? this.setState({ showNoAppMsg: true }) - : // : this.getList(this.state.currentApp.appId); - this.getList(this.props.currentApp.appId); + : this.getList(this.props.currentApp.appId); }); }) .catch((error) => { @@ -163,7 +159,6 @@ class App extends Component { this.state.file && this.state.file.name ) { - // this.handleSubmitFile(this.state.currentApp.appId, fileName); this.handleSubmitFile(this.props.currentApp.appId, fileName); this.setState({ editing: false }); } @@ -309,16 +304,13 @@ class App extends Component { this.setState({ keyPressed: {} }); }; - handleChangeApp = (currentApp) => { - // this.props.changeApp(this.state.applications[event.target.value]); + handleChangeApp = () => { this.props.updateApp(this.state.applications[event.target.value]); this.setState( { - // currentApp: this.state.applications[event.target.value], switching: true }, () => { - // this.getList(this.state.currentApp["appId"]); this.getList(this.props.currentApp["appId"]); } ); @@ -333,10 +325,8 @@ class App extends Component { }; render() { - console.log("UU", this.props); const { applications, - // currentApp, categoryList, navOpen, status, @@ -460,5 +450,4 @@ const mapDispatchToProps = (dispatch) => ({ updateApp: (currentApp) => dispatch(changeApp(currentApp)) }); -// export default App; export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/src/client/CategoryDropdown.js b/src/client/CategoryDropdown.js index 4a05a45..342c2f5 100644 --- a/src/client/CategoryDropdown.js +++ b/src/client/CategoryDropdown.js @@ -1,4 +1,5 @@ import React from "react"; +import { connect } from "react-redux"; const CategoryDropdown = ({ currentApp, category, handleChange, categoryList, inputDisabled }) => { return ( @@ -18,4 +19,6 @@ const CategoryDropdown = ({ currentApp, category, handleChange, categoryList, in ); }; -export default CategoryDropdown; +const mapStateToProps = ({ currentApp }) => ({ currentApp }); + +export default connect(mapStateToProps)(CategoryDropdown); diff --git a/src/client/CategoryInput.js b/src/client/CategoryInput.js index a133700..348fb4e 100644 --- a/src/client/CategoryInput.js +++ b/src/client/CategoryInput.js @@ -1,4 +1,5 @@ import React from "react"; +import { connect } from "react-redux"; const CategoryInput = ({ currentApp, handleChange, category, inputDisabled }) => (

@@ -18,4 +19,6 @@ const CategoryInput = ({ currentApp, handleChange, category, inputDisabled }) =>
); -export default CategoryInput; +const mapStateToProps = ({ currentApp }) => ({ currentApp }); + +export default connect(mapStateToProps)(CategoryInput); diff --git a/src/client/List.js b/src/client/List.js index e180c7c..f48c05c 100644 --- a/src/client/List.js +++ b/src/client/List.js @@ -3,9 +3,7 @@ import Spinner from "./Spinner"; import { connect } from "react-redux"; const List = (props) => { - console.log("ho", props); const { - // currentApp, categoryList, searchTerm, sortAl, @@ -75,7 +73,7 @@ const List = (props) => { @@ -83,7 +81,7 @@ const List = (props) => { className="button is-danger" onClick={() => deleteOne( - currentApp.appId, + props.currentApp.appId, category.name, subcat.id, subcat.name, diff --git a/src/client/SortAndSearch.js b/src/client/SortAndSearch.js index f419e70..7436157 100644 --- a/src/client/SortAndSearch.js +++ b/src/client/SortAndSearch.js @@ -1,4 +1,5 @@ import React from "react"; +import { connect } from "react-redux"; const SortAndSearch = ({ applySort, sortAl, currentApp, handleSearch }) => ( @@ -16,4 +17,6 @@ const SortAndSearch = ({ applySort, sortAl, currentApp, handleSearch }) => ( ); -export default SortAndSearch; +const mapStateToProps = ({ currentApp }) => ({ currentApp }); + +export default connect(mapStateToProps)(SortAndSearch); diff --git a/src/client/SubcategoryInput.js b/src/client/SubcategoryInput.js index 791fc10..cd8d2ba 100644 --- a/src/client/SubcategoryInput.js +++ b/src/client/SubcategoryInput.js @@ -1,4 +1,5 @@ import React from "react"; +import { connect } from "react-redux"; const SubcategoryInput = ({ currentApp, handleChange, subcategory }) => (
@@ -16,4 +17,6 @@ const SubcategoryInput = ({ currentApp, handleChange, subcategory }) => (
); -export default SubcategoryInput; +const mapStateToProps = ({ currentApp }) => ({ currentApp }); + +export default connect(mapStateToProps)(SubcategoryInput);