client/src/components/WithAuthUI.tsx

/*
 * Copyright (C) 2022 Savoir-faire Linux Inc.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this program.  If not, see
 * <https://www.gnu.org/licenses/>.
 */
import { Box, Grid, Paper, useMediaQuery } from '@mui/material';
import { Theme, useTheme } from '@mui/material/styles';
import React from 'react';
import { Navigate } from 'react-router-dom';

import { getAccessToken } from '../services/authQueries';
import JamiWelcomeLogo from './JamiWelcomeLogo';

export default function withAuthUI(WrappedComponent: React.FunctionComponent): React.FunctionComponent {
  return function WithAuthUI() {
    const borderRadius = 30;

    const theme: Theme = useTheme();

    const isDesktopOrLaptop: boolean = useMediaQuery(theme.breakpoints.up('md'));
    const isMobile: boolean = useMediaQuery(theme.breakpoints.only('xs'));

    const accessToken = getAccessToken();

    if (accessToken) {
      return <Navigate to="/conversation" replace />;
    }
    return (
      <Box
        sx={{
          width: '100%',
          height: '100%',
          display: 'flex',
          backgroundColor: `${isDesktopOrLaptop ? theme.palette.primary.dark : 'white'}`,
        }}
      >
        <Paper
          elevation={10}
          sx={{
            width: '100%',
            backgroundColor: 'white',
            margin: `${isDesktopOrLaptop ? theme.typography.pxToRem(100) : 0}`,
            borderRadius: `${isDesktopOrLaptop ? theme.typography.pxToRem(borderRadius) : 0}`,
          }}
        >
          <Grid container spacing={0} sx={{ height: '100%' }}>
            {!isMobile && (
              <Grid
                item
                xs={6}
                id="logo"
                sx={{
                  height: '100%',
                  backgroundColor: theme.palette.secondary.main,
                  borderRadius: `${
                    isDesktopOrLaptop
                      ? `${theme.typography.pxToRem(borderRadius)} 0 0 ${theme.typography.pxToRem(borderRadius)}`
                      : 0
                  }`, // To follow paper border-radius
                }}
              >
                <JamiWelcomeLogo logoWidth="90%" sx={{ height: '100%' }} />
              </Grid>
            )}
            <Grid item xs={isMobile ? 12 : 6} sx={{ height: '100%' }}>
              {isMobile && (
                <JamiWelcomeLogo
                  logoWidth={theme.typography.pxToRem(100)}
                  logoHeight={theme.typography.pxToRem(100)}
                  sx={{ mt: theme.typography.pxToRem(30), mb: theme.typography.pxToRem(20) }}
                />
              )}
              <Box sx={{ height: `${isMobile ? 'auto' : '100%'}` }}>
                <WrappedComponent />
              </Box>
            </Grid>
          </Grid>
        </Paper>
      </Box>
    );
  };
}