Skip to content

Commit 3012b1c

Browse files
author
Daniel Brain
committed
Upgrade react in end-to-end example
1 parent 8b3208f commit 3012b1c

File tree

3 files changed

+107
-93
lines changed

3 files changed

+107
-93
lines changed

‎demo/advanced/react-end-to-end/index.htm

+23-28
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
55
<link rel="stylesheet" href="../../common/index.css" />
66

7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
99
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
1010

1111
<script src="../../../dist/zoid.frameworks.js"></script>
@@ -17,38 +17,33 @@
1717

1818
<script type="text/babel">
1919

20-
let MyLoginReactZoidComponent = MyLoginZoidComponent.driver('react', {
20+
let LoginZoidReactComponent = LoginZoidComponent.driver('react', {
2121
React: window.React,
2222
ReactDOM: window.ReactDOM
2323
});
2424

25-
let App = React.createClass({
25+
function App() {
26+
const [ loggedIn, setLoggedIn ] = React.useState(false);
27+
const [ email, setEmail ] = React.useState('[email protected]');
2628

27-
getInitialState() {
28-
return {
29-
prefilledEmail: '[email protected]'
30-
};
31-
},
32-
33-
render() {
34-
35-
let onLogin = (email) =>
36-
this.setState({ email, loggedIn: true });
37-
38-
return (
39-
<div>
40-
<h3>Log in on xyz.com</h3>
41-
42-
{ this.state.loggedIn
43-
44-
? <p>User logged in with email: { this.state.email }</p>
45-
46-
: <MyLoginReactZoidComponent prefilledEmail={ this.state.prefilledEmail } onLogin={ onLogin } />
47-
}
48-
</div>
49-
);
29+
let onLogin = (email) => {
30+
setEmail(email);
31+
setLoggedIn(true);
5032
}
51-
});
33+
34+
return (
35+
<div>
36+
<h3>Log in on xyz.com</h3>
37+
38+
{ loggedIn
39+
? <p>User logged in with email: { email }</p>
40+
: <LoginZoidReactComponent
41+
prefilledEmail={ email }
42+
onLogin={ onLogin } />
43+
}
44+
</div>
45+
);
46+
}
5247

5348
ReactDOM.render(<App />, document.querySelector('#container'));
5449

‎demo/advanced/react-end-to-end/login.htm

+83-64
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
44
<link rel="stylesheet" href="../../common/login.css" />
55

6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
88
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
99

1010
<script src="../../../dist/zoid.frameworks.js"></script>
@@ -16,70 +16,89 @@
1616

1717
<script type="text/babel">
1818

19-
let MyLoginComponent = React.createClass({
20-
21-
getInitialState() {
22-
return { displayForm: true, displaySpinner: false, email: this.props.prefilledEmail };
23-
},
24-
25-
render() {
26-
27-
let login = () => {
28-
this.setState({ displayForm: false, displaySpinner: true });
29-
30-
setTimeout(() => {
31-
this.setState({ displaySpinner: false });
32-
this.props.onLogin(this.state.email);
33-
}, 2000);
34-
};
35-
36-
return (
37-
<form>
38-
{
39-
this.state.displayForm && <div>
40-
41-
<input
42-
placeholder='email'
43-
defaultValue={ this.state.email }
44-
onChange={
45-
event => this.setState({ email: event.target.value })
46-
}>
47-
</input>
48-
49-
<br/>
50-
51-
<input
52-
placeholder='password' type='password'
53-
onChange={
54-
event => this.setState({ password: event.target.value })
55-
}>
56-
</input>
57-
58-
<br/>
59-
60-
<button
61-
className='btn btn-primary'
62-
onClick={ login }>
63-
Log In
64-
</button>
65-
66-
</div>
67-
}
68-
69-
{
70-
this.state.displaySpinner && <div>
71-
<svg id='spinner' className='spinner' width='65px' height='65px' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'>
72-
<circle className='path' fill='none' strokeWidth='6' strokeLinecap='round' cx='33' cy='33' r='30'></circle>
73-
</svg>
74-
</div>
75-
}
76-
</form>
77-
);
78-
}
79-
});
19+
function Login({ onLogin, prefilledEmail }) {
20+
let [ email, setEmail ] = React.useState(prefilledEmail);
21+
let [ password, setPassword ] = React.useState('');
22+
let [ displaySpinner, setDisplaySpinner ] = React.useState(false);
23+
24+
let login = () => {
25+
setDisplaySpinner(true)
26+
27+
setTimeout(() => {
28+
onLogin(email);
29+
}, 2000);
30+
};
31+
32+
return (
33+
<form>
34+
{
35+
displaySpinner
36+
? (
37+
<div>
38+
<svg id='spinner' className='spinner' width='65px' height='65px' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'>
39+
<circle className='path' fill='none' strokeWidth='6' strokeLinecap='round' cx='33' cy='33' r='30'></circle>
40+
</svg>
41+
</div>
42+
)
43+
: (
44+
<div>
45+
46+
<input
47+
placeholder='email'
48+
value={ email }
49+
onChange={
50+
event => setEmail(event.target.value)
51+
}>
52+
</input>
53+
54+
<br/>
55+
56+
<input
57+
placeholder='password' type='password'
58+
value={ password }
59+
onChange={
60+
event => setPassword(event.target.value)
61+
}>
62+
</input>
63+
64+
<br/>
65+
66+
<button
67+
className='btn btn-primary'
68+
onClick={ login }>
69+
Log In
70+
</button>
71+
72+
</div>
73+
)
74+
}
75+
</form>
76+
);
77+
}
78+
79+
function useXProps() {
80+
const [ xprops, setXProps ] = React.useState(window.xprops);
81+
React.useEffect(() => {
82+
window.xprops.onProps(props => {
83+
setXProps({ ...props })
84+
});
85+
}, []);
86+
return xprops;
87+
}
88+
89+
function App() {
90+
const { prefilledEmail, onLogin } = useXProps();
91+
92+
return (
93+
<Login
94+
prefilledEmail={ prefilledEmail }
95+
onLogin={ onLogin }
96+
/>
97+
);
98+
}
8099

81100
ReactDOM.render(
82-
<MyLoginComponent { ...window.xprops } />,
101+
<App />,
83102
document.querySelector('#container')
84103
);
85104

‎demo/advanced/react-end-to-end/login.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
window.MyLoginZoidComponent = zoid.create({
2+
window.LoginZoidComponent = zoid.create({
33

44
// The html tag used to render my component
55

0 commit comments

Comments
 (0)