Skip to content

Commit 22698d7

Browse files
mjacksonmjackson
committed
Fix some missing imports, function components
1 parent 30b49e4 commit 22698d7

File tree

9 files changed

+172
-152
lines changed

9 files changed

+172
-152
lines changed

‎subjects/02-Components/exercise.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
//
1111
// - Add descriptive propTypes to <App> and <Tabs>
1212
////////////////////////////////////////////////////////////////////////////////
13-
import React from "react";
13+
import React, { useState } from "react";
1414
import ReactDOM from "react-dom";
1515

1616
const styles = {};
@@ -49,11 +49,11 @@ function Tabs() {
4949
);
5050
}
5151

52-
function App() {
52+
function App({ sports }) {
5353
return (
5454
<div>
5555
<h1>Sports</h1>
56-
<Tabs data={this.props.sports} />
56+
<Tabs data={sports} />
5757
</div>
5858
);
5959
}

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ function ContentToggle({ summary, onToggle, children }) {
88

99
function handleClick() {
1010
setIsOpen(!isOpen);
11-
12-
if (onToggle) {
13-
onToggle(!isOpen);
14-
}
11+
if (onToggle) onToggle(!isOpen);
1512
}
1613

1714
let summaryClassName = "content-toggle-summary";
@@ -78,9 +75,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
7875

7976
// function ContentToggle({ summary, onToggle, isOpen, children }) {
8077
// function handleClick() {
81-
// if (onToggle) {
82-
// onToggle(!isOpen);
83-
// }
78+
// if (onToggle) onToggle(!isOpen);
8479
// }
8580

8681
// let summaryClassName = "content-toggle-summary";
@@ -161,9 +156,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
161156

162157
// function ContentToggle({ summary, onToggle, isOpen, children }) {
163158
// function handleClick() {
164-
// if (onToggle) {
165-
// onToggle(!isOpen);
166-
// }
159+
// if (onToggle) onToggle(!isOpen);
167160
// }
168161

169162
// let summaryClassName = "content-toggle-summary";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import $ from "jquery";
1313
import "bootstrap";
1414
import "bootstrap/dist/css/bootstrap.min.css";
1515

16-
import React, { useRef } from "react";
16+
import React, { useEffect, useRef, useState } from "react";
1717
import ReactDOM from "react-dom";
1818

1919
function Modal({ children, title }, ref) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState, useRef } from "react";
1+
import React, { useEffect, useRef, useState } from "react";
22
import ReactDOM from "react-dom";
33
import createOscillator from "./utils/createOscillator";
44

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,18 @@ import $ from "jquery";
1313
import "bootstrap";
1414
import "bootstrap/dist/css/bootstrap.min.css";
1515

16-
import React, { useEffect, useState, useRef } from "react";
16+
import React, { useEffect, useRef, useState } from "react";
1717
import ReactDOM from "react-dom";
1818

1919
function Modal({ children, title, isOpen }) {
2020
const modalRef = useRef();
2121

22-
useEffect(() => {
23-
$(modalRef.current).modal(isOpen ? "show" : "hide");
24-
}, [isOpen]);
22+
useEffect(
23+
() => {
24+
$(modalRef.current).modal(isOpen ? "show" : "hide");
25+
},
26+
[isOpen]
27+
);
2528

2629
return (
2730
<div className="modal fade" ref={modalRef}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
// - Save the state of the form and restore it when the page first loads, in
1616
// case the user accidentally closes the tab before the form is submitted
1717
////////////////////////////////////////////////////////////////////////////////
18-
import React from "react";
18+
import React, { useState } from "react";
1919
import ReactDOM from "react-dom";
2020
import serializeForm from "form-serialize";
2121

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState, useEffect } from "react";
1+
import React, { useEffect, useRef, useState } from "react";
22
import ReactDOM from "react-dom";
33
import serializeForm from "form-serialize";
44

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

Lines changed: 134 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -15,148 +15,159 @@
1515
// - Save the state of the form and restore it when the page first loads, in
1616
// case the user accidentally closes the tab before the form is submitted
1717
////////////////////////////////////////////////////////////////////////////////
18-
import React from "react";
18+
import React, { useEffect, useState } from "react";
1919
import ReactDOM from "react-dom";
2020
import serializeForm from "form-serialize";
2121

22-
class CheckoutForm extends React.Component {
23-
constructor(props) {
24-
super(props);
22+
function CheckoutForm() {
23+
const [billingName, setBillingName] = useState("Michael Jackson");
24+
const [billingState, setBillingState] = useState("CA");
25+
const [shippingName, setShippingName] = useState("");
26+
const [shippingState, setShippingState] = useState("");
27+
const [shippingSameAsBilling, setShippingSameAsBilling] = useState(
28+
false
29+
);
2530

26-
this.state = {
27-
shippingSameAsBilling: true,
28-
billingName: "",
29-
billingState: "",
30-
shippingName: "",
31-
shippingState: ""
32-
};
33-
34-
this.handleSubmit = event => {
35-
event.preventDefault();
36-
const values = serializeForm(event.target, { hash: true });
37-
console.log(values);
38-
};
31+
function handleSubmit(event) {
32+
event.preventDefault();
33+
const values = serializeForm(event.target, { hash: true });
34+
console.log(values);
35+
}
3936

40-
this.handleBeforeUnload = () => {
41-
localStorage.formState = JSON.stringify(this.state);
42-
};
37+
// Read the values from localStorage on the initial page load
38+
useEffect(() => {
39+
if (localStorage.formValues) {
40+
const {
41+
billingName,
42+
billingState,
43+
shippingName,
44+
shippingState,
45+
shippingSameAsBilling
46+
} = JSON.parse(localStorage.formValues);
4347

44-
if (localStorage.formState) {
45-
Object.assign(this.state, JSON.parse(localStorage.formState));
48+
setBillingName(billingName);
49+
setBillingState(billingState);
50+
setShippingName(shippingName);
51+
setShippingState(shippingState);
52+
setShippingSameAsBilling(shippingSameAsBilling);
4653
}
47-
}
54+
}, []);
4855

49-
componentDidMount() {
50-
window.addEventListener("beforeunload", this.handleBeforeUnload);
51-
}
56+
// Store the values in localStorage before the page unloads
57+
useEffect(
58+
() => {
59+
function handleBeforeUnload() {
60+
localStorage.formValues = JSON.stringify({
61+
billingName,
62+
billingState,
63+
shippingName,
64+
shippingState,
65+
shippingSameAsBilling
66+
});
67+
}
5268

53-
componentWillUnmount() {
54-
window.removeEventListener("beforeunload", this.handleBeforeUnload);
55-
}
69+
window.addEventListener("beforeunload", handleBeforeUnload);
5670

57-
render() {
58-
return (
59-
<div>
60-
<h1>Checkout</h1>
61-
<form onSubmit={this.handleSubmit}>
62-
<fieldset>
63-
<legend>Billing Address</legend>
64-
<p>
65-
<label>
66-
Billing Name:{" "}
67-
<input
68-
type="text"
69-
name="billing_name"
70-
defaultValue={this.state.billingName}
71-
onChange={event =>
72-
this.setState({ billingName: event.target.value })
73-
}
74-
/>
75-
</label>
76-
</p>
77-
{this.state.billingState.length > 2 && (
78-
<p style={{ color: "red" }}>
79-
Please use the 2-character abbreviation for the state.
80-
</p>
81-
)}
82-
<p>
83-
<label>
84-
Billing State:{" "}
85-
<input
86-
type="text"
87-
size="2"
88-
name="billing_state"
89-
defaultValue={this.state.billingState}
90-
onChange={event =>
91-
this.setState({ billingState: event.target.value })
92-
}
93-
/>
94-
</label>
71+
return () => {
72+
window.removeEventListener("beforeunload", handleBeforeUnload);
73+
};
74+
},
75+
[
76+
billingName,
77+
billingState,
78+
shippingName,
79+
shippingState,
80+
shippingSameAsBilling
81+
]
82+
);
83+
84+
return (
85+
<div>
86+
<h1>Checkout</h1>
87+
<form onSubmit={handleSubmit}>
88+
<fieldset>
89+
<legend>Billing Address</legend>
90+
<p>
91+
<label>
92+
Billing Name:{" "}
93+
<input
94+
type="text"
95+
name="billingName"
96+
defaultValue={billingName}
97+
onChange={event => setBillingName(event.target.value)}
98+
/>
99+
</label>
100+
</p>
101+
{billingState.length > 2 && (
102+
<p style={{ color: "red" }}>
103+
Please use the 2-character abbreviation for the state.
95104
</p>
96-
</fieldset>
105+
)}
106+
<p>
107+
<label>
108+
Billing State:{" "}
109+
<input
110+
type="text"
111+
size="3"
112+
name="billingState"
113+
defaultValue={billingState}
114+
onChange={event => setBillingState(event.target.value)}
115+
/>
116+
</label>
117+
</p>
118+
</fieldset>
97119

98-
<br />
120+
<br />
99121

100-
<fieldset>
122+
<fieldset>
123+
<label>
124+
<input
125+
type="checkbox"
126+
defaultChecked={shippingSameAsBilling}
127+
onChange={event =>
128+
setShippingSameAsBilling(event.target.checked)
129+
}
130+
/>{" "}
131+
Same as billing
132+
</label>
133+
<legend>Shipping Address</legend>
134+
<p>
101135
<label>
136+
Shipping Name:{" "}
102137
<input
103-
type="checkbox"
104-
defaultChecked={this.state.shippingSameAsBilling}
105-
onChange={event =>
106-
this.setState({
107-
shippingSameAsBilling: event.target.checked
108-
})
138+
type="text"
139+
name="shippingName"
140+
value={
141+
shippingSameAsBilling ? billingName : shippingName
109142
}
110-
/>{" "}
111-
Same as billing
143+
onChange={event => setShippingName(event.target.value)}
144+
readOnly={shippingSameAsBilling}
145+
/>
112146
</label>
113-
<legend>Shipping Address</legend>
114-
<p>
115-
<label>
116-
Shipping Name:{" "}
117-
<input
118-
type="text"
119-
name="shipping_name"
120-
value={
121-
this.state.shippingSameAsBilling
122-
? this.state.billingName
123-
: this.state.shippingName
124-
}
125-
onChange={event =>
126-
this.setState({ shippingName: event.target.value })
127-
}
128-
readOnly={this.state.shippingSameAsBilling}
129-
/>
130-
</label>
131-
</p>
132-
<p>
133-
<label>
134-
Shipping State:{" "}
135-
<input
136-
type="text"
137-
size="2"
138-
name="shipping_state"
139-
value={
140-
this.state.shippingSameAsBilling
141-
? this.state.billingState
142-
: this.state.shippingState
143-
}
144-
onChange={event =>
145-
this.setState({ shippingState: event.target.value })
146-
}
147-
readOnly={this.state.shippingSameAsBilling}
148-
/>
149-
</label>
150-
</p>
151-
</fieldset>
152-
147+
</p>
153148
<p>
154-
<button>Submit</button>
149+
<label>
150+
Shipping State:{" "}
151+
<input
152+
type="text"
153+
size="2"
154+
name="shippingState"
155+
value={
156+
shippingSameAsBilling ? billingState : shippingState
157+
}
158+
onChange={event => setShippingState(event.target.value)}
159+
readOnly={shippingSameAsBilling}
160+
/>
161+
</label>
155162
</p>
156-
</form>
157-
</div>
158-
);
159-
}
163+
</fieldset>
164+
165+
<p>
166+
<button>Submit</button>
167+
</p>
168+
</form>
169+
</div>
170+
);
160171
}
161172

162173
ReactDOM.render(<CheckoutForm />, document.getElementById("app"));

0 commit comments

Comments
 (0)