Skip to content

Commit

Permalink
reorded things
Browse files Browse the repository at this point in the history
  • Loading branch information
dtauer committed Nov 15, 2024
1 parent d1988d9 commit 67d6683
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 15 deletions.
28 changes: 15 additions & 13 deletions lessons/06-advanced-react/A-portals.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,25 +64,14 @@ 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
// import at top
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",
Expand Down Expand Up @@ -135,7 +124,7 @@ const { isLoading: isLoadingPastOrder, data: pastOrderData } = useQuery({
)}
<button onClick={() => setFocusedOrder()}>Close</button>
</Modal>
) : null;
) : null
}
```

Expand All @@ -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]
Expand Down
4 changes: 2 additions & 2 deletions lessons/06-advanced-react/C-uncontrolled-forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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";
Expand Down

0 comments on commit 67d6683

Please sign in to comment.