import { CssBaseline, ThemeProvider } from "@material-ui/core"; import { SnackbarNotificationProvider } from "./snackbarNotification"; import { createTheme } from "./theme"; import { Route, BrowserRouter as Router, Switch, Redirect, } from "react-router-dom"; import { APP_LANDING, SIGNIN_ROUTE, SIGNUP_ROUTE, FIREBASE_CONFIG, AUTH_ACTION_PATH, } from "./constants"; import SigninSignupPage from "./auth/SigninSignupPage"; import PrivateRoute from "./auth/PrivateRoute"; import { SessionProvider } from "./auth/useSession"; import firebase from "firebase"; import AuthAction from "./auth/authActions/AuthAction"; import { Suspense } from "react"; import LandingPage from "./landing/LandingPage"; // init firebase const firebaseApp = firebase.initializeApp(FIREBASE_CONFIG); // init and expose db export const db = firebaseApp.firestore(); const App = (): JSX.Element => { return ( <ThemeProvider theme={createTheme("light")}> <CssBaseline /> <SnackbarNotificationProvider> <SessionProvider> <Router> <Suspense fallback={<div />}> <Switch> <Route path={SIGNIN_ROUTE}> <SigninSignupPage variant="signin" /> </Route> <Route path={SIGNUP_ROUTE}> <SigninSignupPage variant="signup" /> </Route> <Route path={AUTH_ACTION_PATH}> <AuthAction /> </Route> <PrivateRoute path={APP_LANDING}> <LandingPage /> </PrivateRoute> <Redirect to={APP_LANDING} /> </Switch> </Suspense> </Router> </SessionProvider> </SnackbarNotificationProvider> </ThemeProvider> ); }; export default App;