From 67d66838d1241b72d1d5fec1cada7ce88b64c554 Mon Sep 17 00:00:00 2001
From: dtauer <dustin@dtauer.com>
Date: Fri, 15 Nov 2024 12:56:29 -0600
Subject: [PATCH] reorded things

---
 lessons/06-advanced-react/A-portals.md        | 28 ++++++++++---------
 .../06-advanced-react/C-uncontrolled-forms.md |  4 +--
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/lessons/06-advanced-react/A-portals.md b/lessons/06-advanced-react/A-portals.md
index 64884bc..b1ec684 100644
--- a/lessons/06-advanced-react/A-portals.md
+++ b/lessons/06-advanced-react/A-portals.md
@@ -64,18 +64,6 @@ export default async function getPastOrder(order) {
 }
 ```
 
-Cool, let's go use this to render our Modal now. Open `past.lazy.jsx`. Make the `order.order_id` value a button and add an `onClick` event so clicking it will open the Modal:
-
-```javascript
-<td>
-  <button onClick={() => setFocusedOrder(order.order_id)}>
-    {order.order_id}
-  </button>
-</td>
-<td>{order.date}</td>
-<td>{order.time}</td>
-```
-
 Then render the modal if we have a `focusedOrder`: 
 
 ```javascript
@@ -83,6 +71,7 @@ Then render the modal if we have a `focusedOrder`:
 import getPastOrder from "../api/getPastOrder";
 import Modal from "../Modal";
 
+// NOTE: In the course, Brian makes this a hook/module
 const intl = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
@@ -135,7 +124,7 @@ const { isLoading: isLoadingPastOrder, data: pastOrderData } = useQuery({
       )}
       <button onClick={() => setFocusedOrder()}>Close</button>
     </Modal>
-  ) : null;
+  ) : null
 }
 ```
 
@@ -145,6 +134,19 @@ const { isLoading: isLoadingPastOrder, data: pastOrderData } = useQuery({
 - If there is a focusedOrder, we render the modal and show a loading indicator that we're loading the rest of the info.
 - When a user clicks Close, we set the focusedOrder to be undefined again which causes the Modal to unrender.
 
+Finally, we need a way to open the modal. Open `past.lazy.jsx`. Make the `order.order_id` value a button and add an `onClick` event so clicking it will open the Modal:
+
+```javascript
+<td>
+  <button onClick={() => setFocusedOrder(order.order_id)}>
+    {order.order_id}
+  </button>
+</td>
+<td>{order.date}</td>
+<td>{order.time}</td>
+```
+
+
 That's it!
 
 > 🏁 [Click here to see the state of the project up until now: 11-modals][step]
diff --git a/lessons/06-advanced-react/C-uncontrolled-forms.md b/lessons/06-advanced-react/C-uncontrolled-forms.md
index 5030804..112ffcb 100644
--- a/lessons/06-advanced-react/C-uncontrolled-forms.md
+++ b/lessons/06-advanced-react/C-uncontrolled-forms.md
@@ -16,7 +16,7 @@ keywords:
 
 We are now going to do a contact page for our site. As part of that, we will accept a name, email, and message from our users and submit it our backend. Like all good backends, ours will log it to the console and then ignore it.
 
-We are going to see two new concepts here: how to do a post with TanStack Query (which they call a mutation) and how to do uncontrolled forms with React. Let's start with our API query. In src/api, create a file called postContact.js and put this in there.
+We are going to see two new concepts here: how to do a post with TanStack Query (which they call a mutation) and how to do uncontrolled forms with React. Let's start with our API query. In src/api, create a file called `postContact.js` and put this in there.
 
 ```javascript
 export default async function postContact(name, email, message) {
@@ -45,7 +45,7 @@ Create a new link to our page in index.lazy.jsx
 </li>
 ```
 
-Create a new route called contact.lazy.jsx in src/routes
+Create a new route called `contact.lazy.jsx` in `src/routes`
 
 ```javascript
 import { createLazyFileRoute } from "@tanstack/react-router";