feat: add hints around custom hook, passing misdemeanours via context…

README.md

@@ -16,8 +16,8 @@ This is your chance to show off everything you've learned about building React a
 
 Remember the importance of:
 
--   Writing tests for your components
--   Using BEM/OOCSS to write scalable, reusable CSS
+-   Writing tests for your components (!!)
+-   Using BEM/OOCSS/Tailwind or a framework of your choice to write scalable, reusable CSS
 -   Keeping your components small and refactoring them into sub-components where necessary
 -   Using hooks to store state, make API calls, and pass data down to sub-components through contexts
 

docs/activity_2.md

@@ -79,17 +79,23 @@ We can knowingly break the rule of Don't Repeat Yourself, but with the knowledge
 
 👉 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.
 
-💡 Hint: `useEffect` can help here. If you don't pass any dependencies into the dependency array, it will only fire once!
+💡 Hint: [`useEffect`](https://react.dev/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) can help here. If you don't pass any dependencies into the dependency array, it will only fire once! But remember, `useEffect` should ONLY be used for communicating with external systems, so make sure you're using it correctly.
 
-❗ The `fetch` function is asynchronous so be sure to `await` the results.
+❗ The `fetch` function is asynchronous so be sure to `await` the results (if you need a reminder of `async/await` revisit the "Promises & Asynchronous Programming" session and assignment you did for this).
 
 ❗ 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.
 
+Note: if you're using `async/await` you shouldn't need to use `.then()`
+
 ❗ Think about where your `fetch` should live. Can you abstract the `fetch` code outside of your components? Which component should "own" this data?
 
+🔥 Stretch goal: Could you create a reusable hook here? You can use this one to inspire you: https://github.com/techreturners/lm-lab-react-hooks-solution/blob/main/src/components/hooks/use_x/use_fetch_data.tsx
+
 ❗ 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.
+👉 Make this state accessible via `useContext` so you can consume it in sub-components you will write next. Take a look at lines 44 and 47 here: https://github.com/techreturners/lm-lab-react-hooks-solution/blob/main/src/components/hooks/use_context-solution_2/theme_context.tsx
+
+Could you pass your `misdemeanours` and `setMisdemeanours` function in a similar way? 🤔
 
 👉 Add sub-components to the Misdemeanours page to render all of the misdemeanours in a list.
 

docs/activity_3.md

@@ -4,19 +4,19 @@
 
 Here's the design for this page:
 
-![Confess To Us](./images/confess.png 'Sketched confession page')
+![Confess To Us](./images/confess.png "Sketched confession page")
 
 Well, that's pretty surprising.
 
 ## Form Elements
 
 It looks like they want a form with three elements.
 
--   A subject line for the confession.
+- A subject line for the confession.
 
--   A dropdown for the reason for the confession. This could be either a type of misdemeanour, or "I just want to talk"
+- A dropdown for the reason for the confession. This could be either a type of misdemeanour, or "I just want to talk"
 
--   A text box for details
+- A text box for details
 
 ## Form Behaviour - on the Client
 
@@ -81,8 +81,20 @@ You must POST the above form data to the endpoint:
 
 3️⃣ If `justTalked` is `true`, you don't have to do anything.
 
-👉 Hold on! Have you been writing quality, valid, [accessible HTML](https://reactjs.org/docs/accessibility.html#semantic-html)? Maybe now is a good time to run your generated HTML through a validator and see! To do this, you can open your app in the browser and copy/paste the HTML from dev tools into a validator. 🙌
-
 ## The Next Level 🔥
 
-If you're feeling up to it, [activity 4](./activity_4.md) has some suggestions for taking your app to new heights - including deploying it live on the internet! 🤩
+If your application:
+
+- Isn't broken 😅
+- Has the ability to navigate to different pages using React Router
+- Has the ability to view a list of misdemeanours with different punishment ideas
+- Has the ability to filter misdemeanours
+- Has a form that adds a misdemeanour to the misdemeanour list and Posts the misdemeanour to the server
+- Has decent test coverage (20 - 50 tests)
+
+THEN YOU'RE READY FOR THE NEXT LEVEL 🔥🙌🔥🙌🔥
+
+If anything from the above checklist is missing though, take a little time getting these things working before moving on to
+the next part 🙂
+
+[Activity 4](./activity_4.md) has some suggestions for taking your app to new heights - including deploying it live on the internet! 🤩