Upgrade react in end-to-end example

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

@@ -4,8 +4,8 @@
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
  <link rel="stylesheet" href="../../common/index.css" />
 
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
  <script src="../../../dist/zoid.frameworks.js"></script>
@@ -17,38 +17,33 @@
 
  <script type="text/babel">
 
- let MyLoginReactZoidComponent = MyLoginZoidComponent.driver('react', {
+ let LoginZoidReactComponent = LoginZoidComponent.driver('react', {
  React: window.React,
  ReactDOM: window.ReactDOM
  });
 
- let App = React.createClass({
+ function App() {
+ const [ loggedIn, setLoggedIn ] = React.useState(false);
+ const [ email, setEmail ] = React.useState('[email protected]');
 
- getInitialState() {
- return {
- prefilledEmail: '[email protected]'
- };
- },
-
- render() {
-
- let onLogin = (email) =>
- this.setState({ email, loggedIn: true });
-
- return (
- <div>
- <h3>Log in on xyz.com</h3>
-
- { this.state.loggedIn
-
- ? <p>User logged in with email: { this.state.email }</p>
-
- : <MyLoginReactZoidComponent prefilledEmail={ this.state.prefilledEmail } onLogin={ onLogin } />
- }
- </div>
- );
+ let onLogin = (email) => {
+ setEmail(email);
+ setLoggedIn(true);
  }
- });
+
+ return (
+ <div>
+ <h3>Log in on xyz.com</h3>
+
+ { loggedIn
+ ? <p>User logged in with email: { email }</p>
+ : <LoginZoidReactComponent
+ prefilledEmail={ email }
+ onLogin={ onLogin } />
+ }
+ </div>
+ );
+ }
 
  ReactDOM.render(<App />, document.querySelector('#container'));
 

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

@@ -3,8 +3,8 @@
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
  <link rel="stylesheet" href="../../common/login.css" />
 
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
  <script src="../../../dist/zoid.frameworks.js"></script>
@@ -16,70 +16,89 @@
 
  <script type="text/babel">
 
- let MyLoginComponent = React.createClass({
-
- getInitialState() {
- return { displayForm: true, displaySpinner: false, email: this.props.prefilledEmail };
- },
-
- render() {
-
- let login = () => {
- this.setState({ displayForm: false, displaySpinner: true });
-
- setTimeout(() => {
- this.setState({ displaySpinner: false });
- this.props.onLogin(this.state.email);
- }, 2000);
- };
-
- return (
- <form>
- {
- this.state.displayForm && <div>
-
- <input
- placeholder='email'
- defaultValue={ this.state.email }
- onChange={
- event => this.setState({ email: event.target.value })
- }>
- </input>
-
- <br/>
-
- <input
- placeholder='password' type='password'
- onChange={
- event => this.setState({ password: event.target.value })
- }>
- </input>
-
- <br/>
-
- <button
- className='btn btn-primary'
- onClick={ login }>
- Log In
- </button>
-
- </div>
- }
-
- {
- this.state.displaySpinner && <div>
- <svg id='spinner' className='spinner' width='65px' height='65px' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'>
- <circle className='path' fill='none' strokeWidth='6' strokeLinecap='round' cx='33' cy='33' r='30'></circle>
- </svg>
- </div>
- }
- </form>
- );
- }
- });
+ function Login({ onLogin, prefilledEmail }) {
+ let [ email, setEmail ] = React.useState(prefilledEmail);
+ let [ password, setPassword ] = React.useState('');
+ let [ displaySpinner, setDisplaySpinner ] = React.useState(false);
+
+ let login = () => {
+ setDisplaySpinner(true)
+
+ setTimeout(() => {
+ onLogin(email);
+ }, 2000);
+ };
+
+ return (
+ <form>
+ {
+ displaySpinner
+ ? (
+ <div>
+ <svg id='spinner' className='spinner' width='65px' height='65px' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'>
+ <circle className='path' fill='none' strokeWidth='6' strokeLinecap='round' cx='33' cy='33' r='30'></circle>
+ </svg>
+ </div>
+ )
+ : (
+ <div>
+
+ <input
+ placeholder='email'
+ value={ email }
+ onChange={
+ event => setEmail(event.target.value)
+ }>
+ </input>
+
+ <br/>
+
+ <input
+ placeholder='password' type='password'
+ value={ password }
+ onChange={
+ event => setPassword(event.target.value)
+ }>
+ </input>
+
+ <br/>
+
+ <button
+ className='btn btn-primary'
+ onClick={ login }>
+ Log In
+ </button>
+
+ </div>
+ )
+ }
+ </form>
+ );
+ }
+
+ function useXProps() {
+ const [ xprops, setXProps ] = React.useState(window.xprops);
+ React.useEffect(() => {
+ window.xprops.onProps(props => {
+ setXProps({ ...props })
+ });
+ }, []);
+ return xprops;
+ }
+
+ function App() {
+ const { prefilledEmail, onLogin } = useXProps();
+
+ return (
+ <Login
+ prefilledEmail={ prefilledEmail }
+ onLogin={ onLogin }
+ />
+ );
+ }
 
  ReactDOM.render(
- <MyLoginComponent { ...window.xprops } />,
+ <App />,
  document.querySelector('#container')
  );
 

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

@@ -1,5 +1,5 @@
 
-window.MyLoginZoidComponent = zoid.create({
+window.LoginZoidComponent = zoid.create({
 
  // The html tag used to render my component