clean up imports

components/calendar.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 
 import AppContext from "../context/app";
 

components/controls.jsx

@@ -1,12 +1,10 @@
-import React, { useEffect, useState, Fragment } from "react";
-
 export const ENDED = 0;
 export const PLAYING = 1;
 export const PAUSED = 2;
 
 const Controls = ({ playerState, onPause, onPlay, onRestart }) => {
   return (
-    <Fragment>
+    <>
       <div className="player-controls">
         {playerState === PLAYING && (
           <a onClick={onPause} title="Pause">
@@ -37,7 +35,7 @@ const Controls = ({ playerState, onPause, onPlay, onRestart }) => {
           </a>
         )}
       </div>
-    </Fragment>
+    </>
   );
 };
 

components/header.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const Header = () => {
   const [gifUrl, setGifUrl] = useState(null);

components/player.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, Fragment, useContext } from "react";
+import { useEffect, useState, Fragment, useContext } from "react";
 import youtubePlayer from "youtube-player";
 
 import AppContext from "../context/app";
 
-import Controls, { ENDED, PLAYING, PAUSED } from "./controls";
+import Controls, { ENDED, PAUSED } from "./controls";
 
 let player;
 

components/showdoordialog.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import { useState, useContext } from "react";
 
 import AppContext from "../context/app";
 import Player from "./player";

context/appProvider.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import AppContext from "./app";
 

pages/debug.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Head from "next/head";
 
 import AppProvider from "../context/appProvider";