GH-3734 Display password reset in auth modal for signed in user as well (#3764)

Add function to check if component should have modal in layout
This commit is contained in:
Deepak Kumar
2024-02-02 15:54:11 +05:30
committed by GitHub
parent 5fd982b009
commit 03f89f483c

View File

@ -1,4 +1,4 @@
import { ReactNode } from 'react'; import { ReactNode, useMemo } from 'react';
import { css, Global, useTheme } from '@emotion/react'; import { css, Global, useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
@ -15,9 +15,11 @@ import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage'; import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
import { AppPath } from '@/types/AppPath';
import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants'; import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize'; import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
const StyledLayout = styled.div` const StyledLayout = styled.div`
background: ${({ theme }) => theme.background.noisy}; background: ${({ theme }) => theme.background.noisy};
@ -71,6 +73,15 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
const isSettingsPage = useIsSettingsPage(); const isSettingsPage = useIsSettingsPage();
const theme = useTheme(); const theme = useTheme();
const widowsWidth = useScreenSize().width; const widowsWidth = useScreenSize().width;
const isMatchingLocation = useIsMatchingLocation();
const showAuthModal = useMemo(() => {
return (
(onboardingStatus && onboardingStatus !== OnboardingStatus.Completed) ||
isMatchingLocation(AppPath.ResetPassword)
);
}, [isMatchingLocation, onboardingStatus]);
return ( return (
<> <>
<Global <Global
@ -99,8 +110,7 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
> >
<StyledAppNavigationDrawer /> <StyledAppNavigationDrawer />
<StyledMainContainer> <StyledMainContainer>
{onboardingStatus && {showAuthModal ? (
onboardingStatus !== OnboardingStatus.Completed ? (
<> <>
<SignInBackgroundMockPage /> <SignInBackgroundMockPage />
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">