[Filtering] Add filtering support

[Infinitay]

• Add filtering support
• Provide the user with some way of knowing the filter is running
• Optimize filtering (caching/not running the filter that didn't change)
• Clean up clearing filter
• Add an option to filter by video status (public/unlisted)

[Infinitay]

Some things to consider:

• create filteringState: filtered, filtering, notfiltering
• optimize filtering by not re-filtering for unchanged variables (title or channel)

[Infinitay]

Needlessly clearing filter/calling setFilteredVideos

Unlisted-YouTube-Video-Finder/src/components/SearchButtonContainer.tsx

Lines 68 to 79 in a0649fc

	useEffect(() => {
	console.log(`isFiltering: ${isFiltering}`);
	if (timeout.current) clearTimeout(timeout.current);
	if (isFiltering) {
	timeout.current = setTimeout(() => {
	setFilteredVideos(filterVideos({channelName: filterByChannel, videoTitle: filterByTitle, videos: likedVideos}));
	}, 750);
	} else {
	console.log("Clearing filter");
	setFilteredVideos(likedVideos);
	}
	}, [filterByChannel, filterByTitle, isFiltering, likedVideos, setFilteredVideos]);

Even on cold starts, when first fetching videos setFilteredVideos is being called over and over. This is because the useEffect hook deepnds on likedVideos which is being updated as videos are fetched. Also, when the filter is off and the user is typing the filter(s) the function is still being called.

[Infinitay]

Completely forgot to add a filter option that this app was initially created for. Add a quick filter option to filter by unlisted videos only. Maybe make it an 👁 (eye) icon with a slash through it (like a privacy icon) that is highlighted when unlisted only is selected and greyed out when not.

EDIT: Completed as of #26