import React, { useEffect } from "react";
import { Switch, Route, Redirect, useHistory } from "react-router-dom";

import { Login } from "auth/Login";
import { useAuth, TokenContext } from "auth/useAuth";

import { Page } from "layout/Page";
import { FileList } from "file/FileList";

export function App() {
  const { token, login } = useAuth();
  const root = token?.user.rootFolder;
  const history = useHistory();

  useEffect(() => {
    if (root) {
      history.push(`/folder/${root}`);
    }
  }, [history, root]);

  return (
    <Switch>
      <Route path="/login">
        <Login login={login} />
      </Route>
      <Route>
        {token !== null ? (
          <TokenContext.Provider value={token}>
            <Page>
              <Switch>
                <Route path="/folder/:id">
                  <FileList />
                </Route>
              </Switch>
            </Page>
          </TokenContext.Provider>
        ) : (
          <Redirect to="/login" />
        )}
      </Route>
    </Switch>
  );
}