From 2c542e454821e79ea85694deb215b85f78d5de1b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 18:18:55 -0500
Subject: [PATCH] Layout: make all UI routes have a static left sidebar

---
 .../features/ui/util/react_router_helpers.tsx | 48 ++++++++++---------
 app/soapbox/pages/admin_page.tsx              |  9 +---
 app/soapbox/pages/default_page.tsx            |  9 +---
 app/soapbox/pages/empty_page.tsx              |  6 +--
 app/soapbox/pages/home_page.tsx               |  9 +---
 app/soapbox/pages/profile_page.js             |  9 +---
 app/soapbox/pages/remote_instance_page.js     |  9 +---
 app/soapbox/pages/status_page.js              |  9 +---
 8 files changed, 40 insertions(+), 68 deletions(-)

diff --git a/app/soapbox/features/ui/util/react_router_helpers.tsx b/app/soapbox/features/ui/util/react_router_helpers.tsx
index 05e183816..766ac1691 100644
--- a/app/soapbox/features/ui/util/react_router_helpers.tsx
+++ b/app/soapbox/features/ui/util/react_router_helpers.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom';
 
+import SidebarNavigation from 'soapbox/components/sidebar-navigation';
+import { Layout } from 'soapbox/components/ui';
 import { useOwnAccount, useSettings } from 'soapbox/hooks';
 
 import BundleColumnError from '../components/bundle_column_error';
@@ -75,29 +77,19 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
     );
   };
 
-  const renderLoading = () => {
-    return (
-      <ColumnsArea layout={layout}>
-        <ColumnLoading />
-      </ColumnsArea>
-    );
-  };
+  const renderWithLayout = (children: JSX.Element) => (
+    <>
+      <Layout.Main>
+        {children}
+      </Layout.Main>
 
-  const renderForbidden = () => {
-    return (
-      <ColumnsArea layout={layout}>
-        <ColumnForbidden />
-      </ColumnsArea>
-    );
-  };
+      <Layout.Aside />
+    </>
+  );
 
-  const renderError = (props: any) => {
-    return (
-      <ColumnsArea layout={layout}>
-        <BundleColumnError {...props} />
-      </ColumnsArea>
-    );
-  };
+  const renderLoading   = () => renderWithLayout(<ColumnLoading />);
+  const renderForbidden = () => renderWithLayout(<ColumnForbidden />);
+  const renderError     = (props: any) => renderWithLayout(<BundleColumnError {...props} />);
 
   const loginRedirect = () => {
     const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`);
@@ -119,7 +111,19 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
     }
   }
 
-  return <Route {...rest} render={renderComponent} />;
+  const renderBody = (props: RouteComponentProps) => {
+    return (
+      <Layout>
+        <Layout.Sidebar>
+          <SidebarNavigation />
+        </Layout.Sidebar>
+
+        {renderComponent(props)}
+      </Layout>
+    );
+  };
+
+  return <Route {...rest} render={renderBody} />;
 };
 
 export {
diff --git a/app/soapbox/pages/admin_page.tsx b/app/soapbox/pages/admin_page.tsx
index f67454c91..909955abe 100644
--- a/app/soapbox/pages/admin_page.tsx
+++ b/app/soapbox/pages/admin_page.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import { Layout } from 'soapbox/components/ui';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -11,11 +10,7 @@ import LinkFooter from '../features/ui/components/link_footer';
 
 const AdminPage: React.FC = ({ children }) => {
   return (
-    <Layout>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
+    <>
       <Layout.Main>
         {children}
       </Layout.Main>
@@ -27,7 +22,7 @@ const AdminPage: React.FC = ({ children }) => {
 
         <LinkFooter />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 
diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx
index 90106d2c8..21c9026f5 100644
--- a/app/soapbox/pages/default_page.tsx
+++ b/app/soapbox/pages/default_page.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -17,11 +16,7 @@ const DefaultPage: React.FC = ({ children }) => {
   const features = useFeatures();
 
   return (
-    <Layout>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
+    <>
       <Layout.Main>
         {children}
       </Layout.Main>
@@ -44,7 +39,7 @@ const DefaultPage: React.FC = ({ children }) => {
         )}
         <LinkFooter key='link-footer' />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 
diff --git a/app/soapbox/pages/empty_page.tsx b/app/soapbox/pages/empty_page.tsx
index 3804b0812..f297c74c5 100644
--- a/app/soapbox/pages/empty_page.tsx
+++ b/app/soapbox/pages/empty_page.tsx
@@ -4,15 +4,13 @@ import { Layout } from '../components/ui';
 
 const EmptyPage: React.FC = ({ children }) => {
   return (
-    <Layout>
-      <Layout.Sidebar />
-
+    <>
       <Layout.Main>
         {children}
       </Layout.Main>
 
       <Layout.Aside />
-    </Layout>
+    </>
   );
 };
 
diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
index 31b26b657..baffc34da 100644
--- a/app/soapbox/pages/home_page.tsx
+++ b/app/soapbox/pages/home_page.tsx
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import {
   WhoToFollowPanel,
@@ -35,11 +34,7 @@ const HomePage: React.FC = ({ children }) => {
   const acct = account ? account.acct : '';
 
   return (
-    <Layout>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
+    <>
       <Layout.Main className='divide-y divide-gray-200 divide-solid sm:divide-none'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
@@ -99,7 +94,7 @@ const HomePage: React.FC = ({ children }) => {
         )}
         <LinkFooter key='link-footer' />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js
index b4b3854c2..68d2a1a66 100644
--- a/app/soapbox/pages/profile_page.js
+++ b/app/soapbox/pages/profile_page.js
@@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { Redirect, withRouter } from 'react-router-dom';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -127,11 +126,7 @@ class ProfilePage extends ImmutablePureComponent {
     }
 
     return (
-      <Layout>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
+      <>
         <Layout.Main>
           <Column label={account ? `@${getAcct(account, displayFqn)}` : null} withHeader={false}>
             <div className='space-y-4'>
@@ -171,7 +166,7 @@ class ProfilePage extends ImmutablePureComponent {
           )}
           <LinkFooter key='link-footer' />
         </Layout.Aside>
-      </Layout>
+      </>
     );
   }
 
diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js
index 2ff5e7c4f..187eab26a 100644
--- a/app/soapbox/pages/remote_instance_page.js
+++ b/app/soapbox/pages/remote_instance_page.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
@@ -32,11 +31,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
     const { children, params: { instance: host }, disclosed, isAdmin } = this.props;
 
     return (
-      <Layout>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
+      <>
         <Layout.Main>
           {children}
         </Layout.Main>
@@ -55,7 +50,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
           )}
           <LinkFooter key='link-footer' />
         </Layout.Aside>
-      </Layout>
+      </>
     );
   }
 
diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js
index d37542331..302d1238a 100644
--- a/app/soapbox/pages/status_page.js
+++ b/app/soapbox/pages/status_page.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import {
   WhoToFollowPanel,
@@ -33,11 +32,7 @@ class StatusPage extends ImmutablePureComponent {
     const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
 
     return (
-      <Layout>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
+      <>
         <Layout.Main>
           {children}
         </Layout.Main>
@@ -60,7 +55,7 @@ class StatusPage extends ImmutablePureComponent {
           )}
           <LinkFooter key='link-footer' />
         </Layout.Aside>
-      </Layout>
+      </>
     );
   }