%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/Header.jsx |
import React, { useEffect, useState } from "react"; import { object } from "prop-types"; import { useLocation } from "react-router-dom"; import { withStyles } from "@material-ui/core/styles"; import { isLocalhost } from "utils"; import CountryDropdownContainer from "containers/CountryDropdownContainer"; import LanguageDropdownContainer from "containers/LanguageDropdownContainer"; import logoImg from "assets/images/logo-color-216x31.png"; import { getUniversalCookies } from "utils/cookies"; const styles = (theme) => ({ container: { margin: "0 auto", padding: "0 1rem", maxWidth: "1000px", }, wrapper: { height: "48px", display: "flex", justifyContent: "space-between", alignItems: "center", }, logoLink: { display: "flex", }, logo: { maxWidth: 80, objectFit: "contain", "@media only screen and (min-width: 400px)": { maxWidth: 150, }, }, localizationWrapper: { alignItems: "center", display: "flex", height: "24px", justifyContent: "flex-end", position: "relative", minWidth: 0, minHeight: 0, "& > *": { paddingLeft: 28, [theme.breakpoints.down("sm")]: { paddingLeft: 10, }, }, }, }); // In localhost the base changes as well, not only the path const getRedirectBase = () => (isLocalhost() ? "http://localhost:23456" : "/"); const getPath = () => window.location.pathname.substring(1)?.split("/")?.[1]; function Header(props) { const { classes } = props; const location = useLocation(); const [currentPage, setCurrentPage] = useState(getPath()); useEffect(() => { setCurrentPage(getPath()); }, [location]); const handleRecirect = (event) => { event.preventDefault(); window.location.href = getRedirectBase(); }; const countryCode = getUniversalCookies().get("epCountry"); const isCountrySelectHidden = countryCode && (currentPage === "sign-up" || currentPage === "migration"); return ( <div className={classes.container}> <header className={`modal-sign-in-header ${classes.wrapper}`}> <a href="/" onClick={handleRecirect} className={classes.logoLink} > <img src={logoImg} alt="EasyPark" width={216} height={31} className={classes.logo} /> </a> <div className={classes.localizationWrapper}> {!isCountrySelectHidden ? <CountryDropdownContainer /> : null } <LanguageDropdownContainer /> </div> </header> </div> ); } Header.propTypes = { classes: object.isRequired, }; export default withStyles(styles)(Header);