use jsx extension for react stuff

context/appProvider.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+
+import AppContext from "./app";
+
+const AppProvider = ({ debug = false, 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;