moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SoapboxMount: break even more out into SoapboxHead

This commit is contained in:
Alex Gleason 2022-07-22 17:13:57 -05:00
parent dcd32e32a4
commit 7bbb9839ba
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 43 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app/soapbox/containers/soapbox.tsx
View File

@ -83,45 +83,21 @@ const SoapboxMount = () => {
const me = useAppSelector(state => state.me); const me = useAppSelector(state => state.me);
const instance = useAppSelector(state => state.instance); const instance = useAppSelector(state => state.instance);
const account = useOwnAccount(); const account = useOwnAccount();
const settings = useSettings();
const soapboxConfig = useSoapboxConfig(); const soapboxConfig = useSoapboxConfig();
const features = useFeatures(); const features = useFeatures();
const locale = useLocale();
const waitlisted = account && !account.source.get('approved', true); const waitlisted = account && !account.source.get('approved', true);
const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding); const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
const showOnboarding = account && !waitlisted && needsOnboarding; const showOnboarding = account && !waitlisted && needsOnboarding;
const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile; const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile;
const systemTheme = useSystemTheme();
const userTheme = settings.get('themeMode');
const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true; const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
const themeCss = generateThemeCss(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 }) => {
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
}; };
const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
'dyslexic': settings.get('dyslexicFont'),
'demetricator': settings.get('demetricator'),
});
const helmet = (
<Helmet>
<html lang={locale} className={classNames('h-full', { dark: darkMode })} />
<body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
{darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} />
</Helmet>
);
/** Render the onboarding flow. */ /** Render the onboarding flow. */
const renderOnboarding = () => ( const renderOnboarding = () => (
<BundleContainer fetchComponent={OnboardingWizard} loading={LoadingScreen}> <BundleContainer fetchComponent={OnboardingWizard} loading={LoadingScreen}>
@ -193,7 +169,6 @@ const SoapboxMount = () => {
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}> <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}> <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
<> <>
{helmet}
{renderBody()} {renderBody()}
<BundleContainer fetchComponent={NotificationsContainer}> <BundleContainer fetchComponent={NotificationsContainer}>
@ -266,13 +241,52 @@ const SoapboxLoad: React.FC<ISoapboxLoad> = ({ children }) => {
); );
}; };
interface ISoapboxHead {
children: React.ReactNode,
}
/** Injects metadata into site head with Helmet. */
const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
const locale = useLocale();
const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
const systemTheme = useSystemTheme();
const userTheme = settings.get('themeMode');
const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
const themeCss = generateThemeCss(soapboxConfig);
const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
'dyslexic': settings.get('dyslexicFont'),
'demetricator': settings.get('demetricator'),
});
return (
<>
<Helmet>
<html lang={locale} className={classNames('h-full', { dark: darkMode })} />
<body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
{darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} />
</Helmet>
{children}
</>
);
};
/** The root React node of the application. */ /** The root React node of the application. */
const Soapbox = () => { const Soapbox: React.FC = () => {
return ( return (
<Provider store={store}> <Provider store={store}>
<SoapboxLoad> <SoapboxHead>
<SoapboxMount /> <SoapboxLoad>
</SoapboxLoad> <SoapboxMount />
</SoapboxLoad>
</SoapboxHead>
</Provider> </Provider>
); );
}; };