Skip to content

Commit

Permalink
Update activity_2.md
Browse files Browse the repository at this point in the history
  • Loading branch information
neil-hughes authored Feb 3, 2023
1 parent 5ed3d1a commit 7413dbc
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions docs/activity_2.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Then, the misdemeanour, which they insist is always shown next to an appropriate
- Not Eating Your Vegetables = πŸ₯—
- Supporting Manchester United = 😈

Lastly, the "Punishment Idea". Under the Fakelandian system all punishments are random. They find a random picture on the internet and use it as inspiration for the appropriate punishment. Due to the low number of crimes, this weird system supposedly works extremely well.
Lastly, the "Punishment Idea". Under the Fakelandian system all punishments are random. They find a random picture on the internet (using a special service we'll discuss later on) and use it as inspiration for the appropriate punishment. Due to the low number of crimes, this weird system supposedly works extremely well.

## Let's build it!

Expand Down Expand Up @@ -73,21 +73,25 @@ We can knowingly break the rule of Don't Repeat Yourself, but with the knowledge

πŸ‘‰ Copy the `misdeameanour.types.ts` file into a new `types` folder in your `client` folder. Now you can import it and use it in your React project!

(The disadvantage is that if you edit this type for any reason you'll have to edit it in both places. But you likely won't have to edit it at all.)
(The disadvantage is that if you edit this type for any reason you'll have to edit it in both places. But you won't have to edit it at all during this assignment, so copying it to your `client` project will be fine.)

## Putting it together: Fetching Misdemeanours

πŸ‘‰ Use `fetch` in your application to get misdemeanour data from the server, with the constraint that you ONLY want to fetch new data when you hit `F5` or otherwise fully refresh the page.

πŸ‘‰ Make this state accessible via `useContext` so you can consume it in sub-components you will write next
πŸ’‘ Hint: `useEffect` can help here. If you don't pass any dependencies into the dependency array, it will only fire once!

❗ The `fetch` function is asynchronous so be sure to `await` the results.

❗ The response from a `fetch` has an async convenience method called `.json`. You can `await` the result of this to get the JSON body of the response.
❗ The response from a `fetch` has an async convenience method called `.json()`. You can `await` the result of this to get the JSON body of the response.

❗ Think about where your `fetch` should live. Can you abstract the `fetch` code outside of your components? Which component should "own" this data?

πŸ‘‰ Add sub-components to the Misdemeanours page to render all of the misdemeanours in a list
❗ Store the resulting list of misdemeanours in state.

πŸ‘‰ Make this state accessible via `useContext` so you can consume it in sub-components you will write next.

πŸ‘‰ Add sub-components to the Misdemeanours page to render all of the misdemeanours in a list.

πŸ‘‰ Add a dropdown to the Misdemeanours column that filters the visible list to just one of the four misdemeanours.

Expand Down

0 comments on commit 7413dbc

Please sign in to comment.