From 7bbb9839bab4ef095ebd9a5245dbdc14ba84c2f9 Mon Sep 17 00:00:00 2001
From: Alex Gleason
Date: Fri, 22 Jul 2022 17:13:57 -0500
Subject: [PATCH] SoapboxMount: break even more out into SoapboxHead
---
app/soapbox/containers/soapbox.tsx | 72 ++++++++++++++++++------------
1 file changed, 43 insertions(+), 29 deletions(-)
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index cbfb87d4a..21b80a503 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -83,45 +83,21 @@ const SoapboxMount = () => {
const me = useAppSelector(state => state.me);
const instance = useAppSelector(state => state.instance);
const account = useOwnAccount();
- const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
const features = useFeatures();
- const locale = useLocale();
const waitlisted = account && !account.source.get('approved', true);
const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
const showOnboarding = account && !waitlisted && needsOnboarding;
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 themeCss = generateThemeCss(soapboxConfig);
-
// @ts-ignore: I don't actually know what these should be, lol
const shouldUpdateScroll = (prevRouterProps, { location }) => {
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 = (
-
-
-
- {themeCss && }
- {darkMode && }
-
-
- );
-
/** Render the onboarding flow. */
const renderOnboarding = () => (
@@ -193,7 +169,6 @@ const SoapboxMount = () => {
<>
- {helmet}
{renderBody()}
@@ -266,13 +241,52 @@ const SoapboxLoad: React.FC = ({ children }) => {
);
};
+interface ISoapboxHead {
+ children: React.ReactNode,
+}
+
+/** Injects metadata into site head with Helmet. */
+const SoapboxHead: React.FC = ({ 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 (
+ <>
+
+
+
+ {themeCss && }
+ {darkMode && }
+
+
+
+ {children}
+
+ );
+};
+
/** The root React node of the application. */
-const Soapbox = () => {
+const Soapbox: React.FC = () => {
return (
-
-
-
+
+
+
+
+
);
};