v.1.2.0

Local storage is now used so that the user doesn't have to request the videos every time the page is loaded.

Key changes in the pages/index.tsx file:

const requestLoadAll = () => {
  if (isStorageValid(48)) {
    setVideos(JSON.parse(localStorage.getItem('finishershub.videos')))
  } else {
    api.getAllClips((allEmbedUrls: string[]) => {
      const shuffledVideos = shuffle(allEmbedUrls)
      setVideos(shuffledVideos)
      writeVideosStorage(shuffledVideos)
    })
  }
}

useEffect(() => requestLoadAll(), [])

isStorageValid(hours elapsed: number) is an auxiliary function that determines if the local storage values are valid. In this version, the clips are re-requested if the storage is empty or if the values were written more than 48 hours ago. This is done inside utils/storage.ts

const isStorageValid = (hoursElapsed: number) => {
  const storedVideos = JSON.parse(localStorage.getItem('finishershub.videos'))
  const storedSavedTime = new Date(JSON.parse(localStorage.getItem('finishershub.videos-fetch-date'))).getTime()
  const expiredStorage = Math.abs(new Date().getTime() - storedSavedTime) / 36e5 > hoursElapsed

  if (storedVideos === null || storedSavedTime === null || expiredStorage) return false
  else return true
}

const writeVideosStorage = (videos: string[]) => {
  localStorage.setItem('finishershub.videos', JSON.stringify(videos))
  localStorage.setItem('finishershub.videos-fetch-date', JSON.stringify(new Date()))
}