Filter Functionality #39
Description
Assigned To:
Overview
Boston’s Higher Ground has a lot of data and several other teams are working on generating the graphs to visualize this data; however, we don’t want to visualize everything, we want to get just a portion of the data that we want to learn more about. The user interface for several of the filters (date, school, and location) has been built. Your task here will be to implement the functionality of these filters!
Task
Your task is to write a function that filters the database data according to criteria set by the user. Take a look at the Figma to get a better understanding of the filters you will be implementing. Then, get started!
Task Breakdown:
- Understanding the filters: date, school, location
- Retrieve data from DB
- Filter data according to selected criteria
- Testing
Understanding the filters
The first step for this ticket will be getting the filter criteria from the UI. This criteria is set through the filter UI component – you can assume that it is passed to you as parameters to your function. The user can filter by date (by providing a range), school, and location:
Retrieve data from DB
To start you off, the getAllData() function has already been written for you. This function retrieves all of the data from the Drizzle ORM (sample_data table) and returns an array of objects, with all the fields described in the schema (src/lib/schema.ts).
Implement the Filter
Using the Array.filter function, filter the data from the database according to the criteria you got in the first step (Understanding the filters: date, school, location).
Here is an example of how to use the .filter() function. Suppose we ave an array people where each person in people has a profession attribute, this is how we could get an array chemists of people who are chemists. ⚗️
const chemists = people.filter(person =>
person.profession === 'chemist'
);
I took this example from React Rendering Lists if you are confused on how the .filter() and .map() functions work.
Now that you understand how to filter the data, use the existing UI to retrieve the selected filter options for date, school, and location to filter the data.
Reference #29 for details on the filter UI ticket and refer to these files: src/components/ui/calendar.tsx, src/components/ui/dropdown-menu.tsx
Resources:
Please message Jennifer with questions on tickets, Amitav with bugs, and Fatima with design questions. Happy Coding!