advcal/context/appProvider.js

import React, { useEffect, useState } from "react";

import AppContext from "./app";

const AppProvider = ({ debug, children }) => {
  const [songs, setSongs] = useState(null);
  const [openSong, setOpenSong] = useState(null);

  const URL = debug ? "/api/songs?unlock=true" : "/api/songs";

  useEffect(() => {
    async function getSongs() {
      const response = await fetch(URL);

      if (!response.ok) {
        setError(`HTTP Status of youtube request: ${response.status}`);
        return;
      }

      const { songs } = await response.json();
      setSongs(songs);
    }

    getSongs();
  }, []);

  const openDoor = index => {
    if (!Number.isInteger(index) || !songs[index]) {
      setOpenSong(null);
    }

    setOpenSong(songs[index]);
  };

  return (
    <AppContext.Provider
      value={{
        loading: !songs,
        songs,
        openSong,
        openSongIndex: songs && songs.indexOf(openSong),
        openDoor
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

export default AppProvider;