import React, { Suspense } from 'react';
import {
  BrowserRouter,
  Switch,
  Route
} from 'react-router-dom';
import { UserProvider } from '../Contexts/UserContext';
import { ProtectedRoute } from '../Routes/ProtectedRoute';
import { MessageBar } from '../MessageBar';

const SignInForm = React.lazy(() => import('../SignInForm'));
const SignUpForm = React.lazy(() => import('../SignUpForm'));
const FileUploadForm = React.lazy(() => import('../FileUploadForm'));

function App() {
  return (
    <Suspense fallback={"Loading..."}>
      <UserProvider>
        <MessageBar />
        <BrowserRouter>
          <Switch>
            <Route path="/" exact>
              <SignInForm />
            </Route>
            <Route path="/signup">
              <SignUpForm />
            </Route>
            <ProtectedRoute path="/upload" render={() => <FileUploadForm />} />
          </Switch>    
        </BrowserRouter>
      </UserProvider>
    </Suspense>
  );
}

export default App;