Merge pull request #2 from ReactTraining/master

update with upstream master

subjects/02-Components/exercise.js

@@ -10,7 +10,7 @@
 //
 // - Add descriptive propTypes to <App> and <Tabs>
 ////////////////////////////////////////////////////////////////////////////////
-import React from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom";
 
 const styles = {};
@@ -49,11 +49,11 @@ function Tabs() {
   );
 }
 
-function App() {
+function App({ sports }) {
   return (
     <div>
       <h1>Sports</h1>
-      <Tabs data={this.props.sports} />
+      <Tabs data={sports} />
     </div>
   );
 }

subjects/03-Props-vs-State/lecture.js

@@ -8,10 +8,7 @@ function ContentToggle({ summary, onToggle, children }) {
 
   function handleClick() {
     setIsOpen(!isOpen);
-
-    if (onToggle) {
-      onToggle(!isOpen);
-    }
+    if (onToggle) onToggle(!isOpen);
   }
 
   let summaryClassName = "content-toggle-summary";
@@ -78,9 +75,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
 
 // function ContentToggle({ summary, onToggle, isOpen, children }) {
 //   function handleClick() {
-//     if (onToggle) {
-//       onToggle(!isOpen);
-//     }
+//     if (onToggle) onToggle(!isOpen);
 //   }
 
 //   let summaryClassName = "content-toggle-summary";
@@ -161,9 +156,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
 
 // function ContentToggle({ summary, onToggle, isOpen, children }) {
 //   function handleClick() {
-//     if (onToggle) {
-//       onToggle(!isOpen);
-//     }
+//     if (onToggle) onToggle(!isOpen);
 //   }
 
 //   let summaryClassName = "content-toggle-summary";

subjects/05-Imperative-to-Declarative/exercise.js

@@ -13,7 +13,7 @@ import $ from "jquery";
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
 function Modal({ children, title }, ref) {

subjects/05-Imperative-to-Declarative/lecture.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import createOscillator from "./utils/createOscillator";
 

subjects/05-Imperative-to-Declarative/solution.js

@@ -13,15 +13,18 @@ import $ from "jquery";
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
 function Modal({ children, title, isOpen }) {
   const modalRef = useRef();
 
-  useEffect(() => {
-    $(modalRef.current).modal(isOpen ? "show" : "hide");
-  }, [isOpen]);
+  useEffect(
+    () => {
+      $(modalRef.current).modal(isOpen ? "show" : "hide");
+    },
+    [isOpen]
+  );
 
   return (
     <div className="modal fade" ref={modalRef}>

subjects/06-Controlled-vs-Uncontrolled/exercise.js

@@ -15,7 +15,7 @@
 // - Save the state of the form and restore it when the page first loads, in
 //   case the user accidentally closes the tab before the form is submitted
 ////////////////////////////////////////////////////////////////////////////////
-import React from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import serializeForm from "form-serialize";
 

subjects/06-Controlled-vs-Uncontrolled/lecture.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import serializeForm from "form-serialize";
 

subjects/06-Controlled-vs-Uncontrolled/solution-extra.js

@@ -15,148 +15,159 @@
 // - Save the state of the form and restore it when the page first loads, in
 //   case the user accidentally closes the tab before the form is submitted
 ////////////////////////////////////////////////////////////////////////////////
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import serializeForm from "form-serialize";
 
-class CheckoutForm extends React.Component {
-  constructor(props) {
-    super(props);
+function CheckoutForm() {
+  const [billingName, setBillingName] = useState("Michael Jackson");
+  const [billingState, setBillingState] = useState("CA");
+  const [shippingName, setShippingName] = useState("");
+  const [shippingState, setShippingState] = useState("");
+  const [shippingSameAsBilling, setShippingSameAsBilling] = useState(
+    false
+  );
 
-    this.state = {
-      shippingSameAsBilling: true,
-      billingName: "",
-      billingState: "",
-      shippingName: "",
-      shippingState: ""
-    };
-
-    this.handleSubmit = event => {
-      event.preventDefault();
-      const values = serializeForm(event.target, { hash: true });
-      console.log(values);
-    };
+  function handleSubmit(event) {
+    event.preventDefault();
+    const values = serializeForm(event.target, { hash: true });
+    console.log(values);
+  }
 
-    this.handleBeforeUnload = () => {
-      localStorage.formState = JSON.stringify(this.state);
-    };
+  // Read the values from localStorage on the initial page load
+  useEffect(() => {
+    if (localStorage.formValues) {
+      const {
+        billingName,
+        billingState,
+        shippingName,
+        shippingState,
+        shippingSameAsBilling
+      } = JSON.parse(localStorage.formValues);
 
-    if (localStorage.formState) {
-      Object.assign(this.state, JSON.parse(localStorage.formState));
+      setBillingName(billingName);
+      setBillingState(billingState);
+      setShippingName(shippingName);
+      setShippingState(shippingState);
+      setShippingSameAsBilling(shippingSameAsBilling);
     }
-  }
+  }, []);
 
-  componentDidMount() {
-    window.addEventListener("beforeunload", this.handleBeforeUnload);
-  }
+  // Store the values in localStorage before the page unloads
+  useEffect(
+    () => {
+      function handleBeforeUnload() {
+        localStorage.formValues = JSON.stringify({
+          billingName,
+          billingState,
+          shippingName,
+          shippingState,
+          shippingSameAsBilling
+        });
+      }
 
-  componentWillUnmount() {
-    window.removeEventListener("beforeunload", this.handleBeforeUnload);
-  }
+      window.addEventListener("beforeunload", handleBeforeUnload);
 
-  render() {
-    return (
-      <div>
-        <h1>Checkout</h1>
-        <form onSubmit={this.handleSubmit}>
-          <fieldset>
-            <legend>Billing Address</legend>
-            <p>
-              <label>
-                Billing Name:{" "}
-                <input
-                  type="text"
-                  name="billing_name"
-                  defaultValue={this.state.billingName}
-                  onChange={event =>
-                    this.setState({ billingName: event.target.value })
-                  }
-                />
-              </label>
-            </p>
-            {this.state.billingState.length > 2 && (
-              <p style={{ color: "red" }}>
-                Please use the 2-character abbreviation for the state.
-              </p>
-            )}
-            <p>
-              <label>
-                Billing State:{" "}
-                <input
-                  type="text"
-                  size="2"
-                  name="billing_state"
-                  defaultValue={this.state.billingState}
-                  onChange={event =>
-                    this.setState({ billingState: event.target.value })
-                  }
-                />
-              </label>
+      return () => {
+        window.removeEventListener("beforeunload", handleBeforeUnload);
+      };
+    },
+    [
+      billingName,
+      billingState,
+      shippingName,
+      shippingState,
+      shippingSameAsBilling
+    ]
+  );
+
+  return (
+    <div>
+      <h1>Checkout</h1>
+      <form onSubmit={handleSubmit}>
+        <fieldset>
+          <legend>Billing Address</legend>
+          <p>
+            <label>
+              Billing Name:{" "}
+              <input
+                type="text"
+                name="billingName"
+                defaultValue={billingName}
+                onChange={event => setBillingName(event.target.value)}
+              />
+            </label>
+          </p>
+          {billingState.length > 2 && (
+            <p style={{ color: "red" }}>
+              Please use the 2-character abbreviation for the state.
             </p>
-          </fieldset>
+          )}
+          <p>
+            <label>
+              Billing State:{" "}
+              <input
+                type="text"
+                size="3"
+                name="billingState"
+                defaultValue={billingState}
+                onChange={event => setBillingState(event.target.value)}
+              />
+            </label>
+          </p>
+        </fieldset>
 
-          <br />
+        <br />
 
-          <fieldset>
+        <fieldset>
+          <label>
+            <input
+              type="checkbox"
+              defaultChecked={shippingSameAsBilling}
+              onChange={event =>
+                setShippingSameAsBilling(event.target.checked)
+              }
+            />{" "}
+            Same as billing
+          </label>
+          <legend>Shipping Address</legend>
+          <p>
             <label>
+              Shipping Name:{" "}
               <input
-                type="checkbox"
-                defaultChecked={this.state.shippingSameAsBilling}
-                onChange={event =>
-                  this.setState({
-                    shippingSameAsBilling: event.target.checked
-                  })
+                type="text"
+                name="shippingName"
+                value={
+                  shippingSameAsBilling ? billingName : shippingName
                 }
-              />{" "}
-              Same as billing
+                onChange={event => setShippingName(event.target.value)}
+                readOnly={shippingSameAsBilling}
+              />
             </label>
-            <legend>Shipping Address</legend>
-            <p>
-              <label>
-                Shipping Name:{" "}
-                <input
-                  type="text"
-                  name="shipping_name"
-                  value={
-                    this.state.shippingSameAsBilling
-                      ? this.state.billingName
-                      : this.state.shippingName
-                  }
-                  onChange={event =>
-                    this.setState({ shippingName: event.target.value })
-                  }
-                  readOnly={this.state.shippingSameAsBilling}
-                />
-              </label>
-            </p>
-            <p>
-              <label>
-                Shipping State:{" "}
-                <input
-                  type="text"
-                  size="2"
-                  name="shipping_state"
-                  value={
-                    this.state.shippingSameAsBilling
-                      ? this.state.billingState
-                      : this.state.shippingState
-                  }
-                  onChange={event =>
-                    this.setState({ shippingState: event.target.value })
-                  }
-                  readOnly={this.state.shippingSameAsBilling}
-                />
-              </label>
-            </p>
-          </fieldset>
-
+          </p>
           <p>
-            <button>Submit</button>
+            <label>
+              Shipping State:{" "}
+              <input
+                type="text"
+                size="2"
+                name="shippingState"
+                value={
+                  shippingSameAsBilling ? billingState : shippingState
+                }
+                onChange={event => setShippingState(event.target.value)}
+                readOnly={shippingSameAsBilling}
+              />
+            </label>
           </p>
-        </form>
-      </div>
-    );
-  }
+        </fieldset>
+
+        <p>
+          <button>Submit</button>
+        </p>
+      </form>
+    </div>
+  );
 }
 
 ReactDOM.render(<CheckoutForm />, document.getElementById("app"));