From 23e0044c68b3de2240b03ae65ef2151b720cc7c9 Mon Sep 17 00:00:00 2001 From: benjaminjohnson2204 Date: Tue, 31 Dec 2024 18:50:10 -0800 Subject: [PATCH] Fix writeup to say port 5173 instead of 3000 for frontend --- frontend/src/components/CheckButton.tsx | 2 +- writeup/part-2/2-2-Task-detail.md | 2 +- writeup/part-2/2-3-Task-assignment.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/CheckButton.tsx b/frontend/src/components/CheckButton.tsx index d6f4b25..4981adb 100644 --- a/frontend/src/components/CheckButton.tsx +++ b/frontend/src/components/CheckButton.tsx @@ -14,7 +14,7 @@ export interface CheckButtonProps { * Both come from the `public` folder--thanks to Create React App, anything in * that folder is automatically made available as a public file, so it's a good * place to store static icons and images. (You can also view the icons directly - * in your browser by visiting, say, `localhost:3000/checkButton.checked.svg`.) + * in your browser by visiting, say, `localhost:5173/checkButton.checked.svg`.) */ export const CheckButton = React.forwardRef( function CheckButton({ checked, disabled, onPress, className }: CheckButtonProps, ref) { diff --git a/writeup/part-2/2-2-Task-detail.md b/writeup/part-2/2-2-Task-detail.md index 3974f3c..178e1f8 100644 --- a/writeup/part-2/2-2-Task-detail.md +++ b/writeup/part-2/2-2-Task-detail.md @@ -22,7 +22,7 @@ Next, we'll add a new frontend page that displays information about a particular 2. Create a new file `frontend/src/pages/TaskDetail.tsx`. You can copy code from `Home.tsx` or `About.tsx` to set up the basic page outline. Make sure the exported function component is named `TaskDetail`. 3. In `pages/index.ts`, add another line to re-export `TaskDetail` (like `About` and `Home`). 4. In `frontend/src/App.tsx`, add a new [`Route` component](https://reactrouter.com/en/main/route/route) with path `"/task/:id"` and element ``. -5. With the frontend running locally, test that the new page is reachable by entering the following URL in your browser: `localhost:3000/task/`, where is the ID of any Task object in your local database. +5. With the frontend running locally, test that the new page is reachable by entering the following URL in your browser: `localhost:5173/task/`, where is the ID of any Task object in your local database. 6. Within the `TaskDetail` component, add a state variable `task` which will store the Task object and add a `useEffect` hook which retrieves the task and puts it into that state variable. 1. Use the [`useParams` hook](https://reactrouter.com/en/main/hooks/use-params) from React Router to get the task ID from the URL (this is called a [dynamic segment](https://reactrouter.com/en/main/route/route#dynamic-segments)). This ID should be the only dependency of the `useEffect` hook. 2. Use the `getTask` function from `frontend/src/api/tasks.ts` to retrieve the task from the backend. diff --git a/writeup/part-2/2-3-Task-assignment.md b/writeup/part-2/2-3-Task-assignment.md index dbb88d2..981b262 100644 --- a/writeup/part-2/2-3-Task-assignment.md +++ b/writeup/part-2/2-3-Task-assignment.md @@ -25,7 +25,7 @@ Finally, we'll add the ability to assign users to tasks and see who is the assig
❓ Hint: CORS errors - _You might encounter a CORS (Cross-Origin Resource Sharing) permission error caused by the profile picture. This happens because browsers block requests for any resource that's not from the same origin (in our case, `localhost:3000`) by default for security reasons. You can ignore these errors and just use the example profile pictures that we provided (see [Part 2.1](./2-1-Users.md))._ + _You might encounter a CORS (Cross-Origin Resource Sharing) permission error caused by the profile picture. This happens because browsers block requests for any resource that's not from the same origin (in our case, `localhost:5173`) by default for security reasons. You can ignore these errors and just use the example profile pictures that we provided (see [Part 2.1](./2-1-Users.md))._
4. Add styles to the `UserTag` component. You should just need some layout styling and a `border-radius` on the profile picture.