From d74d39efd7c4fa5d18d8652bdedb186329bd0f38 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 11:30:02 +0200 Subject: [PATCH 01/11] first commit --- redux-app/.gitignore | 23 ++++++ redux-app/README.md | 68 ++++++++++++++++ redux-app/package.json | 34 ++++++++ redux-app/public/favicon.ico | Bin 0 -> 3150 bytes redux-app/public/index.html | 43 ++++++++++ redux-app/public/logo192.png | Bin 0 -> 5347 bytes redux-app/public/logo512.png | Bin 0 -> 9664 bytes redux-app/public/manifest.json | 25 ++++++ redux-app/public/robots.txt | 3 + redux-app/src/App.css | 38 +++++++++ redux-app/src/App.js | 26 ++++++ redux-app/src/App.test.js | 9 +++ redux-app/src/index.css | 13 +++ redux-app/src/index.js | 17 ++++ redux-app/src/logo.svg | 7 ++ redux-app/src/serviceWorker.js | 141 +++++++++++++++++++++++++++++++++ redux-app/src/setupTests.js | 5 ++ 17 files changed, 452 insertions(+) create mode 100644 redux-app/.gitignore create mode 100644 redux-app/README.md create mode 100644 redux-app/package.json create mode 100644 redux-app/public/favicon.ico create mode 100644 redux-app/public/index.html create mode 100644 redux-app/public/logo192.png create mode 100644 redux-app/public/logo512.png create mode 100644 redux-app/public/manifest.json create mode 100644 redux-app/public/robots.txt create mode 100644 redux-app/src/App.css create mode 100644 redux-app/src/App.js create mode 100644 redux-app/src/App.test.js create mode 100644 redux-app/src/index.css create mode 100644 redux-app/src/index.js create mode 100644 redux-app/src/logo.svg create mode 100644 redux-app/src/serviceWorker.js create mode 100644 redux-app/src/setupTests.js diff --git a/redux-app/.gitignore b/redux-app/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ b/redux-app/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/redux-app/README.md b/redux-app/README.md new file mode 100644 index 0000000..54ef094 --- /dev/null +++ b/redux-app/README.md @@ -0,0 +1,68 @@ +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). + +### Code Splitting + +This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting + +### Analyzing the Bundle Size + +This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size + +### Making a Progressive Web App + +This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app + +### Advanced Configuration + +This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration + +### Deployment + +This section has moved here: https://facebook.github.io/create-react-app/docs/deployment + +### `npm run build` fails to minify + +This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify diff --git a/redux-app/package.json b/redux-app/package.json new file mode 100644 index 0000000..887b1f3 --- /dev/null +++ b/redux-app/package.json @@ -0,0 +1,34 @@ +{ + "name": "redux-app", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.5.0", + "@testing-library/user-event": "^7.2.1", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-scripts": "3.4.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/redux-app/public/favicon.ico b/redux-app/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..bcd5dfd67cd0361b78123e95c2dd96031f27f743 GIT binary patch literal 3150 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 MDeX2GIKR{Qf5okjU;qFB literal 0 HcmV?d00001 diff --git a/redux-app/public/index.html b/redux-app/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/redux-app/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/redux-app/public/logo192.png b/redux-app/public/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/redux-app/public/manifest.json b/redux-app/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/redux-app/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/redux-app/public/robots.txt b/redux-app/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/redux-app/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/redux-app/src/App.css b/redux-app/src/App.css new file mode 100644 index 0000000..74b5e05 --- /dev/null +++ b/redux-app/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/redux-app/src/App.js b/redux-app/src/App.js new file mode 100644 index 0000000..ce9cbd2 --- /dev/null +++ b/redux-app/src/App.js @@ -0,0 +1,26 @@ +import React from 'react'; +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); +} + +export default App; diff --git a/redux-app/src/App.test.js b/redux-app/src/App.test.js new file mode 100644 index 0000000..4db7ebc --- /dev/null +++ b/redux-app/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/redux-app/src/index.css b/redux-app/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/redux-app/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/redux-app/src/index.js b/redux-app/src/index.js new file mode 100644 index 0000000..f5185c1 --- /dev/null +++ b/redux-app/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/redux-app/src/logo.svg b/redux-app/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/redux-app/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/redux-app/src/serviceWorker.js b/redux-app/src/serviceWorker.js new file mode 100644 index 0000000..b04b771 --- /dev/null +++ b/redux-app/src/serviceWorker.js @@ -0,0 +1,141 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' }, + }) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); + } +} diff --git a/redux-app/src/setupTests.js b/redux-app/src/setupTests.js new file mode 100644 index 0000000..74b1a27 --- /dev/null +++ b/redux-app/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; From 2ccd1bf7d52ff622ac75b35046341703b600ded4 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 11:50:33 +0200 Subject: [PATCH 02/11] init redux --- redux-app/package.json | 4 +++- redux-app/src/App.js | 36 +++++++++++-------------------- redux-app/src/components/Lista.js | 12 +++++++++++ redux-app/src/store/index.js | 0 4 files changed, 28 insertions(+), 24 deletions(-) create mode 100644 redux-app/src/components/Lista.js create mode 100644 redux-app/src/store/index.js diff --git a/redux-app/package.json b/redux-app/package.json index 887b1f3..afd2522 100644 --- a/redux-app/package.json +++ b/redux-app/package.json @@ -8,7 +8,9 @@ "@testing-library/user-event": "^7.2.1", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-scripts": "3.4.1" + "react-redux": "^7.2.0", + "react-scripts": "3.4.1", + "redux": "^4.0.5" }, "scripts": { "start": "react-scripts start", diff --git a/redux-app/src/App.js b/redux-app/src/App.js index ce9cbd2..3bf7306 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -1,26 +1,16 @@ -import React from 'react'; -import logo from './logo.svg'; +import React, { Component } from 'react'; import './App.css'; +import { Provider } from 'react-redux' +import { store } from './store' +import Lista from './components/Lista'; -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); +export default class App extends Component { + render() { + return ( + + + + ); + } + } - -export default App; diff --git a/redux-app/src/components/Lista.js b/redux-app/src/components/Lista.js new file mode 100644 index 0000000..e2fdcff --- /dev/null +++ b/redux-app/src/components/Lista.js @@ -0,0 +1,12 @@ +import React, { Component } from 'react' + +export default class Lista extends Component { + constructor(props) { + super(props); + this.state = { } + } + + render() { + return (
Lista
); + } +} \ No newline at end of file diff --git a/redux-app/src/store/index.js b/redux-app/src/store/index.js new file mode 100644 index 0000000..e69de29 From 74e5e2479020744d9aec5a0f28509b67bb95892c Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 12:41:09 +0200 Subject: [PATCH 03/11] redux persist local storage --- redux-app/package.json | 3 +- redux-app/src/components/Lista.js | 51 ++++++++++++++++++++++----- redux-app/src/index.js | 13 +------ redux-app/src/store/actions/lista.js | 4 +++ redux-app/src/store/index.js | 15 ++++++++ redux-app/src/store/reducers/index.js | 0 redux-app/src/store/reducers/lista.js | 8 +++++ 7 files changed, 72 insertions(+), 22 deletions(-) create mode 100644 redux-app/src/store/actions/lista.js create mode 100644 redux-app/src/store/reducers/index.js create mode 100644 redux-app/src/store/reducers/lista.js diff --git a/redux-app/package.json b/redux-app/package.json index afd2522..14802c7 100644 --- a/redux-app/package.json +++ b/redux-app/package.json @@ -10,7 +10,8 @@ "react-dom": "^16.13.1", "react-redux": "^7.2.0", "react-scripts": "3.4.1", - "redux": "^4.0.5" + "redux": "^4.0.5", + "redux-persist": "^6.0.0" }, "scripts": { "start": "react-scripts start", diff --git a/redux-app/src/components/Lista.js b/redux-app/src/components/Lista.js index e2fdcff..0bc4002 100644 --- a/redux-app/src/components/Lista.js +++ b/redux-app/src/components/Lista.js @@ -1,12 +1,45 @@ import React, { Component } from 'react' +import * as ListaActions from './store/actions/lista' +import { bindActionCreators } from "redux" +import { connect } from 'react-redux'; -export default class Lista extends Component { - constructor(props) { - super(props); - this.state = { } +class Lista extends Component { + state = { + newText: "" + }; + + handleSubmit = event => { + event.preventDefault(); + + this.props.addTodo(this.state.newTodoText); + + this.setState({ newText: "" }); + }; + + render() { + return ( +
+
+ this.setState({ newText: e.target.value })} + value={this.state.newText} + /> + +
+
    + {this.props.lista.map(item =>
  • {item.text}
    • )} +
+
+ ); } - - render() { - return (
Lista
); - } -} \ No newline at end of file + } + + const mapStateToProps = state => ({ + lista: state.lista + }); + + const mapDispatchToProps = dispatch => + bindActionCreators(ListaActions, dispatch); + + export default connect(mapStateToProps, mapDispatchToProps)(Lista); \ No newline at end of file diff --git a/redux-app/src/index.js b/redux-app/src/index.js index f5185c1..bb66769 100644 --- a/redux-app/src/index.js +++ b/redux-app/src/index.js @@ -2,16 +2,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import * as serviceWorker from './serviceWorker'; -ReactDOM.render( - - - , - document.getElementById('root') -); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); +ReactDOM.render(, document.getElementById("root")); \ No newline at end of file diff --git a/redux-app/src/store/actions/lista.js b/redux-app/src/store/actions/lista.js new file mode 100644 index 0000000..dc9ad53 --- /dev/null +++ b/redux-app/src/store/actions/lista.js @@ -0,0 +1,4 @@ +export const addLista = text => ({ + type: "ADD_LISTA", + payload: { text } + }); \ No newline at end of file diff --git a/redux-app/src/store/index.js b/redux-app/src/store/index.js index e69de29..3248961 100644 --- a/redux-app/src/store/index.js +++ b/redux-app/src/store/index.js @@ -0,0 +1,15 @@ +import { createStore } from "redux"; +import { persistStore, persistReducer } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; +import rootReducer from "./reducers"; + +const persistConfig = { + key: 'root', + storage +}; + +const persistedReducer = persistReducer(persistConfig, rootReducer); + +const store = createStore(persistedReducer); +const persistor = persistStore(store); +export default { store, persistor }; \ No newline at end of file diff --git a/redux-app/src/store/reducers/index.js b/redux-app/src/store/reducers/index.js new file mode 100644 index 0000000..e69de29 diff --git a/redux-app/src/store/reducers/lista.js b/redux-app/src/store/reducers/lista.js new file mode 100644 index 0000000..3e63bf0 --- /dev/null +++ b/redux-app/src/store/reducers/lista.js @@ -0,0 +1,8 @@ +export default function lista(state = [], action) { + switch (action.type) { + case "ADD_LISTA": + return [...state, { id: Math.random(), text: action.payload.text }]; + default: + return state; + } + } \ No newline at end of file From a5cbc692ddd2f01a04f2c2e1fc3de5c0bf71ce9d Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 14:11:35 +0200 Subject: [PATCH 04/11] added bootstrap --- redux-app/public/index.html | 1 + redux-app/src/App.js | 27 +++++++++++----- redux-app/src/components/Lista.js | 45 --------------------------- redux-app/src/index.js | 7 ++++- redux-app/src/logo.svg | 7 ----- redux-app/src/reducers/reducer.js | 10 ++++++ redux-app/src/store/actions/lista.js | 4 --- redux-app/src/store/index.js | 15 --------- redux-app/src/store/reducers/index.js | 0 redux-app/src/store/reducers/lista.js | 8 ----- 10 files changed, 37 insertions(+), 87 deletions(-) delete mode 100644 redux-app/src/components/Lista.js delete mode 100644 redux-app/src/logo.svg create mode 100644 redux-app/src/reducers/reducer.js delete mode 100644 redux-app/src/store/actions/lista.js delete mode 100644 redux-app/src/store/index.js delete mode 100644 redux-app/src/store/reducers/index.js delete mode 100644 redux-app/src/store/reducers/lista.js diff --git a/redux-app/public/index.html b/redux-app/public/index.html index aa069f2..0e25cd8 100644 --- a/redux-app/public/index.html +++ b/redux-app/public/index.html @@ -24,6 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App diff --git a/redux-app/src/App.js b/redux-app/src/App.js index 3bf7306..347d452 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -1,16 +1,29 @@ import React, { Component } from 'react'; import './App.css'; -import { Provider } from 'react-redux' -import { store } from './store' -import Lista from './components/Lista'; +import { connect } from 'react-redux'; -export default class App extends Component { +class App extends Component { render() { + + console.log(this.props) + return ( - - - +
+
+
+ Hola {this.props.minombre} +
+
+
); } } + +const mapStateToProps = (state) => { + return { + minombre: state.nombre + } +} + +export default connect(mapStateToProps)(App); diff --git a/redux-app/src/components/Lista.js b/redux-app/src/components/Lista.js deleted file mode 100644 index 0bc4002..0000000 --- a/redux-app/src/components/Lista.js +++ /dev/null @@ -1,45 +0,0 @@ -import React, { Component } from 'react' -import * as ListaActions from './store/actions/lista' -import { bindActionCreators } from "redux" -import { connect } from 'react-redux'; - -class Lista extends Component { - state = { - newText: "" - }; - - handleSubmit = event => { - event.preventDefault(); - - this.props.addTodo(this.state.newTodoText); - - this.setState({ newText: "" }); - }; - - render() { - return ( -
-
- this.setState({ newText: e.target.value })} - value={this.state.newText} - /> - -
-
    - {this.props.lista.map(item =>
  • {item.text}
    • )} -
-
- ); - } - } - - const mapStateToProps = state => ({ - lista: state.lista - }); - - const mapDispatchToProps = dispatch => - bindActionCreators(ListaActions, dispatch); - - export default connect(mapStateToProps, mapDispatchToProps)(Lista); \ No newline at end of file diff --git a/redux-app/src/index.js b/redux-app/src/index.js index bb66769..44d3d39 100644 --- a/redux-app/src/index.js +++ b/redux-app/src/index.js @@ -2,5 +2,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; +import { createStore } from 'redux' +import { Provider } from 'react-redux' +import reducer from './reducers/reducer'; + +const store = createStore(reducer); -ReactDOM.render(, document.getElementById("root")); \ No newline at end of file +ReactDOM.render( , document.getElementById("root")); \ No newline at end of file diff --git a/redux-app/src/logo.svg b/redux-app/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/redux-app/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/redux-app/src/reducers/reducer.js b/redux-app/src/reducers/reducer.js new file mode 100644 index 0000000..8c2f653 --- /dev/null +++ b/redux-app/src/reducers/reducer.js @@ -0,0 +1,10 @@ +const iState = { + nombre: "Ramon", + email: 'ramon.w.rocha@gmail.com' +} + +const reducer = (state=iState, action) => { + return state; +} + +export default reducer; \ No newline at end of file diff --git a/redux-app/src/store/actions/lista.js b/redux-app/src/store/actions/lista.js deleted file mode 100644 index dc9ad53..0000000 --- a/redux-app/src/store/actions/lista.js +++ /dev/null @@ -1,4 +0,0 @@ -export const addLista = text => ({ - type: "ADD_LISTA", - payload: { text } - }); \ No newline at end of file diff --git a/redux-app/src/store/index.js b/redux-app/src/store/index.js deleted file mode 100644 index 3248961..0000000 --- a/redux-app/src/store/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import { createStore } from "redux"; -import { persistStore, persistReducer } from 'redux-persist'; -import storage from 'redux-persist/lib/storage'; -import rootReducer from "./reducers"; - -const persistConfig = { - key: 'root', - storage -}; - -const persistedReducer = persistReducer(persistConfig, rootReducer); - -const store = createStore(persistedReducer); -const persistor = persistStore(store); -export default { store, persistor }; \ No newline at end of file diff --git a/redux-app/src/store/reducers/index.js b/redux-app/src/store/reducers/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/redux-app/src/store/reducers/lista.js b/redux-app/src/store/reducers/lista.js deleted file mode 100644 index 3e63bf0..0000000 --- a/redux-app/src/store/reducers/lista.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function lista(state = [], action) { - switch (action.type) { - case "ADD_LISTA": - return [...state, { id: Math.random(), text: action.payload.text }]; - default: - return state; - } - } \ No newline at end of file From 57a10806b6c9f768dfbd4ed9859364af85026ba0 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 16:49:34 +0200 Subject: [PATCH 05/11] store reducer --- redux-app/src/App.js | 20 ++------- redux-app/src/components/User.js | 67 +++++++++++++++++++++++++++++++ redux-app/src/index.js | 2 +- redux-app/src/reducers/reducer.js | 13 ++++-- 4 files changed, 82 insertions(+), 20 deletions(-) create mode 100644 redux-app/src/components/User.js diff --git a/redux-app/src/App.js b/redux-app/src/App.js index 347d452..44e2ef0 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -1,29 +1,17 @@ import React, { Component } from 'react'; import './App.css'; -import { connect } from 'react-redux'; +import User from './components/User'; -class App extends Component { +export default class App extends Component { render() { - - console.log(this.props) - return (
- Hola {this.props.minombre} +
); } - -} - -const mapStateToProps = (state) => { - return { - minombre: state.nombre - } -} - -export default connect(mapStateToProps)(App); +} \ No newline at end of file diff --git a/redux-app/src/components/User.js b/redux-app/src/components/User.js new file mode 100644 index 0000000..3c015c2 --- /dev/null +++ b/redux-app/src/components/User.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; + +class User extends Component { + constructor(props) { + super(props); + this.changeName = this.changeName.bind(this); + this.changeEmail = this.changeEmail.bind(this); + } + + changeName(e) { + this.props.changeName(e.target.value || "Ramon"); + } + + changeEmail(e) { + this.props.changeName(e.target.value || "ramon.w.rocha@gmail.com"); + } + + render() { + return ( +
+

Hola {this.props.myname}

+

{this.props.myemail}

+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ ); + } +} + +const mapStateToProps = (state) => { + return { + myname: state.nombre, + myemail: state.email + } +} + +const mapDispatchToProps = (dispatch) => { + return { + changeName: (nombre) => { + dispatch({ + type: "CHANGE_NAME", + payload: nombre + }) + }, + changeEmail: (email) => { + dispatch({ + type: "CHANGE_EMAIL", + payload: email + }) + } + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(User); \ No newline at end of file diff --git a/redux-app/src/index.js b/redux-app/src/index.js index 44d3d39..05510a2 100644 --- a/redux-app/src/index.js +++ b/redux-app/src/index.js @@ -6,6 +6,6 @@ import { createStore } from 'redux' import { Provider } from 'react-redux' import reducer from './reducers/reducer'; -const store = createStore(reducer); +const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); ReactDOM.render( , document.getElementById("root")); \ No newline at end of file diff --git a/redux-app/src/reducers/reducer.js b/redux-app/src/reducers/reducer.js index 8c2f653..a4b1394 100644 --- a/redux-app/src/reducers/reducer.js +++ b/redux-app/src/reducers/reducer.js @@ -1,9 +1,16 @@ -const iState = { - nombre: "Ramon", +const defectoState = { + nombre: "Ramon", email: 'ramon.w.rocha@gmail.com' } -const reducer = (state=iState, action) => { +const reducer = (state = defectoState, action) => { + if (action.type === "CHANGE_NAME") { + return { + ...state, + nombre: action.payload + } + } + return state; } From 451a70cc564f00b3ad509cf78875df6e563d5337 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 18:06:41 +0200 Subject: [PATCH 06/11] useSelector --- redux-app/src/App.js | 26 +++++++++++++++----------- redux-app/src/components/User.js | 26 +++++++++++--------------- redux-app/src/reducers/reducer.js | 7 +++++++ 3 files changed, 33 insertions(+), 26 deletions(-) diff --git a/redux-app/src/App.js b/redux-app/src/App.js index 44e2ef0..e7307ab 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -1,17 +1,21 @@ -import React, { Component } from 'react'; +import React from 'react'; import './App.css'; import User from './components/User'; +import { useSelector } from "react-redux"; -export default class App extends Component { - render() { - return ( -
-
-
- -
+export default function App() { + const store = useSelector(state => state); + + return ( +
+
+
+

Hola {store.nombre}

+

{store.email}

+
- ); - } +
+ ); + } \ No newline at end of file diff --git a/redux-app/src/components/User.js b/redux-app/src/components/User.js index 3c015c2..3e3b51a 100644 --- a/redux-app/src/components/User.js +++ b/redux-app/src/components/User.js @@ -13,26 +13,22 @@ class User extends Component { } changeEmail(e) { - this.props.changeName(e.target.value || "ramon.w.rocha@gmail.com"); + this.props.changeEmail(e.target.value || "ramon.w.rocha@gmail.com"); } render() { return ( -
-

Hola {this.props.myname}

-

{this.props.myemail}

-
-
-
- - -
+
+
+
+ +
-
-
- - -
+
+
+
+ +
diff --git a/redux-app/src/reducers/reducer.js b/redux-app/src/reducers/reducer.js index a4b1394..11de2e8 100644 --- a/redux-app/src/reducers/reducer.js +++ b/redux-app/src/reducers/reducer.js @@ -11,6 +11,13 @@ const reducer = (state = defectoState, action) => { } } + if (action.type === "CHANGE_EMAIL") { + return { + ...state, + email: action.payload + } + } + return state; } From aab84b49422a431f47a889e06d2c23e6012c4cf0 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sat, 4 Apr 2020 21:20:37 +0200 Subject: [PATCH 07/11] add table --- redux-app/src/App.js | 7 +++++ redux-app/src/actions/Action.js | 7 +++++ redux-app/src/components/Table.js | 29 +++++++++++++++++++ redux-app/src/components/User.js | 46 +++++++++++++++++++++---------- redux-app/src/reducers/reducer.js | 33 ++++++++++++++-------- 5 files changed, 96 insertions(+), 26 deletions(-) create mode 100644 redux-app/src/actions/Action.js create mode 100644 redux-app/src/components/Table.js diff --git a/redux-app/src/App.js b/redux-app/src/App.js index e7307ab..56393a8 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -2,6 +2,7 @@ import React from 'react'; import './App.css'; import User from './components/User'; import { useSelector } from "react-redux"; +import Table from './components/Table'; export default function App() { const store = useSelector(state => state); @@ -10,10 +11,16 @@ export default function App() {
+

Hola {store.nombre}

{store.email}

+
+
+ + + ); diff --git a/redux-app/src/actions/Action.js b/redux-app/src/actions/Action.js new file mode 100644 index 0000000..6d7b4ce --- /dev/null +++ b/redux-app/src/actions/Action.js @@ -0,0 +1,7 @@ +export const getAPI = (dispatch, data) => { + return new Promise(resolve => { + fetch('https://jsonplaceholder.typicode.com/posts') + .then(response => response.json()) + .then(json => resolve(json)) + }) +} \ No newline at end of file diff --git a/redux-app/src/components/Table.js b/redux-app/src/components/Table.js new file mode 100644 index 0000000..b42a0aa --- /dev/null +++ b/redux-app/src/components/Table.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; + +export default class Table extends Component { + render() { + return ( +
+ + + + + + + + + + { + this.props.data.map((item, i) => + + + + + + ) + } + +
#TitleBodyUserId
{item.id}{item.title}{item.body}{item.userId}
+ ); + } +} \ No newline at end of file diff --git a/redux-app/src/components/User.js b/redux-app/src/components/User.js index 3e3b51a..c14752e 100644 --- a/redux-app/src/components/User.js +++ b/redux-app/src/components/User.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; +import { getAPI } from '../actions/Action'; class User extends Component { constructor(props) { @@ -16,19 +17,27 @@ class User extends Component { this.props.changeEmail(e.target.value || "ramon.w.rocha@gmail.com"); } + changeList(arr) { + this.props.changeList(arr); + } + + componentDidMount() { + getAPI().then(item => this.changeList(item)); + } + render() { return (
- - + +
- - + +
@@ -36,28 +45,37 @@ class User extends Component { } } -const mapStateToProps = (state) => { - return { - myname: state.nombre, - myemail: state.email - } -} +// const mapStateToProps = (state) => { +// return { +// myname: state.nombre, +// myemail: state.email +// } +// } const mapDispatchToProps = (dispatch) => { return { changeName: (nombre) => { dispatch({ type: "CHANGE_NAME", - payload: nombre + payload: nombre, + key: 'nombre' }) }, changeEmail: (email) => { dispatch({ type: "CHANGE_EMAIL", - payload: email + payload: email, + key: 'email' }) - } + }, + changeList: (list) => { + dispatch({ + type: "CHANGE_LIST", + payload: list, + key: 'lista' + }) + }, } } -export default connect(mapStateToProps, mapDispatchToProps)(User); \ No newline at end of file +export default connect(null, mapDispatchToProps)(User); \ No newline at end of file diff --git a/redux-app/src/reducers/reducer.js b/redux-app/src/reducers/reducer.js index 11de2e8..7c17ad2 100644 --- a/redux-app/src/reducers/reducer.js +++ b/redux-app/src/reducers/reducer.js @@ -1,24 +1,33 @@ const defectoState = { nombre: "Ramon", - email: 'ramon.w.rocha@gmail.com' + email: 'ramon.w.rocha@gmail.com', + lista: [] } const reducer = (state = defectoState, action) => { - if (action.type === "CHANGE_NAME") { - return { - ...state, - nombre: action.payload - } + + debugger; + if (action.type === "@@INIT") { + return state; } - if (action.type === "CHANGE_EMAIL") { - return { - ...state, - email: action.payload - } + return { + ...state, + [action.key]: action.payload } - return state; + // if (action.type === "CHANGE_EMAIL") { + // return { + // ...state, + // email: action.payload + // } + // } + + // if (action.type === "CHANGE_LIST") { + // return { + // lista: action.payload + // } + // } } export default reducer; \ No newline at end of file From d60455e3ab626a2d6dec8d97fe44428e44cc96c5 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sun, 5 Apr 2020 00:49:38 +0200 Subject: [PATCH 08/11] CRUD --- redux-app/src/App.js | 26 +++-- redux-app/src/actions/Action.js | 46 ++++++++- redux-app/src/components/ProductForm.js | 127 ++++++++++++++++++++++++ redux-app/src/components/Table.js | 73 ++++++++++++-- redux-app/src/components/User.js | 45 ++++----- redux-app/src/reducers/reducer.js | 24 +---- 6 files changed, 277 insertions(+), 64 deletions(-) create mode 100644 redux-app/src/components/ProductForm.js diff --git a/redux-app/src/App.js b/redux-app/src/App.js index 56393a8..af2a817 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -3,21 +3,33 @@ import './App.css'; import User from './components/User'; import { useSelector } from "react-redux"; import Table from './components/Table'; +import ProductForm from './components/ProductForm'; export default function App() { const store = useSelector(state => state); + const swagger = "https://store-webapi.herokuapp.com/swagger-ui.html#/produto-controller"; - return ( + return (
- -

Hola {store.nombre}

-

{store.email}

- +
+
+

Hola {store.nombre}

+

{store.email}

+ +
+
+
+ +
+
-
-
+
+
+
+ Open API +
diff --git a/redux-app/src/actions/Action.js b/redux-app/src/actions/Action.js index 6d7b4ce..bd69c86 100644 --- a/redux-app/src/actions/Action.js +++ b/redux-app/src/actions/Action.js @@ -1,7 +1,49 @@ -export const getAPI = (dispatch, data) => { +//https://store-webapi.herokuapp.com/swagger-ui.html#/produto-controller + +const url = 'https://store-webapi.herokuapp.com/api/produto'; + +export const getAPI = () => { return new Promise(resolve => { - fetch('https://jsonplaceholder.typicode.com/posts') + fetch(url) .then(response => response.json()) .then(json => resolve(json)) }) +} + +export const postAPI = (data) => { + return new Promise(resolve => { + fetch(url, { + method: 'POST', + body: JSON.stringify(data), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + .then(response => response.json()) + .then(json => resolve(json)) + }) +} + +export const putAPI = (data) => { + return new Promise(resolve => { + fetch(url, { + method: 'PUT', + body: JSON.stringify(data), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + .then(response => response.json()) + .then(json => resolve(json)) + }) +} + +export const deleteAPI = (id) => { + return new Promise(resolve => { + fetch(`${url}/${id}`, { + method: 'DELETE' + }) + .then(response => response) + .then(json => resolve(json)) + }) } \ No newline at end of file diff --git a/redux-app/src/components/ProductForm.js b/redux-app/src/components/ProductForm.js new file mode 100644 index 0000000..447e96e --- /dev/null +++ b/redux-app/src/components/ProductForm.js @@ -0,0 +1,127 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { postAPI, getAPI, putAPI } from '../actions/Action'; + +class ProductForm extends Component { + constructor(props) { + super(props); + + this.state = { + id: 0, + descricao: '', + quantidade: 0, + valor: 0, + }; + } + + changeHandler = (event) => { + let nam = event.target.name; + let val = event.target.value; + this.props.model[nam] = val; + this.setState({ [nam]: val }); + } + + submitHandler = (event) => { + event.preventDefault(); + + if (!this.props.model.id) { + this.addProduct(); + } else { + this.update(); + } + + } + + addProduct() { + postAPI(this.state).then(item => { + this.clearForm(); + }) + } + + update() { + putAPI(this.props.model).then(item => { + this.clearForm(); + }); + } + + clearForm() { + this.props.changeModel({}); + this.setState({ + id: 0, + descricao: '', + quantidade: 0, + valor: 0, + }); + this.loadList(); + } + + loadList() { + getAPI().then(item => { + this.props.changeList(item); + }) + } + + render() { + return ( + + + + + + + + + + ); + } +} + +const mapStateToProps = (state) => { + return { + model: state.model + } +} + +const mapDispatchToProps = (dispatch) => { + return { + changeModel: (model) => { + dispatch({ + type: "CHANGE_MODEL", + payload: model, + key: 'model' + }) + }, + changeList: (list) => { + dispatch({ + type: "CHANGE_LIST", + payload: list, + key: 'lista' + }) + }, + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ProductForm); \ No newline at end of file diff --git a/redux-app/src/components/Table.js b/redux-app/src/components/Table.js index b42a0aa..f9588cf 100644 --- a/redux-app/src/components/Table.js +++ b/redux-app/src/components/Table.js @@ -1,15 +1,39 @@ import React, { Component } from 'react'; +import { deleteAPI, getAPI } from '../actions/Action'; +import { connect } from 'react-redux'; + +class Table extends Component { + + componentDidMount() { + this.loadList(); + } + + edit(model) { + this.props.changeModel(model); + } + + delete(id) { + deleteAPI(id).then(resp => { + if (resp.ok) { + this.loadList(); + } + }) + } + + loadList() { + getAPI().then(item => this.props.changeList(item)); + } -export default class Table extends Component { render() { return ( -
+
- - - + + + + @@ -17,13 +41,44 @@ export default class Table extends Component { this.props.data.map((item, i) => - - - + + + + ) }
#TitleBodyUserIdDescriptionQuantityPriceAction
{item.id}{item.title}{item.body}{item.userId}{item.descricao}{item.quantidade}{item.valor}
+ + +
); } -} \ No newline at end of file +} + +const mapStateToProps = (state) => { + return { + model: state.model + } +} + +const mapDispatchToProps = (dispatch) => { + return { + changeModel: (model) => { + dispatch({ + type: "CHANGE_MODEL", + payload: model, + key: 'model' + }) + }, + changeList: (list) => { + dispatch({ + type: "CHANGE_LIST", + payload: list, + key: 'lista' + }) + }, + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(Table); \ No newline at end of file diff --git a/redux-app/src/components/User.js b/redux-app/src/components/User.js index c14752e..46227af 100644 --- a/redux-app/src/components/User.js +++ b/redux-app/src/components/User.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { getAPI } from '../actions/Action'; class User extends Component { constructor(props) { @@ -17,29 +16,28 @@ class User extends Component { this.props.changeEmail(e.target.value || "ramon.w.rocha@gmail.com"); } - changeList(arr) { - this.props.changeList(arr); - } - - componentDidMount() { - getAPI().then(item => this.changeList(item)); - } - render() { return ( -
-
-
- - +
+
+
+
+ + +
-
-
-
- - +
+
+ + +
+
+

CRUD - PRODUTOS

+
+
+
); } @@ -67,14 +65,7 @@ const mapDispatchToProps = (dispatch) => { payload: email, key: 'email' }) - }, - changeList: (list) => { - dispatch({ - type: "CHANGE_LIST", - payload: list, - key: 'lista' - }) - }, + } } } diff --git a/redux-app/src/reducers/reducer.js b/redux-app/src/reducers/reducer.js index 7c17ad2..0ceb9ca 100644 --- a/redux-app/src/reducers/reducer.js +++ b/redux-app/src/reducers/reducer.js @@ -1,33 +1,19 @@ -const defectoState = { +const initState = { nombre: "Ramon", email: 'ramon.w.rocha@gmail.com', - lista: [] + lista: [], + model: {} } -const reducer = (state = defectoState, action) => { - - debugger; +const reducer = (state = initState, action) => { if (action.type === "@@INIT") { return state; } - + return { ...state, [action.key]: action.payload } - - // if (action.type === "CHANGE_EMAIL") { - // return { - // ...state, - // email: action.payload - // } - // } - - // if (action.type === "CHANGE_LIST") { - // return { - // lista: action.payload - // } - // } } export default reducer; \ No newline at end of file From 19afee6afafa3e3240c244da176bf4c7f05ff6b4 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sun, 5 Apr 2020 17:20:57 +0200 Subject: [PATCH 09/11] add modal --- redux-app/package.json | 4 + redux-app/src/components/ModalEdit.js | 107 ++++++++++++++++++++++++ redux-app/src/components/ProductForm.js | 44 ++++++---- redux-app/src/components/Table.js | 82 ++++++++++++------ 4 files changed, 192 insertions(+), 45 deletions(-) create mode 100644 redux-app/src/components/ModalEdit.js diff --git a/redux-app/package.json b/redux-app/package.json index 14802c7..6404d27 100644 --- a/redux-app/package.json +++ b/redux-app/package.json @@ -6,8 +6,12 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "bootstrap": "^4.4.1", + "keymirror": "^0.1.1", "react": "^16.13.1", + "react-bootstrap": "^1.0.0", "react-dom": "^16.13.1", + "react-modal": "^3.11.2", "react-redux": "^7.2.0", "react-scripts": "3.4.1", "redux": "^4.0.5", diff --git a/redux-app/src/components/ModalEdit.js b/redux-app/src/components/ModalEdit.js new file mode 100644 index 0000000..5851028 --- /dev/null +++ b/redux-app/src/components/ModalEdit.js @@ -0,0 +1,107 @@ +import React, { Component } from 'react'; +import { Modal, Row, Col, Form, Button } from 'react-bootstrap' +import { putAPI, getAPI } from '../actions/Action'; +import { connect } from 'react-redux'; + +class ModalEdit extends Component { + constructor(props) { + super(props); + this.state = {} + + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleSubmit = (event) => { + event.preventDefault(); + + let model = { + id: event.target.id.value, + descricao: event.target.descricao.value, + quantidade: event.target.descricao.value, + valor: event.target.valor.value + }; + + putAPI(model).then(item => { + this.loadList(); + }); + } + + loadList() { + getAPI().then(item => { + this.props.changeList(item); + }) + } + + render() { + return ( + + + Edit Product + + + +
+ + +
+ + Description + + + + + Description + + + + + Description + + + + + Description + + + + + + +
+ + +
+ + + + + ); + } +} + +const mapDispatchToProps = (dispatch) => { + return { + changeList: (list) => { + dispatch({ + type: "CHANGE_LIST", + payload: list, + key: 'lista' + }) + }, + } +} + +export default connect(null, mapDispatchToProps)(ModalEdit); \ No newline at end of file diff --git a/redux-app/src/components/ProductForm.js b/redux-app/src/components/ProductForm.js index 447e96e..ad269db 100644 --- a/redux-app/src/components/ProductForm.js +++ b/redux-app/src/components/ProductForm.js @@ -17,18 +17,22 @@ class ProductForm extends Component { changeHandler = (event) => { let nam = event.target.name; let val = event.target.value; - this.props.model[nam] = val; - this.setState({ [nam]: val }); + this.props.form[nam] = val; + //this.setState({ [nam]: val }); } submitHandler = (event) => { event.preventDefault(); - - if (!this.props.model.id) { - this.addProduct(); - } else { - this.update(); - } + + postAPI(event.target).then(item => { + this.clearForm(); + }) + + // if (!this.props.form.id) { + // this.addProduct(); + // } else { + // this.update(); + // } } @@ -39,7 +43,7 @@ class ProductForm extends Component { } update() { - putAPI(this.props.model).then(item => { + putAPI(this.props.form).then(item => { this.clearForm(); }); } @@ -69,39 +73,43 @@ class ProductForm extends Component { type='number' name='id' onChange={this.changeHandler} - value={this.props.model.id} + value={this.props.form.id} /> - +
+ + +
+ ); } } const mapStateToProps = (state) => { return { - model: state.model + form: state.model } } diff --git a/redux-app/src/components/Table.js b/redux-app/src/components/Table.js index f9588cf..41d489f 100644 --- a/redux-app/src/components/Table.js +++ b/redux-app/src/components/Table.js @@ -1,15 +1,24 @@ import React, { Component } from 'react'; import { deleteAPI, getAPI } from '../actions/Action'; import { connect } from 'react-redux'; +import { Button, ButtonToolbar } from 'react-bootstrap'; +import ModalEdit from './ModalEdit'; class Table extends Component { + constructor(props) { + super(props); + this.state = { props: [], openModal: false }; + } componentDidMount() { this.loadList(); } edit(model) { - this.props.changeModel(model); + + this.setState({ model: model }); + + //this.props.changeModel(model); } delete(id) { @@ -25,33 +34,52 @@ class Table extends Component { } render() { + const { descricao, id, valor, quantidade } = this.state; + let closeModal = () => this.setState({ openModal: false }); return ( - - - - - - - - - - - - { - this.props.data.map((item, i) => - - - - - - - ) - } - -
#DescriptionQuantityPriceAction
{item.id}{item.descricao}{item.quantidade}{item.valor}
- - -
+
+ + + + + + + + + + + + + + + + { + this.props.data.map((item, i) => + + + + + + + ) + } + +
#DescriptionQuantityPriceAction
{item.id}{item.descricao}{item.quantidade}{item.valor} + + + + + {/*
+ + + +
*/} +
+
); } } From e3fb95e62c21276910ff6b59a90232e48d8d811d Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sun, 5 Apr 2020 18:40:55 +0200 Subject: [PATCH 10/11] Modal Add & modal edit --- redux-app/src/App.js | 5 - redux-app/src/components/ModalAdd.js | 111 +++++++++++++++++++ redux-app/src/components/ModalEdit.js | 125 ++++++++++++---------- redux-app/src/components/ProductForm.js | 135 ------------------------ redux-app/src/components/Table.js | 55 ++++------ redux-app/src/components/User.js | 16 +-- 6 files changed, 201 insertions(+), 246 deletions(-) create mode 100644 redux-app/src/components/ModalAdd.js delete mode 100644 redux-app/src/components/ProductForm.js diff --git a/redux-app/src/App.js b/redux-app/src/App.js index af2a817..8f9c49d 100644 --- a/redux-app/src/App.js +++ b/redux-app/src/App.js @@ -3,7 +3,6 @@ import './App.css'; import User from './components/User'; import { useSelector } from "react-redux"; import Table from './components/Table'; -import ProductForm from './components/ProductForm'; export default function App() { const store = useSelector(state => state); @@ -19,10 +18,6 @@ export default function App() {

{store.email}

-
-
- -
diff --git a/redux-app/src/components/ModalAdd.js b/redux-app/src/components/ModalAdd.js new file mode 100644 index 0000000..19cece7 --- /dev/null +++ b/redux-app/src/components/ModalAdd.js @@ -0,0 +1,111 @@ +import React, { Component } from 'react'; +import { Modal, Row, Col, Form, Button } from 'react-bootstrap' +import { postAPI, getAPI } from '../actions/Action'; +import { connect } from 'react-redux'; + +class ModalAdd extends Component { + constructor(props) { + super(props); + this.state = {} + + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange = event => { + this.setState({ + [event.target.name]: event.target.value + }); + } + + handleSubmit = (event) => { + event.preventDefault(); + + postAPI(this.state).then(item => { + this.loadList(); + }); + } + + loadList() { + getAPI().then(item => { + this.props.changeList(item); + this.props.onHide(); + }) + } + + render() { + return ( + + + + Edit Product + + + +
+
+ + + + + Description + + + + + + + + Quantity + + + + + + + + Price + + + + + + + + + + + +
+ +
+ + + + + ); + } +} + +const mapDispatchToProps = (dispatch) => { + return { + changeList: (list) => { + dispatch({ + type: "CHANGE_LIST", + payload: list, + key: 'lista' + }) + }, + } +} + +export default connect(null, mapDispatchToProps)(ModalAdd); \ No newline at end of file diff --git a/redux-app/src/components/ModalEdit.js b/redux-app/src/components/ModalEdit.js index 5851028..8a5d225 100644 --- a/redux-app/src/components/ModalEdit.js +++ b/redux-app/src/components/ModalEdit.js @@ -17,7 +17,7 @@ class ModalEdit extends Component { let model = { id: event.target.id.value, descricao: event.target.descricao.value, - quantidade: event.target.descricao.value, + quantidade: event.target.quantidade.value, valor: event.target.valor.value }; @@ -29,66 +29,79 @@ class ModalEdit extends Component { loadList() { getAPI().then(item => { this.props.changeList(item); + this.props.onHide(); }) } render() { - return ( - - - Edit Product + return ( + + + + Edit Product - - -
- - -
- - Description - - - - - Description - - - - - Description - - - - - Description - - - - - - -
- - -
- - - - - ); + + +
+
+ + + + ID + + + + + + + + Description + + + + + + + + Quantity + + + + + + + + Price + + + + + + + + + + +
+ +
+ + + + + ); } } diff --git a/redux-app/src/components/ProductForm.js b/redux-app/src/components/ProductForm.js deleted file mode 100644 index ad269db..0000000 --- a/redux-app/src/components/ProductForm.js +++ /dev/null @@ -1,135 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { postAPI, getAPI, putAPI } from '../actions/Action'; - -class ProductForm extends Component { - constructor(props) { - super(props); - - this.state = { - id: 0, - descricao: '', - quantidade: 0, - valor: 0, - }; - } - - changeHandler = (event) => { - let nam = event.target.name; - let val = event.target.value; - this.props.form[nam] = val; - //this.setState({ [nam]: val }); - } - - submitHandler = (event) => { - event.preventDefault(); - - postAPI(event.target).then(item => { - this.clearForm(); - }) - - // if (!this.props.form.id) { - // this.addProduct(); - // } else { - // this.update(); - // } - - } - - addProduct() { - postAPI(this.state).then(item => { - this.clearForm(); - }) - } - - update() { - putAPI(this.props.form).then(item => { - this.clearForm(); - }); - } - - clearForm() { - this.props.changeModel({}); - this.setState({ - id: 0, - descricao: '', - quantidade: 0, - valor: 0, - }); - this.loadList(); - } - - loadList() { - getAPI().then(item => { - this.props.changeList(item); - }) - } - - render() { - return ( -
- - - - - - - -
- - -
- -
); - } -} - -const mapStateToProps = (state) => { - return { - form: state.model - } -} - -const mapDispatchToProps = (dispatch) => { - return { - changeModel: (model) => { - dispatch({ - type: "CHANGE_MODEL", - payload: model, - key: 'model' - }) - }, - changeList: (list) => { - dispatch({ - type: "CHANGE_LIST", - payload: list, - key: 'lista' - }) - }, - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(ProductForm); \ No newline at end of file diff --git a/redux-app/src/components/Table.js b/redux-app/src/components/Table.js index 41d489f..d0b8471 100644 --- a/redux-app/src/components/Table.js +++ b/redux-app/src/components/Table.js @@ -3,25 +3,23 @@ import { deleteAPI, getAPI } from '../actions/Action'; import { connect } from 'react-redux'; import { Button, ButtonToolbar } from 'react-bootstrap'; import ModalEdit from './ModalEdit'; +import ModalAdd from './ModalAdd'; class Table extends Component { constructor(props) { super(props); - this.state = { props: [], openModal: false }; + this.state = { openModalEdit: false, openModalAdd: false }; } componentDidMount() { this.loadList(); } - edit(model) { - - this.setState({ model: model }); - - //this.props.changeModel(model); - } - delete(id) { + if (!window.confirm("Delete?")) { + return; + } + deleteAPI(id).then(resp => { if (resp.ok) { this.loadList(); @@ -35,14 +33,15 @@ class Table extends Component { render() { const { descricao, id, valor, quantidade } = this.state; - let closeModal = () => this.setState({ openModal: false }); + let closeModalAdd = () => this.setState({ openModalAdd: false }); + let closeModalEdit = () => this.setState({ openModalEdit: false }); return (
- - + @@ -51,7 +50,7 @@ class Table extends Component { - + @@ -63,17 +62,14 @@ class Table extends Component { ) } @@ -84,21 +80,8 @@ class Table extends Component { } } -const mapStateToProps = (state) => { - return { - model: state.model - } -} - const mapDispatchToProps = (dispatch) => { return { - changeModel: (model) => { - dispatch({ - type: "CHANGE_MODEL", - payload: model, - key: 'model' - }) - }, changeList: (list) => { dispatch({ type: "CHANGE_LIST", @@ -109,4 +92,4 @@ const mapDispatchToProps = (dispatch) => { } } -export default connect(mapStateToProps, mapDispatchToProps)(Table); \ No newline at end of file +export default connect(null, mapDispatchToProps)(Table); \ No newline at end of file diff --git a/redux-app/src/components/User.js b/redux-app/src/components/User.js index 46227af..2b37469 100644 --- a/redux-app/src/components/User.js +++ b/redux-app/src/components/User.js @@ -18,7 +18,7 @@ class User extends Component { render() { return ( -
+ <>
@@ -33,23 +33,11 @@ class User extends Component {
-
-

CRUD - PRODUTOS

-
-
-
-
+ ); } } -// const mapStateToProps = (state) => { -// return { -// myname: state.nombre, -// myemail: state.email -// } -// } - const mapDispatchToProps = (dispatch) => { return { changeName: (nombre) => { From 499f1aae2edc4067950787f9e18a2063fe004e91 Mon Sep 17 00:00:00 2001 From: "ramon.w.rocha" Date: Sun, 5 Apr 2020 18:59:30 +0200 Subject: [PATCH 11/11] bug fix --- redux-app/package.json | 4 +--- redux-app/src/components/Table.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/redux-app/package.json b/redux-app/package.json index 6404d27..2de1f69 100644 --- a/redux-app/package.json +++ b/redux-app/package.json @@ -7,15 +7,13 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "bootstrap": "^4.4.1", - "keymirror": "^0.1.1", "react": "^16.13.1", "react-bootstrap": "^1.0.0", "react-dom": "^16.13.1", "react-modal": "^3.11.2", "react-redux": "^7.2.0", "react-scripts": "3.4.1", - "redux": "^4.0.5", - "redux-persist": "^6.0.0" + "redux": "^4.0.5" }, "scripts": { "start": "react-scripts start", diff --git a/redux-app/src/components/Table.js b/redux-app/src/components/Table.js index d0b8471..17530bd 100644 --- a/redux-app/src/components/Table.js +++ b/redux-app/src/components/Table.js @@ -63,7 +63,7 @@ class Table extends Component {
Description Quantity PriceActionActions
{item.quantidade} {item.valor} - - - - - {/*
- - - -
*/} + + + +
{item.valor} -