Merge branch 'next-layout' into 'next'

Layout: make all UI routes have a static left sidebar

See merge request soapbox-pub/soapbox-fe!1274

app/soapbox/features/ui/index.tsx

@@ -13,7 +13,9 @@ import { fetchCustomEmojis } from 'soapbox/actions/custom_emojis';
 import { fetchMarker } from 'soapbox/actions/markers';
 import { register as registerPushNotifications } from 'soapbox/actions/push_notifications';
 import Icon from 'soapbox/components/icon';
+import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import ThumbNavigation from 'soapbox/components/thumb_navigation';
+import { Layout } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import AdminPage from 'soapbox/pages/admin_page';
 import DefaultPage from 'soapbox/pages/default_page';
@@ -26,6 +28,7 @@ import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
 import StatusPage from 'soapbox/pages/status_page';
 import { getAccessToken } from 'soapbox/utils/auth';
 import { getVapidKey } from 'soapbox/utils/auth';
+import { isStandalone } from 'soapbox/utils/state';
 
 import { fetchFollowRequests } from '../../actions/accounts';
 import { fetchReports, fetchUsers, fetchConfig } from '../../actions/admin';
@@ -170,7 +173,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
   // Ex: use /login instead of /auth, but redirect /auth to /login
   return (
     <Switch>
-      <WrappedRoute path='/login/external' component={ExternalLogin} publicRoute exact />
+      <WrappedRoute path='/login/external' page={EmptyPage} component={ExternalLogin} content={children} publicRoute exact />
       <WrappedRoute path='/email-confirmation' page={EmptyPage} component={EmailConfirmation} publicRoute exact />
       <WrappedRoute path='/logout' page={EmptyPage} component={LogoutPage} publicRoute exact />
 
@@ -344,6 +347,7 @@ const UI: React.FC = ({ children }) => {
   const dropdownMenuIsOpen = useAppSelector(state => state.dropdown_menu.get('openId') !== null);
   const accessToken = useAppSelector(state => getAccessToken(state));
   const streamingUrl = useAppSelector(state => state.instance.urls.get('streaming_api'));
+  const standalone = useAppSelector(isStandalone);
 
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault();
@@ -647,9 +651,15 @@ const UI: React.FC = ({ children }) => {
         <div className='z-10 flex flex-col'>
           <Navbar />
 
-          <SwitchingColumnsArea>
+          <Layout>
-            {children}
+            <Layout.Sidebar>
-          </SwitchingColumnsArea>
+              {!standalone && <SidebarNavigation />}
+            </Layout.Sidebar>
+
+            <SwitchingColumnsArea>
+              {children}
+            </SwitchingColumnsArea>
+          </Layout>
 
           {me && floatingActionButton}
 

app/soapbox/features/ui/util/react_router_helpers.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom';
 
+import { Layout } from 'soapbox/components/ui';
 import { useOwnAccount, useSettings } from 'soapbox/hooks';
 
 import BundleColumnError from '../components/bundle_column_error';
@@ -75,29 +76,19 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
     );
   };
 
-  const renderLoading = () => {
+  const renderWithLayout = (children: JSX.Element) => (
-    return (
+    <>
-      <ColumnsArea layout={layout}>
+      <Layout.Main>
-        <ColumnLoading />
+        {children}
-      </ColumnsArea>
+      </Layout.Main>
-    );
-  };
 
-  const renderForbidden = () => {
+      <Layout.Aside />
-    return (
+    </>
-      <ColumnsArea layout={layout}>
+  );
-        <ColumnForbidden />
-      </ColumnsArea>
-    );
-  };
 
-  const renderError = (props: any) => {
+  const renderLoading   = () => renderWithLayout(<ColumnLoading />);
-    return (
+  const renderForbidden = () => renderWithLayout(<ColumnForbidden />);
-      <ColumnsArea layout={layout}>
+  const renderError     = (props: any) => renderWithLayout(<BundleColumnError {...props} />);
-        <BundleColumnError {...props} />
-      </ColumnsArea>
-    );
-  };
 
   const loginRedirect = () => {
     const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`);

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>
+    </>
   );
 };
 

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 {
@@ -9,25 +8,23 @@ import {
   SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
+import { isStandalone } from 'soapbox/utils/state';
 
 import { Layout } from '../components/ui';
 
 const DefaultPage: React.FC = ({ children }) => {
   const me = useAppSelector(state => state.me);
+  const standalone = useAppSelector(isStandalone);
   const features = useFeatures();
 
   return (
-    <Layout>
+    <>
-      <Layout.Sidebar>
-        <SidebarNavigation />
-      </Layout.Sidebar>
-
       <Layout.Main>
         {children}
       </Layout.Main>
 
       <Layout.Aside>
-        {!me && (
+        {!me && !standalone && (
           <BundleContainer fetchComponent={SignUpPanel}>
             {Component => <Component key='sign-up-panel' />}
           </BundleContainer>
@@ -44,7 +41,7 @@ const DefaultPage: React.FC = ({ children }) => {
         )}
         <LinkFooter key='link-footer' />
       </Layout.Aside>
-    </Layout>
+    </>
   );
 };
 

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>
+    </>
   );
 };
 

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>
+    </>
   );
 };
 

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>
+      </>
     );
   }
 

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>
+      </>
     );
   }
 

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>
+      </>
     );
   }