Displaying Real Data on the Approved Matches Page

[dilanurbayraktar]

Displaying Real Data for the Approved Matches Table

Summary 💻

As of right now, we have real data displayed for the TuteeTable and the TutorTable (check them out with http://localhost:5173/tutortable). Now, we want to display real data for the Approved Matches page, found in http://localhost:5173/approvedmatchestable. This table will display the tutor-tutee pairs once they are approved by the admin.

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Create your endpoint
• Create your frontend endpoint fetch
• See if the data is displayed with your dev server
• Open a PR and request review from @brandondionisio.

Steps 👍

• Run the localhost and check out the approved matches table. See how it only has three entries? That's because we hard-coded three tutor and tutee information inside ApprovedMatches.tsx.

• Instead, we want to get the real data from the database. The approved matches pairs are found in the approved_matches table in our database (check it out with Neon). Your job is to apply a similar process used by the tutortable and tuteetable to display this real data in the approved matches table.

• Since we need to fetch the tutors and tutees who are matches, you need to make a new GET endpoint inside backend/src/index.ts. Make the route to the endpoint, "/approvedmatches".

• To make sure you can reach your endpoint, make your GET request console.log something and then attempt to fetch the endpoint inside ApprovedMatches.tsx with a useEffect. This should look like:
  useEffect(() => {
  const fetchApprovedMatches = async () => {
  try {
  const response = await fetch("http://localhost:3000/approvedmatches");
  } catch (error) {
  console.error("Error fetching approved matches:", error);
  }
  };

  fetchApprovedMatches();
  }, []);
  If you go to your browser console, you should be able to see your console.log message.

• Inside your endpoint, you will need to make a drizzle query to extract the tutor and tutee information from the tutor and tutee table given the pair ids (model this after the tutee and tutor get endpoints). You can use:
  const tutor = await db
  .select()
  .from(tutorTable)
  .innerJoin(approvedMatchesTable, eq(tutorTable.id, [a given tutor id]));

to get the information of a tutor with the given tutor id.

• Your endpoint response (res.send()) should contain all the matched tutor and tutee information pairs in individual objects (so the frontend knows which tutor is paired with which tutee). This structure should be like: [[tutee, tutor], [tutee, tutor], ..., ]
• Check that your response contains the correct information by console.logging the response from your frontend useEffect. (you need to first turn the response into json by using const data = await response.json();).
• Now, make two useState consts to hold the tutor and tutee information as an array (named tutee and tutor) and then check if the information is correctly displayed! Nice, you are finished! :)

Tip for success 📈

• Use npx tsx src/index.ts to run the backend server
• This ticket closely follows what is already done in TuteeForm.tsx and TutorForm.tsx. If you get stuck, look in those files for help.
• 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.