Finalize Filtering

[dilanurbayraktar]

We have the button, we have the back-end function, now is the time!!!!!

Summary 💻

In this ticket, you will be making the filter modal work! With this ticket done, we will be able to filter tutees by grade preference, subject preference, disability preference, and tutoring mode.

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Alter the /tutees get request endpoint
• Create your frontend endpoint fetch
• See if filters can be applied
• Open a PR and request review from @brandondionisio.

Steps 👍

• If you go into TuteeTable.tsx, you can see that right now, we are simply displaying every tutee in the database from the useEffect fetch. This is done by fetching from the GET request endpoint in backend/src/index.ts -- take a look to see how this works. Your job is to alter the useEffect and GET request endpoint to ONLY display the tutees given the current filter.
• The useEffect is currently only running when the page initially loads since it has an empty dependency array ([]). Change the dependency array to hold the useState values of the filter such that when these values change, the useEffect runs again. Console.log something in the useEffect to see if it outputs to the console every time these values change.
• Now, you want your endpoint to only return the tutees that meet the given filter. So, you want your fetch to pass in the current filter information. You can use the following format to pass in this information to the endpoint you made: const response = await fetch("http://localhost:3000/tutees", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(filterData),});
• Now, with the information passed to your endpoint, you can extract all the filter variables with const {information1, information2, ...} = req.body. Console.log this data to see if it was passed in correctly.
• Finally, you can filter the tutees from the tutee table given the current filters. Thankfully the filter function was already made for you so you just need to call filterTutors() and call res.json() on what it returns. Verify that the filter works and yay you're done, amazing work.

Tip for success 📈

• Use npx tsx src/index.ts to run the backend server
• Resource on express routing: here
• Use the already created routes and fetches as a template for your own
• Resource on the fetch API: here

Where to get help!

Reach out to @dilanurbayraktar and @brandondionisio.