text: import React from 'react'
  import { useState, useEffect } from 'react'
  import logo from '../images/logo_mid.png'
  import { initializeApp } from "firebase/app";
  import { doc, getDocs, collection, getFirestore } from "firebase/firestore";
  
  import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
  // Initialize Firebase
  import { firebaseConfig } from "../firebase";
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const db = getFirestore()
  
  
  
  export default function Admin() {
  
    const [loaded, setLoaded] = useState(false);
  
    const [logged, setLog] = useState(false);
    const [list, setL] = useState([])
    useEffect(() => {
  
    
    
      const a = []
    
      getDocs(collection(db, "Dates")).then(querySnapshot => {
        querySnapshot.forEach((doc) => {
  
  
          // TODO display correctly here and place styles
          let large_ittems = [doc.id]
          let x = doc.data().Times
          for (var i in x){
            let ittems = [i]
            for (var j in x[i]) {
              ittems.push(
                <div>
                  <div>{j}</div>
                  <div>{x[i][j]}</div>
                </div>
              )
            }
            large_ittems.push(ittems)
          }
          a.push(large_ittems)
        })
        setL(a)
    
        console.log(list)
      
        setLoaded(true)
      })
  
    
    
    
    
    
    }, []);
  
  
   
  
  
  
  
    if (!logged) {
      if (loaded) {
  
        return <div>{list}</div>
      } else {
        return (
          <div>
            <h1>Loading...</h1>
          </div>
        )
      }
    } else {
      return (
        <div className="flex flex-col items-center justify-evenly h-screen">
          <img src={logo} alt="logo" className="w-50" />
          <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col container mx-auto">
            <div className="mb-4">
              <label className="block text-grey-darker text-sm font-bold mb-2" for="email">
                Email
              </label>
              <input className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" id="email" type="text" placeholder="Email" />
            </div>
            <div className="mb-6">
              <label className="block text-grey-darker text-sm font-bold mb-2" for="password">
                Password
              </label>
              <input className="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************" />
            </div>
            <div className="flex items-center justify-between">
              <button className="bg-orange-300 hover:bg-orange-400 text-white font-bold py-2 px-4 rounded" type="button" onClick={
                () => {
                  let email = document.getElementById("email").value
                  let password = document.getElementById("password").value
                  console.log(email, password)
                  signInWithEmailAndPassword(auth, email, password)
                    .then((userCredential) => {
                      const user = userCredential.user;
                      setLog(true)
                    })
                    .catch((error) => {
                      const errorCode = error.code;
                      const errorMessage = error.message;
                      alert(errorCode, errorMessage)
                    });
                }
              } >
                Sign In
              </button>
            </div>
          </div>
        </div>
      )
  
    }
  
  }
  