listd is a Full Stack App that will allow users to create, share and watch lists of YouTube channels. This app is being built LIVE on Twitch https://twitch.tv/codinggarden
This PR simplifies the de-bouncing of the video search filter on the list page.
What type of Pull Request is this?
Refactoring (no functional changes, no API changes)
What is the current behavior?
Currently, the videos that come in through a streamed promise from the server are awaited twice, once in the script tag and once in the actual template in the #await block.
On top of that, de-bouncing of the search filter and filtering of the array were combined, which introduced some unnecessary complexity.
What is the new behavior?
The de-bouncing of the search filter and filtering of the videos is separated into their own functions.
Instead of filtering every time the query changes in a reactive statement, updating the search filter is handled by on:keyup.
Instead of awaiting allVideos in the template and maintaining a separate filteredVideos array, the videos are filtered inline, directly in the #await block.
Every time filter is updated, re-computing the videos according to the filter is handled automatically by Svelte.
Other information
This PR additionally adds a globals setting to eslintrc.cjs config for it to recognize NodeJS as a valid global type, which is where the Timeout type comes from.
This PR simplifies the de-bouncing of the video search filter on the list page.
What type of Pull Request is this?
What is the current behavior?
script
tag and once in the actual template in the#await
block.What is the new behavior?
on:keyup
.allVideos
in the template and maintaining a separatefilteredVideos
array, the videos are filtered inline, directly in the#await
block.filter
is updated, re-computing the videos according to the filter is handled automatically by Svelte.Other information
This PR additionally adds a
globals
setting toeslintrc.cjs
config for it to recognizeNodeJS
as a valid global type, which is where theTimeout
type comes from.