- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
- Use React TypeScript cheat sheet
You are given a basic markup for the App, TodosList and CurrentUser components and the API.
Add the data loading, so the App works as described below:
- Create a separate file
api.ts
to put all the API call there. - Todos are fetched on page load from GET todos endpoint. (
useEffect(() => { ... }, [])
) - Each todo has a button to select a user but
selectedUserId
is stored in theApp
. (pass a callback to theTodoList
) CurrentUser
component receivesuserId
as a prop and loads user details from GET user endpoint (replace 1 with a givenuserId
).- If I select another user the details should be updated. (
useEffect(() => { ... }, [userId])
). - If I select the same user there should not be a request to the server.
- Add a button
Clear
into theCurrentUser
to clear the selectedUser in theApp
- Add an
<input>
to theTodoList
to filter the todos by title - Add a
<select>
to theTodoList
to showall
,active
(not completed) orcompleted
todos. - (*) Add
Randomize
button to theTodoList
to show the todos in a random order.