yutsuo
6 years ago
11 changed files with 15532 additions and 0 deletions
@ -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* |
||||
@ -0,0 +1,35 @@
|
||||
{ |
||||
"name": "enhanced-reducer", |
||||
"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", |
||||
"bootstrap": "4.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" |
||||
] |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
||||
<meta name="theme-color" content="#000000" /> |
||||
<meta |
||||
name="description" |
||||
content="Web site created using create-react-app" |
||||
/> |
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> |
||||
<!-- |
||||
manifest.json provides metadata used when your web app is installed on a |
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ |
||||
--> |
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> |
||||
<!-- |
||||
Notice the use of %PUBLIC_URL% in the tags above. |
||||
It will be replaced with the URL of the `public` folder during the build. |
||||
Only files inside the `public` folder can be referenced from the HTML. |
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will |
||||
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`. |
||||
--> |
||||
<title>React App</title> |
||||
</head> |
||||
<body> |
||||
<noscript>You need to enable JavaScript to run this app.</noscript> |
||||
<div id="root"></div> |
||||
<!-- |
||||
This HTML file is a template. |
||||
If you open it directly in the browser, you will see an empty page. |
||||
|
||||
You can add webfonts, meta tags, or analytics to this file. |
||||
The build step will place the bundled scripts into the <body> tag. |
||||
|
||||
To begin the development, run `npm start` or `yarn start`. |
||||
To create a production bundle, use `npm run build` or `yarn build`. |
||||
--> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -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" |
||||
} |
||||
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html |
||||
User-agent: * |
||||
Disallow: |
||||
@ -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; |
||||
} |
||||
@ -0,0 +1,141 @@
|
||||
import * as React from "react"; |
||||
import { render } from "react-dom"; |
||||
import produce from "immer"; |
||||
import { set, has } from "lodash"; |
||||
import "bootstrap/dist/css/bootstrap.css"; |
||||
|
||||
function enhancedReducer(state, updateArg) { |
||||
// check if the type of update argument is a callback function
|
||||
if (updateArg.constructor === Function) { |
||||
return { ...state, ...updateArg(state) }; |
||||
} |
||||
|
||||
// if the type of update argument is an object
|
||||
if (updateArg.constructor === Object) { |
||||
// does the update object have _path and _value as it's keys
|
||||
// if yes then use them to update deep object values
|
||||
if (has(updateArg, "_path") && has(updateArg, "_value")) { |
||||
const { _path, _value } = updateArg; |
||||
|
||||
return produce(state, (draft) => { |
||||
set(draft, _path, _value); |
||||
}); |
||||
} else { |
||||
return { ...state, ...updateArg }; |
||||
} |
||||
} |
||||
} |
||||
|
||||
const initialState = { |
||||
firstName: "", |
||||
lastName: "", |
||||
address: { |
||||
addressLine1: "", |
||||
addressLine2: "", |
||||
pinCode: "", |
||||
}, |
||||
isMember: false, |
||||
}; |
||||
|
||||
function App() { |
||||
const [state, updateState] = React.useReducer(enhancedReducer, initialState); |
||||
|
||||
const updateForm = React.useCallback(({ target: { value, name, type } }) => { |
||||
const updatePath = name.split("."); |
||||
|
||||
// if the input is a checkbox then use callback function to update
|
||||
// the toggle state based on previous state
|
||||
if (type === "checkbox") { |
||||
updateState((prevState) => ({ |
||||
[name]: !prevState[name], |
||||
})); |
||||
|
||||
return; |
||||
} |
||||
|
||||
// if we have to update the root level nodes in the form
|
||||
if (updatePath.length === 1) { |
||||
const [key] = updatePath; |
||||
|
||||
updateState({ |
||||
[key]: value, |
||||
}); |
||||
} |
||||
|
||||
// if we have to update nested nodes in the form object
|
||||
// use _path and _value to update them.
|
||||
if (updatePath.length === 2) { |
||||
updateState({ |
||||
_path: updatePath, |
||||
_value: value, |
||||
}); |
||||
} |
||||
}, []); |
||||
|
||||
return ( |
||||
<div className="App"> |
||||
<h1>Hello, i'm your supposedly complex form.</h1> |
||||
<input |
||||
className="form-control" |
||||
type="text" |
||||
name="firstName" |
||||
placeholder="First Name" |
||||
onChange={updateForm} |
||||
value={state.firstName} |
||||
/> |
||||
<br /> |
||||
<input |
||||
className="form-control" |
||||
type="text" |
||||
name="lastName" |
||||
placeholder="Last Name" |
||||
onChange={updateForm} |
||||
value={state.lastName} |
||||
/> |
||||
<br /> |
||||
<input |
||||
className="form-control" |
||||
type="text" |
||||
name="address.addressLine1" |
||||
placeholder="Address Line One" |
||||
onChange={updateForm} |
||||
value={state.address.addressLine1} |
||||
/> |
||||
<br /> |
||||
<input |
||||
className="form-control" |
||||
type="text" |
||||
name="address.addressLine2" |
||||
placeholder="Address Line Two" |
||||
onChange={updateForm} |
||||
value={state.address.addressLine2} |
||||
/> |
||||
<br /> |
||||
<input |
||||
className="form-control" |
||||
type="text" |
||||
name="address.pinCode" |
||||
placeholder="Pincode" |
||||
onChange={updateForm} |
||||
value={state.address.pinCode} |
||||
/> |
||||
<br /> |
||||
<div className="form-check"> |
||||
<input |
||||
className="form-check-input" |
||||
type="checkbox" |
||||
name="isMember" |
||||
onChange={updateForm} |
||||
checked={state.isMember} |
||||
id="exampleCheck1" |
||||
/> |
||||
<label className="form-check-label" htmlFor="exampleCheck1"> |
||||
Are you a member already? |
||||
</label> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const rootElement = document.getElementById("root"); |
||||
render(<App />, rootElement); |
||||
Loading…
Reference in new issue