[V2] Custom Hooks Needed

[Nyumat]

NyumatFlix2.0 needs Custom Hooks

In modern react, as your application grows, there's a lot of need for logic that can be used by multiple components.

With NyumatFlix 2.0, this also applies.

When I first created NyumatFlix I didn't have custom hooks due to both inexperience and not having much resuable logic. However, now that is not the case; but enough rambling.

Proposal

useCurrentState({ filter: string[], searchTerm: string }) - useCurrentState subscribes to updates in the form of a 'currentState' string value in order to determine what the body (main column content) needs to render. ['all', 'filter', 'search']

useDebounceSearch<T>(value: T, delay: number) - useDebounceSearch allows us to debounce really any fast changing value. The debounced value will only reflect the latest search term when the hook has not been called for the delayed time period. In NyumatFlix's context, it'll be used on a search query so we're not calling the tmdbAPI too much.

useDefaultMovies(page: number)- useDefaultMovies is a data fetching hook which calls the API route to get popular movies and provides loading, error, and data states for subscription.

useFilter({ filter: string[] }) - useFilter is another data fetching hook which uses the user's selected genre filter(s) to generate the data responses. In the future, this will need to support pagination for filters in which there are more than 20 items returned.

useLoading(filterLoading: boolean, searchLoading: boolean, defaultLoading: boolean) - useLoading is a wrapper hook around the data fetching API's returned loading state(s) to determine when any of the three data fetching hooks are loading.

useSearch({ search: string }) useSearch is another wrapper hook around the search functionality in NyumatFlix. It uses the search string to fetch data from tmdbAPI and debounces to avoid overloading the requests. In the future, supporting pagination in this hook will be ideal, as many searches can have > 20 items returned.

useAvailable(id: number) - useAvailable is a data fetching hook that queries the remote server to determine if the streaming link exists. If it returns true, then the site will render it. Otherwise, the front end will state that it is not available.