Don't load GdprBanner unless configured
This commit is contained in:
parent
5c16747b0c
commit
4162808ce0
2 changed files with 14 additions and 14 deletions
|
@ -3,7 +3,7 @@ import React, { useState } from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
|
import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||||
import { useAppSelector, useInstance, useSoapboxConfig } from 'soapbox/hooks';
|
import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
|
||||||
|
|
||||||
const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
|
const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
|
||||||
|
|
||||||
|
@ -14,8 +14,7 @@ const GdprBanner: React.FC = () => {
|
||||||
const [slideout, setSlideout] = useState(false);
|
const [slideout, setSlideout] = useState(false);
|
||||||
|
|
||||||
const instance = useInstance();
|
const instance = useInstance();
|
||||||
const soapbox = useSoapboxConfig();
|
const { gdprUrl } = useSoapboxConfig();
|
||||||
const isLoggedIn = useAppSelector(state => !!state.me);
|
|
||||||
|
|
||||||
const handleAccept = () => {
|
const handleAccept = () => {
|
||||||
localStorage.setItem('soapbox:gdpr', 'true');
|
localStorage.setItem('soapbox:gdpr', 'true');
|
||||||
|
@ -23,9 +22,7 @@ const GdprBanner: React.FC = () => {
|
||||||
setTimeout(() => setShown(true), 200);
|
setTimeout(() => setShown(true), 200);
|
||||||
};
|
};
|
||||||
|
|
||||||
const showBanner = soapbox.gdpr && !isLoggedIn && !shown;
|
if (!shown) {
|
||||||
|
|
||||||
if (!showBanner) {
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,8 +44,8 @@ const GdprBanner: React.FC = () => {
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<HStack space={2} alignItems='center' className='flex-none'>
|
<HStack space={2} alignItems='center' className='flex-none'>
|
||||||
{soapbox.gdprUrl && (
|
{gdprUrl && (
|
||||||
<a href={soapbox.gdprUrl} tabIndex={-1} className='inline-flex'>
|
<a href={gdprUrl} tabIndex={-1} className='inline-flex'>
|
||||||
<Button theme='secondary'>
|
<Button theme='secondary'>
|
||||||
<FormattedMessage id='gdpr.learn_more' defaultMessage='Learn more' />
|
<FormattedMessage id='gdpr.learn_more' defaultMessage='Learn more' />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -14,6 +14,7 @@ import {
|
||||||
} from 'soapbox/features/ui/util/async-components';
|
} from 'soapbox/features/ui/util/async-components';
|
||||||
import {
|
import {
|
||||||
useAppSelector,
|
useAppSelector,
|
||||||
|
useLoggedIn,
|
||||||
useOwnAccount,
|
useOwnAccount,
|
||||||
useSoapboxConfig,
|
useSoapboxConfig,
|
||||||
} from 'soapbox/hooks';
|
} from 'soapbox/hooks';
|
||||||
|
@ -27,13 +28,13 @@ const UI = React.lazy(() => import('soapbox/features/ui'));
|
||||||
const SoapboxMount = () => {
|
const SoapboxMount = () => {
|
||||||
useCachedLocationHandler();
|
useCachedLocationHandler();
|
||||||
|
|
||||||
const me = useAppSelector(state => state.me);
|
const { isLoggedIn } = useLoggedIn();
|
||||||
const { account } = useOwnAccount();
|
const { account } = useOwnAccount();
|
||||||
const soapboxConfig = useSoapboxConfig();
|
const soapboxConfig = useSoapboxConfig();
|
||||||
|
|
||||||
const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
|
const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
|
||||||
const showOnboarding = account && needsOnboarding;
|
const showOnboarding = account && needsOnboarding;
|
||||||
const { redirectRootNoLogin } = soapboxConfig;
|
const { redirectRootNoLogin, gdpr } = soapboxConfig;
|
||||||
|
|
||||||
// @ts-ignore: I don't actually know what these should be, lol
|
// @ts-ignore: I don't actually know what these should be, lol
|
||||||
const shouldUpdateScroll = (prevRouterProps, { location }) => {
|
const shouldUpdateScroll = (prevRouterProps, { location }) => {
|
||||||
|
@ -46,7 +47,7 @@ const SoapboxMount = () => {
|
||||||
<CompatRouter>
|
<CompatRouter>
|
||||||
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
|
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
|
||||||
<Switch>
|
<Switch>
|
||||||
{(!me && redirectRootNoLogin) && (
|
{(!isLoggedIn && redirectRootNoLogin) && (
|
||||||
<Redirect exact from='/' to={redirectRootNoLogin} />
|
<Redirect exact from='/' to={redirectRootNoLogin} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
@ -73,9 +74,11 @@ const SoapboxMount = () => {
|
||||||
<ModalContainer />
|
<ModalContainer />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
||||||
<Suspense>
|
{(gdpr && !isLoggedIn) && (
|
||||||
<GdprBanner />
|
<Suspense>
|
||||||
</Suspense>
|
<GdprBanner />
|
||||||
|
</Suspense>
|
||||||
|
)}
|
||||||
|
|
||||||
<div id='toaster'>
|
<div id='toaster'>
|
||||||
<Toaster
|
<Toaster
|
||||||
|
|
Loading…
Reference in a new issue