From 5e837f7ff4eb0014ed2a73326cc8103e1f9e166f Mon Sep 17 00:00:00 2001 From: Ellie Judge Date: Fri, 6 Oct 2023 11:54:06 +0100 Subject: [PATCH 1/2] feat: add hints around custom hook, passing misdemeanours via context, using useEffect properly, async/await vs then() and completion checklist --- README.md | 4 ++-- docs/activity_2.md | 12 +++++++++--- docs/activity_3.md | 24 +++++++++++++++++++----- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 17e49a063..6a943c0e0 100644 --- a/README.md +++ b/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 diff --git a/docs/activity_2.md b/docs/activity_2.md index 550ccc7bb..6f2ee7e30 100644 --- a/docs/activity_2.md +++ b/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. diff --git a/docs/activity_3.md b/docs/activity_3.md index 6d7c52495..989fad4e2 100644 --- a/docs/activity_3.md +++ b/docs/activity_3.md @@ -4,7 +4,7 @@ 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. @@ -12,11 +12,11 @@ Well, that's pretty surprising. 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 @@ -85,4 +85,18 @@ You must POST the above form data to the endpoint: ## 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! 🤩 From c7b06b58c124f352ad4f97b81035d0fc27d1c3d7 Mon Sep 17 00:00:00 2001 From: Ellie Judge Date: Fri, 6 Oct 2023 11:55:37 +0100 Subject: [PATCH 2/2] fix: remove suggestion around HTML to try and remove overwhelm --- docs/activity_3.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/activity_3.md b/docs/activity_3.md index 989fad4e2..4fd9fd430 100644 --- a/docs/activity_3.md +++ b/docs/activity_3.md @@ -81,8 +81,6 @@ 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 your application: