From 5ca4d4c3d77e9f6bba0c13f10691316a3a6d6f5f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 16 Jun 2021 13:34:54 -0500
Subject: [PATCH] Make right sidebar available on most pages

---
 app/soapbox/features/ui/index.js              | 94 ++++++++++++-------
 .../features/ui/util/react_router_helpers.js  |  2 +-
 app/soapbox/pages/home_page.js                | 33 ++-----
 app/soapbox/pages/search_page.js              | 50 ----------
 4 files changed, 69 insertions(+), 110 deletions(-)
 delete mode 100644 app/soapbox/pages/search_page.js

diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 1acabaae3..3dffbf238 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -27,10 +27,15 @@ import TabsBar from './components/tabs_bar';
 import LinkFooter from './components/link_footer';
 import FeaturesPanel from './components/features_panel';
 import ProfilePage from 'soapbox/pages/profile_page';
+import UserPanel from './components/user_panel';
+import WhoToFollowPanel from './components/who_to_follow_panel';
+import TrendsPanel from './components/trends_panel';
+import PromoPanel from './components/promo_panel';
+import FundingPanel from './components/funding_panel';
+import CryptoDonatePanel from 'soapbox/features/crypto_donate/components/crypto_donate_panel';
 // import GroupsPage from 'soapbox/pages/groups_page';
 // import GroupPage from 'soapbox/pages/group_page';
 // import GroupSidebarPanel from '../groups/sidebar_panel';
-import SearchPage from 'soapbox/pages/search_page';
 import HomePage from 'soapbox/pages/home_page';
 import AdminPage from 'soapbox/pages/admin_page';
 import SidebarMenu from '../../components/sidebar_menu';
@@ -41,6 +46,8 @@ import { isStaff } from 'soapbox/utils/accounts';
 import ChatPanes from 'soapbox/features/chats/components/chat_panes';
 import ProfileHoverCard from 'soapbox/components/profile_hover_card';
 import { getAccessToken } from 'soapbox/utils/auth';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { getFeatures } from 'soapbox/utils/features';
 
 import {
   Status,
@@ -101,6 +108,43 @@ import '../../components/status';
 
 const isMobile = width => width <= 1190;
 
+const makeLayouts = state => {
+  const me = state.get('me');
+  const soapbox = getSoapboxConfig(state);
+
+  const hasPatron = soapbox.getIn(['extensions', 'patron', 'enabled']);
+  const hasCrypto = typeof soapbox.getIn(['cryptoAddresses', 0, 'ticker']) === 'string';
+  const cryptoLimit = soapbox.getIn(['cryptoDonatePanel', 'limit']);
+  const features = getFeatures(state.get('instance'));
+
+  const EMPTY = {
+    LEFT: null,
+    RIGHT: null,
+  };
+
+  const DEFAULT = {
+    LEFT: EMPTY.LEFT,
+    RIGHT: [
+      features.trends && <TrendsPanel limit={3} key='trends-panel' />,
+      features.suggestions && <WhoToFollowPanel limit={5} key='wtf-panel' />,
+      <FeaturesPanel key='features-panel' />,
+      <PromoPanel key='promo-panel' />,
+      <LinkFooter key='link-footer' />,
+    ],
+  };
+
+  const HOME = {
+    LEFT: [
+      <UserPanel accountId={me} key='user-panel' />,
+      hasPatron && <FundingPanel key='funding-panel' />,
+      hasCrypto && <CryptoDonatePanel limit={cryptoLimit} key='crypto-panel' />,
+    ],
+    RIGHT: DEFAULT.RIGHT,
+  };
+
+  return { EMPTY, DEFAULT, HOME };
+};
+
 const messages = defineMessages({
   beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave.' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
@@ -119,6 +163,7 @@ const mapStateToProps = state => {
     streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
     me,
     account,
+    layouts: makeLayouts(state),
   };
 };
 
@@ -150,33 +195,13 @@ const keyMap = {
   toggleSensitive: 'h',
 };
 
-const LAYOUT = {
-  EMPTY: {
-    LEFT: null,
-    RIGHT: null,
-  },
-  DEFAULT: {
-    LEFT: null,
-    RIGHT: [
-      <FeaturesPanel key='0' />,
-      <LinkFooter key='1' />,
-    ],
-  },
-  STATUS: {
-    TOP: null,
-    LEFT: null,
-    RIGHT: [
-      <LinkFooter key='2' />,
-    ],
-  },
-};
-
 class SwitchingColumnsArea extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
     location: PropTypes.object,
     onLayoutChange: PropTypes.func.isRequired,
+    layouts: PropTypes.object.isRequired,
   };
 
   state = {
@@ -205,7 +230,7 @@ class SwitchingColumnsArea extends React.PureComponent {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, layouts: LAYOUT } = this.props;
 
     return (
       <Switch>
@@ -214,10 +239,10 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/auth/edit' layout={LAYOUT.DEFAULT} component={SecurityForm} exact />
         <WrappedRoute path='/auth/mfa' layout={LAYOUT.DEFAULT} component={MfaForm} exact />
 
-        <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
-        <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />
-        <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />
-        <WrappedRoute path='/timeline/:instance' exact page={HomePage} component={RemoteTimeline} content={children} />
+        <WrappedRoute path='/' exact page={HomePage} layout={LAYOUT.HOME} component={HomeTimeline} content={children} />
+        <WrappedRoute path='/timeline/local' exact page={HomePage} layout={LAYOUT.HOME} component={CommunityTimeline} content={children} publicRoute />
+        <WrappedRoute path='/timeline/fediverse' exact page={HomePage} layout={LAYOUT.HOME} component={PublicTimeline} content={children} publicRoute />
+        <WrappedRoute path='/timeline/:instance' exact page={HomePage} layout={LAYOUT.HOME} component={RemoteTimeline} content={children} />
         <WrappedRoute path='/messages' layout={LAYOUT.DEFAULT} component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 
         {/*
@@ -237,7 +262,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <Redirect from='/main/friends' to='/' />
         <Redirect from='/tag/:id' to='/tags/:id' />
         <Redirect from='/user-settings' to='/settings/profile' />
-        <WrappedRoute path='/notice/:statusId' publicRoute exact layout={LAYOUT.STATUS} component={Status} content={children} />
+        <WrappedRoute path='/notice/:statusId' publicRoute exact layout={LAYOUT.DEFAULT} component={Status} content={children} />
         <Redirect from='/users/:username' to='/@:username' />
         <Redirect from='/home' to='/' />
 
@@ -248,12 +273,12 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/tags/:id' publicRoute component={HashtagTimeline} content={children} />
 
         <WrappedRoute path='/lists' layout={LAYOUT.DEFAULT} component={Lists} content={children} />
-        <WrappedRoute path='/list/:id' page={HomePage} component={ListTimeline} content={children} />
+        <WrappedRoute path='/list/:id' page={HomePage} layout={LAYOUT.DEFAULT} component={ListTimeline} content={children} />
         <WrappedRoute path='/bookmarks' layout={LAYOUT.DEFAULT} component={Bookmarks} content={children} />
 
         <WrappedRoute path='/notifications' layout={LAYOUT.DEFAULT} component={Notifications} content={children} />
 
-        <WrappedRoute path='/search' publicRoute page={SearchPage} component={Search} content={children} />
+        <WrappedRoute path='/search' publicRoute layout={LAYOUT.DEFAULT} component={Search} content={children} />
 
         <WrappedRoute path='/chats' exact layout={LAYOUT.DEFAULT} component={ChatIndex} content={children} />
         <WrappedRoute path='/chats/:chatId' layout={LAYOUT.DEFAULT} component={ChatRoom} content={children} />
@@ -271,8 +296,8 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/@:username/tagged/:tag' exact component={AccountTimeline} page={ProfilePage} content={children} />
         <WrappedRoute path='/@:username/favorites' component={FavouritedStatuses} page={ProfilePage} content={children}  />
         <WrappedRoute path='/@:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
-        <WrappedRoute path='/@:username/posts/:statusId' publicRoute exact layout={LAYOUT.STATUS} component={Status} content={children} />
-        <WrappedRoute path='/@:username/posts/:statusId/reblogs' layout={LAYOUT.STATUS} component={Reblogs} content={children} />
+        <WrappedRoute path='/@:username/posts/:statusId' publicRoute exact layout={LAYOUT.DEFAULT} component={Status} content={children} />
+        <WrappedRoute path='/@:username/posts/:statusId/reblogs' layout={LAYOUT.DEFAULT} component={Reblogs} content={children} />
 
         <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 
@@ -320,6 +345,7 @@ class UI extends React.PureComponent {
     me: SoapboxPropTypes.me,
     streamingUrl: PropTypes.string,
     account: PropTypes.object,
+    layouts: PropTypes.object.isRequired,
   };
 
   state = {
@@ -625,7 +651,7 @@ class UI extends React.PureComponent {
   render() {
     const { streamingUrl } = this.props;
     const { draggingOver, mobile } = this.state;
-    const { intl, children, isComposing, location, dropdownMenuIsOpen, me } = this.props;
+    const { intl, children, isComposing, location, dropdownMenuIsOpen, me, layouts } = this.props;
 
     if (me === null || !streamingUrl) return null;
 
@@ -673,7 +699,7 @@ class UI extends React.PureComponent {
       <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
         <div className={classnames} ref={this.setRef} style={style}>
           <TabsBar />
-          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
+          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} layouts={layouts}>
             {children}
           </SwitchingColumnsArea>
 
diff --git a/app/soapbox/features/ui/util/react_router_helpers.js b/app/soapbox/features/ui/util/react_router_helpers.js
index 0b2850849..cbcde2708 100644
--- a/app/soapbox/features/ui/util/react_router_helpers.js
+++ b/app/soapbox/features/ui/util/react_router_helpers.js
@@ -38,7 +38,7 @@ class WrappedRoute extends React.Component {
         <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
           {Component =>
             (
-              <Page params={match.params} {...componentParams}>
+              <Page params={match.params} layout={layout} {...componentParams}>
                 <Component params={match.params} {...componentParams}>
                   {content}
                 </Component>
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index da90bed71..16e66abf7 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -1,30 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
-import TrendsPanel from '../features/ui/components/trends_panel';
-import LinkFooter from '../features/ui/components/link_footer';
-import FeaturesPanel from '../features/ui/components/features_panel';
-import PromoPanel from '../features/ui/components/promo_panel';
-import UserPanel from '../features/ui/components/user_panel';
-import FundingPanel from '../features/ui/components/funding_panel';
-import CryptoDonatePanel from 'soapbox/features/crypto_donate/components/crypto_donate_panel';
 import ComposeFormContainer from '../features/compose/containers/compose_form_container';
 import Avatar from '../components/avatar';
-import { getFeatures } from 'soapbox/utils/features';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
 const mapStateToProps = state => {
   const me = state.get('me');
-  const soapbox = getSoapboxConfig(state);
   return {
     me,
     account: state.getIn(['accounts', me]),
-    hasPatron: soapbox.getIn(['extensions', 'patron', 'enabled']),
-    hasCrypto: typeof soapbox.getIn(['cryptoAddresses', 0, 'ticker']) === 'string',
-    cryptoLimit: soapbox.getIn(['cryptoDonatePanel', 'limit']),
-    features: getFeatures(state.get('instance')),
   };
 };
 
@@ -36,8 +21,13 @@ class HomePage extends ImmutablePureComponent {
     this.composeBlock = React.createRef();
   }
 
+  static defaultProps = {
+    layout: { LEFT: null, RIGHT: null },
+  }
+
   render() {
-    const { me, children, account, hasPatron, features, hasCrypto, cryptoLimit } = this.props;
+    const { me, children, account } = this.props;
+    const LAYOUT = this.props.layout || this.defaultProps.layout;
 
     return (
       <div className='page'>
@@ -46,9 +36,7 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
               <div className='columns-area__panels__pane__inner'>
-                <UserPanel accountId={me} />
-                {hasPatron && <FundingPanel />}
-                {hasCrypto && <CryptoDonatePanel limit={cryptoLimit} />}
+                {LAYOUT.LEFT}
               </div>
             </div>
 
@@ -71,12 +59,7 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                {/* <GroupSidebarPanel /> */}
-                {features.trends && <TrendsPanel limit={3} />}
-                {features.suggestions && <WhoToFollowPanel limit={5} />}
-                <FeaturesPanel />
-                <PromoPanel />
-                <LinkFooter />
+                {LAYOUT.RIGHT}
               </div>
             </div>
           </div>
diff --git a/app/soapbox/pages/search_page.js b/app/soapbox/pages/search_page.js
deleted file mode 100644
index 58a902b5a..000000000
--- a/app/soapbox/pages/search_page.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import Header from '../features/search/components/header';
-import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
-import LinkFooter from '../features/ui/components/link_footer';
-import SignUpPanel from '../features/ui/components/sign_up_panel';
-import { getFeatures } from 'soapbox/utils/features';
-
-const mapStateToProps = state => ({
-  features: getFeatures(state.get('instance')),
-});
-
-const SearchPage = ({ children, features }) => (
-  <div className='page'>
-    <div className='page__top'>
-      <Header />
-    </div>
-    <div className='page__columns'>
-      <div className='columns-area__panels'>
-
-        <div className='columns-area__panels__pane columns-area__panels__pane--left'>
-          <div className='columns-area__panels__pane__inner'>
-            <LinkFooter />
-          </div>
-        </div>
-
-        <div className='columns-area__panels__main'>
-          <div className='columns-area columns-area--mobile'>
-            {children}
-          </div>
-        </div>
-
-        <div className='columns-area__panels__pane columns-area__panels__pane--right'>
-          <div className='columns-area__panels__pane__inner'>
-            <SignUpPanel />
-            {features.suggestions && <WhoToFollowPanel />}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-SearchPage.propTypes = {
-  children: PropTypes.node,
-  features: PropTypes.object,
-};
-
-export default connect(mapStateToProps)(SearchPage);