add react skeleton that updates based on cookies

PledgeTracker.class.php

@@ -63,7 +63,7 @@ class PledgeTracker
 
     public function getPledgeForm()
     {
-        wp_enqueue_script('pledge-tracker', plugin_dir_url(__FILE__) . 'bundle.js');
+        wp_enqueue_script('pledge-tracker', plugin_dir_url(__FILE__) . 'bundle.js', [], 1, true);
         ob_start();
         $options = $this->settingsPage->getAllOptions();
         ?>

js/sign-up.js

-document.addEventListener('DOMContentLoaded', ()=> {console.log('loaded')})
\ No newline at end of file

src/components/app.js

+import React from 'react'
+
+import * as cookies from '../cookies'
+import SignUp from './sign-up'
+import EmailMp from './email-mp'
+import Thanks from './thanks'
+
+class App extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = { cookies: cookies.getAll() }
+  }
+
+  updateCookie (key, value) {
+    cookies.set(key, value)
+    this.setState({ cookies: cookies.getAll() })
+  }
+
+  render () {
+    const { postcode, hasEmailedMp } = this.state.cookies
+    const updateCookie = this.updateCookie.bind(this)
+
+    if (!postcode) {
+      return <SignUp updateCookie={updateCookie} />
+    }
+
+    if (!hasEmailedMp) {
+      return <EmailMp updateCookie={updateCookie} />
+    }
+
+    return <Thanks />
+  }
+}
+
+export default App

src/components/email-mp.js

+import React from 'react'
+
+export default () => (
+  <h1>Email MP</h1>
+)

src/components/sign-up.js

+import React from 'react'
+
+export default ({ updateCookie }) => {
+  const signUp = (e) => {
+    e.preventDefault()
+    updateCookie('postcode', 'test')
+  }
+
+  return (
+    <div className='container'>
+      <h1>{window.__config.ol_pt_sign_up_page_intro_headline}</h1>
+      <p>{window.__config.ol_pt_sign_up_page_intro_copy}</p>
+      <form id='pledge_tracker_signup_form' onSubmit={signUp}>
+        <div className='form-row p-2'>
+          <div className='col'>
+            <input
+              type='email' name='email' className='form-control col' aria-label='Enter your email address'
+              placeholder='Enter email' required
+            />
+          </div>
+        </div>
+
+        <div className='form-row p-2'>
+          <div className='col'>
+            <input
+              type='text' name='postcode' className='form-control' aria-label='Enter your postcode'
+              placeholder='Postcode' required
+            />
+          </div>
+          <div className='col-xs-3'>
+            <button type='submit' className='btn btn-primary'>{window.__config.ol_pt_sign_up_page_button_text}</button>
+          </div>
+        </div>
+
+        <div className='form-row p-2'>
+          <button type='button' className='btn btn-link'>{window.__config.ol_pt_sign_up_page_skip_text}</button>
+          <a href={window.__config.ol_pt_sign_up_page_privacy_url} className='btn btn-link'>Privacy policy</a>
+        </div>
+
+      </form>
+    </div>
+  )
+}

src/components/thanks.js

+import React from 'react'
+
+export default () => (
+  <h1>Thanks</h1>
+)

src/cookies.js

+export const getAll = () => {
+  const cookies = {}
+  const encodedCookies = document.cookie.split('; ')
+  for (const cookie of encodedCookies) {
+    const [key, value] = cookie.split('=')
+    cookies[key] = decodeURIComponent(value)
+  }
+  return cookies
+}
+
+export const get = (key) => {
+  return getAll()[key]
+}
+
+export const set = (key, value) => {
+  document.cookie = `${key}=${encodeURIComponent(value)}`
+}

src/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
 
-const title = 'React with Webpack and Babel'
+import App from './components/app'
+
 ReactDOM.render(
-  <div>{title}</div>,
+  <App />,
   document.getElementById('pledge-tracker')
 )

templates/email_mp.php

-<h1>Ask your MP to pledge</h1>

templates/pleged.php

-<h1>Your MP already pledges</h1>

templates/sign_up.php

-<div class="container">
-    <h1><?= get_option('intro_headline')?></h1>
-    <p><?= get_option('intro_copy')?></p>
-    <form id="pledge_tracker_signup_form" method='post' action='' data-url="<?=admin_url('admin-ajax.php');?>">
-        <div class="form-row p-2">
-            <div class="col">
-                <input type="email" name="email" class="form-control col" aria-label="Enter your email address" placeholder="Enter email" required>
-            </div>
-        </div>
-
-        <div class="form-row p-2">
-            <div class="col">
-                <input type="text" name="postcode" class="form-control" aria-label="Enter your postcode" placeholder="Postcode" required>
-            </div>
-            <div class="col-xs-3">
-                <button type="submit" class="btn btn-primary"><?= get_option('button_text')?></button>
-            </div>
-        </div>
-
-        <div class="form-row p-2">
-            <button type="button" class="btn btn-link"><?= get_option('skip_text')?></button>
-            <a href="<?= get_option('privacy_url')?>" class="btn btn-link">Privacy policy</a>
-        </div>
-
-    </form>
-</div>
-<script>
-    document.querySelector("#pledge_tracker_signup_form").addEventListener("submit", function(e) {
-        e.preventDefault();
-
-        let email = document.querySelector("#pledge_tracker_signup_form [name='email']").value
-        let postcode = document.querySelector("#pledge_tracker_signup_form [name='postcode']").value
-        document.cookie =  "email=" + email;
-        document.cookie =  "postcode=" + postcode;
-    });
-</script>

templates/thanks.php

-<h1>Thanks for emailing your MP</h1>