Skip to content

Commit 1d83c5e

Browse files
haruelrovixharuelrovix
committed
Handle form submission and pass it to second screen
1 parent 27a7867 commit 1d83c5e

File tree

4 files changed

+97
-32
lines changed

4 files changed

+97
-32
lines changed

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"extract-text-webpack-plugin": "3.0.2",
4141
"fetch-hoc": "^0.5.0",
4242
"file-loader": "1.1.5",
43+
"formik": "^1.4.0",
4344
"fs-extra": "3.0.1",
4445
"html-webpack-plugin": "2.29.0",
4546
"object-assign": "4.1.1",

Diff for: ‎src/Components/Commit/CommitList.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import fetch from 'fetch-hoc';
66

77
import styles from '../Shared.style';
88
import withHeader from '../../HOCs/withHeader';
9+
import { withRouter } from '../../Utils/Routing';
910

1011
const containerStyle = {
1112
alignItems: 'flex-start',
@@ -65,5 +66,8 @@ class CommitList extends React.PureComponent {
6566

6667
export default compose(
6768
withHeader({ title: 'Commits' }),
68-
fetch('https://api.github.com/repos/react-native-training/react-native-elements/commits')
69+
withRouter,
70+
fetch(({ location: { state = {} } }) => (
71+
`https://api.github.com/repos/${state.owner}/${state.repo}/commits`
72+
))
6973
)(CommitList);

Diff for: ‎src/Components/Home.js

+40-28
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,57 @@
11
import React, { PureComponent } from 'react';
22
import { View } from 'react-native';
33
import { Input, Button } from 'react-native-elements';
4+
import { Formik } from 'formik';
45

56
import styles from './Shared.style';
67
import { withRouter } from '../Utils/Routing';
78

89
class Home extends PureComponent {
9-
onPressButton = () => {
10-
// Go to Commit screen
11-
this.props.history.push('/commit');
10+
onPressButton = ({ owner, repo }) => {
11+
// Go to Commit screen and send params
12+
this.props.history.push({
13+
pathname: '/commit',
14+
state: { owner, repo }
15+
});
1216
}
1317

1418
render() {
1519
const { input, button } = styles;
1620

1721
return (
18-
<View style={styles.container}>
19-
<Input
20-
containerStyle={input.containerStyle}
21-
inputStyle={input.inputStyle}
22-
label='Owner'
23-
placeholder="Github's owner"
24-
/>
25-
<Input
26-
containerStyle={input.containerStyle}
27-
inputStyle={input.inputStyle}
28-
label='Repo'
29-
placeholder="Github's repository name"
30-
/>
31-
<Button
32-
title='SUBMIT'
33-
icon={{
34-
color: 'white',
35-
name: 'paper-plane',
36-
size: 15,
37-
type: 'font-awesome'
38-
}}
39-
buttonStyle={button.containerStyle}
40-
onPress={this.onPressButton}
41-
/>
42-
</View>
22+
<Formik initialValues={{ owner: '', repo: '' }} onSubmit={this.onPressButton}>
23+
{({ handleChange, handleSubmit, values }) => (
24+
<View style={styles.container}>
25+
<Input
26+
containerStyle={input.containerStyle}
27+
inputStyle={input.inputStyle}
28+
label='Owner'
29+
onChangeText={handleChange('owner')}
30+
placeholder="Github's owner"
31+
value={values.owner}
32+
/>
33+
<Input
34+
containerStyle={input.containerStyle}
35+
inputStyle={input.inputStyle}
36+
label='Repo'
37+
onChangeText={handleChange('repo')}
38+
placeholder="Github's repository name"
39+
value={values.repo}
40+
/>
41+
<Button
42+
title='SUBMIT'
43+
icon={{
44+
color: 'white',
45+
name: 'paper-plane',
46+
size: 15,
47+
type: 'font-awesome'
48+
}}
49+
buttonStyle={button.containerStyle}
50+
onPress={handleSubmit}
51+
/>
52+
</View>
53+
)}
54+
</Formik>
4355
);
4456
}
4557
}

Diff for: ‎yarn.lock

+51-3
Original file line numberDiff line numberDiff line change
@@ -2460,6 +2460,14 @@ create-react-class@^15.6.2, create-react-class@^15.6.3:
24602460
loose-envify "^1.3.1"
24612461
object-assign "^4.1.1"
24622462

2463+
create-react-context@^0.2.2:
2464+
version "0.2.3"
2465+
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
2466+
integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
2467+
dependencies:
2468+
fbjs "^0.8.0"
2469+
gud "^1.0.0"
2470+
24632471
cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0:
24642472
version "5.1.0"
24652473
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2673,6 +2681,11 @@ deep-is@~0.1.3:
26732681
version "0.1.3"
26742682
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
26752683

2684+
deepmerge@^2.1.1:
2685+
version "2.2.1"
2686+
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
2687+
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
2688+
26762689
default-require-extensions@^2.0.0:
26772690
version "2.0.0"
26782691
resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
@@ -3543,7 +3556,7 @@ fbjs-scripts@^0.8.1:
35433556
semver "^5.1.0"
35443557
through2 "^2.0.0"
35453558

3546-
fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
3559+
fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
35473560
version "0.8.17"
35483561
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
35493562
dependencies:
@@ -3719,6 +3732,21 @@ form-data@~2.3.1:
37193732
combined-stream "1.0.6"
37203733
mime-types "^2.1.12"
37213734

3735+
formik@^1.4.0:
3736+
version "1.4.0"
3737+
resolved "https://registry.yarnpkg.com/formik/-/formik-1.4.0.tgz#4261769f765dd41b7e791958fde7a08516d5920a"
3738+
integrity sha512-HOlb4cEgjTZ+5VMCYDlXt1r5Bt9wLhIH6uvJCAhJaIvqehmIM1RdzhYel8tCFPXzCcCx8QeZh3UcWKye5rsJmw==
3739+
dependencies:
3740+
create-react-context "^0.2.2"
3741+
deepmerge "^2.1.1"
3742+
hoist-non-react-statics "^2.5.5"
3743+
lodash "^4.17.11"
3744+
lodash-es "^4.17.11"
3745+
prop-types "^15.6.1"
3746+
react-fast-compare "^2.0.1"
3747+
tslib "^1.9.3"
3748+
warning "^3.0.0"
3749+
37223750
forwarded@~0.1.2:
37233751
version "0.1.2"
37243752
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -3944,6 +3972,11 @@ growly@^1.3.0:
39443972
version "1.3.0"
39453973
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
39463974

3975+
gud@^1.0.0:
3976+
version "1.0.0"
3977+
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
3978+
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
3979+
39473980
gzip-size@3.0.0:
39483981
version "3.0.0"
39493982
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
@@ -4067,7 +4100,7 @@ hmac-drbg@^1.0.0:
40674100
minimalistic-assert "^1.0.0"
40684101
minimalistic-crypto-utils "^1.0.1"
40694102

4070-
hoist-non-react-statics@^2.5.0:
4103+
hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.5:
40714104
version "2.5.5"
40724105
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
40734106
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
@@ -5330,6 +5363,11 @@ locate-path@^2.0.0:
53305363
p-locate "^2.0.0"
53315364
path-exists "^3.0.0"
53325365

5366+
lodash-es@^4.17.11:
5367+
version "4.17.11"
5368+
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
5369+
integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
5370+
53335371
lodash._reinterpolate@~3.0.0:
53345372
version "3.0.0"
53355373
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -5421,7 +5459,7 @@ lodash@^3.5.0:
54215459
version "3.10.1"
54225460
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
54235461

5424-
lodash@^4.0.0:
5462+
lodash@^4.0.0, lodash@^4.17.11:
54255463
version "4.17.11"
54265464
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
54275465
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -7039,6 +7077,11 @@ react-error-overlay@^4.0.0:
70397077
version "4.0.0"
70407078
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
70417079

7080+
react-fast-compare@^2.0.1:
7081+
version "2.0.4"
7082+
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
7083+
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
7084+
70427085
react-is@^16.3.1:
70437086
version "16.4.1"
70447087
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
@@ -8331,6 +8374,11 @@ trim-right@^1.0.1:
83318374
version "1.0.1"
83328375
resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
83338376

8377+
tslib@^1.9.3:
8378+
version "1.9.3"
8379+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
8380+
integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
8381+
83348382
tty-browserify@0.0.0:
83358383
version "0.0.0"
83368384
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"

0 commit comments

Comments
 (0)