{"size": 3041, "ext": "js", "max_stars_repo_path": "client/src/App.js", "max_stars_repo_name": "Thenlie/turtle", "max_stars_repo_stars_event_min_datetime": "2022-03-21T00:28:52.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-21T00:28:52.000Z", "max_issues_repo_path": "client/src/App.js", "max_issues_repo_name": "Thenlie/turtle", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/App.js", "max_forks_repo_name": "Thenlie/turtle", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 34.1685393258, "max_line_length": 115, "alphanum_fraction": 0.5672476159}
import React, { useCallback, useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';
import Home from './pages/Home';
import Forms from './pages/Forms';
import Header from './components/Header';
import EndGame from './pages/EndGame';
import DailyGame from './pages/DailyGame';
import ContGame from './pages/ContGame';
import Profile from './pages/Profile';
import NotFound from './pages/NotFound';
import { Login, Logout, Signup } from './components/Forms';

const httpLink = createHttpLink({
  uri: '/graphql',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

function App() {
  const [user, setUser] = useState('');
  const [currentPage, setCurrentPage] = useState('home')

  const wrapperSetUser = useCallback(val => {
    setUser(val);
  }, [setUser]);

  const getUser = async () => {
    const response = await fetch('/auth/user');
    const data = await response.json();
    if (data.message) {
      setUser(null);
    } else {
      setUser(data);
    };
  };

  useEffect(() => {
    if (localStorage.getItem('turtleUID')) {
      setUser(localStorage.getItem('turtleUID'));
    } else {
      getUser();
    }
  }, []);
  
  return (
    <ApolloProvider client={client}>
      <div className='flex flex-col lg:flex-row min-h-full h-fit bg-slate-200'>
        <Router>
        {currentPage !== 'home' && currentPage !== 'form' &&
          <Header currentPage={currentPage} setCurrentPage={setCurrentPage}/>
        }
          <Routes>
            <Route exact path='*' element={<NotFound />} />
            <Route exact path='/' element={<Home user={user} setCurrentPage={setCurrentPage}/>} />
            <Route element={<Forms user={user} />} >
              {user === null ? (
                <>
                  <Route exact path='login' element={<Login user={user} setUser={wrapperSetUser} />} />
                  <Route exact path='signup' element={<Signup user={user} setUser={wrapperSetUser} />} />
                </>
              ) : (
                <Route exact path='logout' element={<Logout setUser={wrapperSetUser} />} />
              )
              }
            </Route>
            {user !== null && 
              <>
                <Route exact path='/daygame' element={<DailyGame user={user} setCurrentPage={setCurrentPage} />} />
                <Route exact path='/contgame' element={<ContGame setCurrentPage={setCurrentPage} />} />
                <Route exact path='/endgame' element={<EndGame user={user} />} />
                <Route path='/profile' element={<Profile user={user} setCurrentPage={setCurrentPage} />} >
                  <Route path='dashboard' element={<Profile />}/>
                  <Route path=':id'element={<Profile />} />
                </Route>
              </>
            }
          </Routes>
        </Router>
        </div>
    </ApolloProvider>
  );
}

export default App;
