Fullstack Filter + addMember

[JJBai2003]

The semester flew by so fast and we are almost near the end! Good job completing all the sprints and exceeding my expectations all the time! I am super proud of every single one of you. As we discussed in our last meeting, this sprint will piece together the different components we have worked on. There may be instances where you require the assistance of the other pair, feel free to communicate and collaborate! I want this to be an opportunity for everyone to learn and have fun, and I hope it’s been so so far :)

Some important dates coming up:

• Mid-semester presentation: April.22nd
• Sprint’s official due date: April.24th
• Poster content decided: April.25th during subteam meeting(i will talk a bit more about that during the meeting)
• Final showcase presentation completed: April.27th, practice during work session that day
• Final Showcase: April.29th

Aaaaanyways, here are the sprints that compile all the tasks each pair has expressed interest in. Please let me know if I missed anything, and I will add them to the sprint and provide some resources if necessary.

Part ZERO. Fullstack: Card Display
Currently, all the cards are hard-coded. There are many ways to connect the frontend to our database, and you can explore on your own time. Here are the steps that I will take to complete this task:
In App.js, use react components {useState, useEffect} to retrieve data from the database. Right now, we have contacts.js, which is the hardcoded database. We want to replace that with the actual data in our database.
Once we have the data, we can map them into the Card components that we already implemented, since the Card component has input props. This is similar to what we currently have, aka the “{contacts.map(createCard)}” line.
Here are some helpful resources:
Fetching and mapping data: https://www.youtube.com/watch?v=MEab_a19ZGk
ps. The link to our backend is localhost 3000 instead of localhost 4000 in this video.
I don’t remember if I shared this before but this video is super helpful to help you understand the full stack development process: https://www.youtube.com/watch?v=-42K44A1oMA

Part I. Fullstack: addMember
We would like the users to be able to add members to our database through the frontend.

1. Depending on your preference, you can implement a button that navigates to another page or a popup. Here are some resources

• Button Navigation: https://www.geeksforgeeks.org/how-to-link-a-custom-react-component-mybutton-to-another-page/
• Popup and Add Data: https://www.youtube.com/watch?v=WmLuPmZKCd4

2. Once the user enters the necessary information, we would like to call the addMember endpoint with the correct fields, so the new member can be POSTed into our database.

Part II. Fullstack: Filter
If you completed Part Zero, then this part should be pretty intuitive. We already implemented search by name endpoint, which means that we will have the filtered data right away when we call the endpoint. The process will look something like this

1. The basic idea is that we want to keep track of an array of which filter has been selected. Then, for each element in this array, we handle them differently using if statements. For example, if the current filter element is year, then we want to call the endpoint that gets the member of that year. Remember that filtering is an AND relationship, so if there are multiple filters, then the members that ends up in the returned array must satisfy all conditions
2. Once we have the members, render the home page so that only the people with names that matches the search query will be displayed. This can be done using the mapping function, similar to Part Zero.

• This video is for reference: https://youtu.be/lfm_Hu0hEms?t=4011