From 3012b1c22672bf04702d8d02a22ce30c2fd9bd77 Mon Sep 17 00:00:00 2001
From: Daniel Brain <daniel@brainblocks.io>
Date: Tue, 13 Oct 2020 23:34:58 -0700
Subject: [PATCH] Upgrade react in end-to-end example

---
 demo/advanced/react-end-to-end/index.htm |  51 ++++----
 demo/advanced/react-end-to-end/login.htm | 147 +++++++++++++----------
 demo/advanced/react-end-to-end/login.js  |   2 +-
 3 files changed, 107 insertions(+), 93 deletions(-)

diff --git a/demo/advanced/react-end-to-end/index.htm b/demo/advanced/react-end-to-end/index.htm
index e04e5ebf..ead8eac7 100644
--- a/demo/advanced/react-end-to-end/index.htm
+++ b/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('foo@bar.com');
 
-            getInitialState() {
-                return {
-                    prefilledEmail: 'foo@bar.com'
-                };
-            },
-
-            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'));
 
diff --git a/demo/advanced/react-end-to-end/login.htm b/demo/advanced/react-end-to-end/login.htm
index 8e2bef56..9a07d3af 100644
--- a/demo/advanced/react-end-to-end/login.htm
+++ b/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')
         );
 
diff --git a/demo/advanced/react-end-to-end/login.js b/demo/advanced/react-end-to-end/login.js
index 5145b956..0976e3b7 100644
--- a/demo/advanced/react-end-to-end/login.js
+++ b/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