import "./App.css";

import React, { useState } from "react";
import { Route } from "react-router-dom";

import CreateCompetition from "./containers/CreateCompetition/CreateCompetition";
import Explanation from "./containers/Explanation/Explanation";
import Login from "./containers/Login/Login";
import SelectCompetition from "./containers/SelectCompetition/SelectCompetition";
import SGonksPlatfrom from "./containers/SGonksPlatform/SGonksPlatform";

import HeaderBar from "./components/HeaderBar/HeaderBar";
import LandingPage from "./containers/LandingPage/LandingPage";
import Layout from "./hoc/Layout/Layout";
export const AuthContext = React.createContext();

function App() {
  const [userInfo, setUserInfo] = useState(null);
  const [compId, setCompId] = useState(null);
  
  React.useEffect(() => {
    const parsedId = Number(localStorage.getItem("compId" || null))
    setCompId(parsedId)
  }, [])

  let header = userInfo == null ? <HeaderBar/> : <HeaderBar loggedIn innerNav></HeaderBar>

  let pageRoute = <Route path="/" component={LandingPage}></Route>;
  const defaultAuth = {
    handleAuth: () => {
      fetch("./authentication")
        .then((response) => response.json())
        .then((data) => {
          setUserInfo(data);
          console.log("userInfo set");
        });
    },
    clearAuth: () => {
      setUserInfo(null);
      console.log("useInfo nullified")
    }
  }

  return (
    <div className="App">
      <AuthContext.Provider value={defaultAuth}>
        {header}
        <Layout>{pageRoute}</Layout>
      </AuthContext.Provider>
    </div>
  );
}

export default App;

@@ -1065,24 +1065,25 @@
 Route%3E;%0A
+%0A
   const 
 defaultA
@@ -1074,27 +1074,28 @@
   const 
-defaultAuth
+authHandlers
  = %7B%0A   
@@ -1479,19 +1479,20 @@
 ue=%7B
-defaultAuth
+authHandlers
 %7D%3E%0A 

Rename context