Old Pramp Scripts

Implementing more of an autocomplete then expected...

A recent Pramp interview I had challenged to make an autocomplete form using an already-provided function called searchMovies(query).

Unfortunately this was using the RawGit service, which for the uninitiated, was a service that allows serving of assets with content-appropriate Content-Type header, allowing one to for example use GitHub for static asset hosting via this middle service.

The unfortunate part of this story is that RawGit is no longer working, therefore the usages of RawGit are also no longer working, finally meaning the already-provided searchMovies(query) just became un-provided.

This left with me a nice little pre-challenge: create searchMovies(query).

As this was timed I started off just hardcoding an array of movie titles, and making the function to Array.filter() the titles for titles that case-insensitively included the provided query, and returned them in a Promise.resolve().

I won't bore you with the rest of the autocomplete solution, but in summary it included caching of query results, debouncing of the actual searching, and highlighting of the query within the title via replacement.

I did have extra time at the end though, so I used it to actually make searchMovies(query) use an actual API: TVMaze. While I had used it before, of course I didn't remember how it was used, so after a quick perusing of the documentation, I copied the URL into my code, called encodeURIComponent() on my query, parsed the result, Array.map()ed into a simple {title: string, rating: number | null} object, and everything was working perfectly.

searchMovies

function searchData(query){
  return fetch('https://api.tvmaze.com/search/shows?q=' + encodeURIComponent(query))
    .then(r => r.json())
    .then(results => results.map(({ show: { name: title, rating: { average: rating }} }) => ({ title, rating })))
}