%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/components/App.js |
import React, { lazy, Suspense, useEffect } from "react"; import { object, string, bool, func, } from "prop-types"; import { Route, Routes, Navigate, useLocation, } from "react-router-dom"; import { CssBaseline, Box } from "@material-ui/core"; import { withStyles } from "@material-ui/core/styles"; import { withTranslation } from "react-i18next"; import SignInContainer from "containers/SignInContainer"; import SignUpContainer from "containers/SignUpContainer"; import ForgotPasswordContainer from "containers/ForgotPassword/ForgotPasswordContainer"; import ResetPasswordContainer from "containers/ResetPasswordContainer"; import { MigrationPage } from "pages/migration"; import { setCountryCookie } from "utils"; import { setLanguageCookie } from "utils/languages"; import Header from "./Header"; import Footer from "./Footer"; import Head from "./Head"; import NoCountry from "./NoCountry"; import AlreadyLoggedIn from "./alreadyLoggedIn"; const Alert = lazy(() => import("./Alert")); const AlertModal = lazy(() => import("common/components/AlertModal/AlertModal")); const styles = () => ({ wrapper: { alignItems: "stretch", display: "flex", flexDirection: "column", textAlign: "center", // We have quite short pages and we might have a footer, // so let's make a layout, where the footer stays always at the bottom // of the viewport, exactly where it belongs minHeight: "100vh", }, headerWrapper: { flexShrink: 0, }, mainWrapper: { display: "flex", position: "relative", flexGrow: 1, flexShrink: 0, }, footerWrapper: { flexShrink: 0, }, main: { maxWidth: "850px", margin: "0 auto", width: "100%", }, }); function App({ t, classes, countryCode, isLoggedIn, isRedirectToMigration, }) { const location = useLocation(); const isMigrationPage = location.pathname.includes("/migration"); const isSignUpPage = location.pathname.includes("/sign-up"); const showIsAlreadyLoggedIn = isLoggedIn && !isMigrationPage && !isSignUpPage; const country = new URLSearchParams(window.location.search).get("country"); const lang = new URLSearchParams(window.location.search).get("lang"); useEffect(() => { if (country && lang) { setCountryCookie(country); setLanguageCookie(lang); } }, [country, lang]); return ( <CssBaseline> <div className={classes.wrapper}> <div className={classes.headerWrapper}> <Header /> </div> <div className={classes.mainWrapper}> <Box component="main" padding={4} className={classes.main} > {isRedirectToMigration ? t("migration.redirecting") : showIsAlreadyLoggedIn ? ( <AlreadyLoggedIn /> ) : countryCode ? ( <Routes> <Route path="/sign-up/*" element={( <> <Head path="/sign-up" /> <SignUpContainer /> </> )} /> <Route path="/forgot-password" element={( <> <Head path="/forgot-password" /> <ForgotPasswordContainer /> </> )} /> <Route path="/reset" element={( <> <Head path="/reset" /> <ResetPasswordContainer /> </> )} /> <Route path="/username" element={( <> <Head path="/username" /> <SignInContainer initLoginMethod="username" /> </> )} /> <Route exact path="/migration/success" element={( <> <Head path="/migration/success" /> <MigrationPage isMigrationComplete /> </> )} /> <Route path="/migration" element={( <> <Head path="/migration" /> {isLoggedIn ? ( <MigrationPage initLoginMethod="migration" /> ) : ( <Navigate to={{ pathname: "/" }} /> )} </> )} /> <Route path="/" element={( <> <Head path="/" /> <SignInContainer initLoginMethod="phone" /> </> )} /> </Routes> ) : ( <NoCountry /> )} </Box> </div> <div className={classes.footerWrapper}> <Footer /> </div> <Suspense fallback={<div />}> <Alert /> <AlertModal /> </Suspense> </div> </CssBaseline> ); } App.propTypes = { t: func.isRequired, classes: object.isRequired, countryCode: string, isLoggedIn: bool, isRedirectToMigration: bool.isRequired, }; App.defaultProps = { countryCode: null, isLoggedIn: false, }; export default withTranslation()(withStyles(styles)(App));