From 83544470475fc3d5b016e7449d47eac989ced0c0 Mon Sep 17 00:00:00 2001
From: Alex Gleason
Date: Fri, 20 May 2022 12:51:57 -0500
Subject: [PATCH] SoapboxMount: refactor render to be DRY
---
app/soapbox/containers/soapbox.tsx | 179 +++++++++++++++--------------
1 file changed, 92 insertions(+), 87 deletions(-)
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 75767f2370..2d89cc9a23 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -127,18 +127,6 @@ const SoapboxMount = () => {
localeLoading,
].some(Boolean);
- if (showLoading) {
- return (
- <>
-
- {themeCss && }
-
-
-
-
- );
- }
-
const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
@@ -146,88 +134,105 @@ const SoapboxMount = () => {
'demetricator': settings.get('demetricator'),
});
- if (showOnboarding) {
- return (
-
-
-
-
- {themeCss && }
-
-
+ const helmet = (
+
+
+
+ {themeCss && }
+
+
+ );
-
-
-
-
-
-
-
- );
+ /** Render loading screen. */
+ const renderLoading = () => (
+ <>
+ {helmet}
+
+
+ );
+
+ /** Render the onboarding flow. */
+ const renderOnboarding = () => (
+ <>
+
+
+
+ );
+
+ /** Render the auth layout or UI. */
+ const renderSwitch = () => (
+
+
+
+ {/* Redirect signup route depending on Pepe enablement. */}
+ {/* We should prefer using /signup in components. */}
+ {pepeEnabled ? (
+
+ ) : (
+
+ )}
+
+ {waitlisted && (
+ <>
+ } />
+
+
+ {Component => }
+
+
+ )}
+
+ {!me && (singleUserMode
+ ?
+ : )}
+
+ {!me && (
+
+ )}
+
+
+
+
+
+ {(features.accountCreation && instance.registrations) && (
+
+ )}
+
+ {pepeEnabled && (
+
+ )}
+
+
+
+
+
+
+
+ );
+
+ /** Render the onboarding flow or UI. */
+ const renderBody = () => {
+ if (showOnboarding) {
+ return renderOnboarding();
+ } else {
+ return renderSwitch();
+ }
+ };
+
+ // intl is part of loading.
+ // It's important nothing in here depends on intl.
+ if (showLoading) {
+ return renderLoading();
}
return (
-
-
-
- {themeCss && }
-
-
-
+ {helmet}
- <>
-
-
-
-
- {/* Redirect signup route depending on Pepe enablement. */}
- {/* We should prefer using /signup in components. */}
- {pepeEnabled ? (
-
- ) : (
-
- )}
-
- {waitlisted && (
- <>
- } />
-
-
- {Component => }
-
-
- )}
-
- {!me && (singleUserMode
- ?
- : )}
-
- {!me && (
-
- )}
-
-
-
-
-
- {(features.accountCreation && instance.registrations) && (
-
- )}
-
- {pepeEnabled && (
-
- )}
-
-
-
-
-
-
-
-
-
+
+ {renderBody()}
+