[feat] Technology Filter Functionality

[itsliterallymonique]

This sprint, you will work on the functionality of the technology filter! You will also have to make a few changes to your current technologyFilter component. Here is what you will need to do:

1. First, make a few changes!
   a. We are only filtering when the user clicks “Apply”. Therefore, we need to make it so that the technology selectedFilter array only changes when we click “Apply”
   b. e.g. if the user selects “Offshore Wind” but exits the filter without clicking “Apply”, WE WON’T FILTER projects by Offshore Wind!
   c. Note: I have moved the selectedFilter array outside of the FilterBar component and into the MapViewComponent because this makes it easier to filter by all our 4 filters AND the search input
2. Now, you can work on the filtering. All your filtering should be done in the MapViewComponent.
   a. We want to be able to filter the projects once the Apply button has been selected. This can be done through useEffects which will operate when we change the array that holds the filtered technology filters
   b. Some hints for filtering by technology (it is very similar to Julee’s search function):
   .. i. The function array.filter(x => true) will filter the array, returning a new array with only the filtered items. X is like an item in the array. True has to be a boolean function to check something for x, if it returns true, it will add it to the filtered array.
   .. ii. Check out the function .includes() – this could be useful
   c. The tricky part is mainly seeing how we can filter by search input + technology (also allowing us to add more filtering for other filters). I will leave that to you to think of – but if you do have any questions / need any help PLEASE DM me.
3. Lastly, we want a way to clear our filter and reset it
   a. To do this, the x button at the top of the open technology filter will act as the temporary clear button