Conditionally render Trends and WhoToFollow panels, fixes #87

app/gabsocial/features/compose/components/search_results.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
@@ -8,13 +9,19 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Hashtag from '../../../components/hashtag';
 import Icon from 'gabsocial/components/icon';
 import WhoToFollowPanel from '../../ui/components/who_to_follow_panel';
-// import TrendsPanel from '../../ui/components/trends_panel';
+import { getFeatures } from 'gabsocial/utils/features';
 
-export default @injectIntl
+const mapStateToProps = state => ({
+  features: getFeatures(state.get('instance')),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
 class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
     results: ImmutablePropTypes.map.isRequired,
+    features: PropTypes.node,
     intl: PropTypes.object.isRequired,
   };
 
@@ -23,14 +30,13 @@ class SearchResults extends ImmutablePureComponent {
   }
 
   render() {
-    const { results } = this.props;
+    const { results, features } = this.props;
     const { isSmallScreen } = this.state;
 
     if (results.isEmpty() && isSmallScreen) {
       return (
         <div className='search-results'>
-          <WhoToFollowPanel />
-          {/* <TrendsPanel /> */}
+          {features.suggestions && <WhoToFollowPanel />}
         </div>
       );
     }

app/gabsocial/features/ui/index.js

@@ -22,7 +22,6 @@ import { openModal } from '../../actions/modal';
 import { WrappedRoute } from './util/react_router_helpers';
 import UploadArea from './components/upload_area';
 import TabsBar from './components/tabs_bar';
-// import TrendsPanel from './components/trends_panel';
 import WhoToFollowPanel from './components/who_to_follow_panel';
 import LinkFooter from './components/link_footer';
 import ProfilePage from 'gabsocial/pages/profile_page';
@@ -136,7 +135,6 @@ const LAYOUT = {
       <LinkFooter key='1' />,
     ],
     RIGHT: [
-      // <TrendsPanel />,
       // <GroupSidebarPanel key='0' />
     ],
   },
@@ -146,7 +144,6 @@ const LAYOUT = {
     RIGHT: [
       // <GroupSidebarPanel key='0' />,
       <WhoToFollowPanel key='1' />,
-      // <TrendsPanel />,
       <LinkFooter key='2' />,
     ],
   },

app/gabsocial/pages/home_page.js

@@ -9,6 +9,7 @@ import UserPanel from '../features/ui/components/user_panel';
 import FundingPanel from '../features/ui/components/funding_panel';
 import ComposeFormContainer from '../features/compose/containers/compose_form_container';
 import Avatar from '../components/avatar';
+import { getFeatures } from 'gabsocial/utils/features';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
 
 const mapStateToProps = state => {
@@ -16,6 +17,7 @@ const mapStateToProps = state => {
   return {
     account: state.getIn(['accounts', me]),
     hasPatron: state.getIn(['soapbox', 'extensions', 'patron']),
+    features: getFeatures(state.get('instance')),
   };
 };
 
@@ -28,7 +30,7 @@ class HomePage extends ImmutablePureComponent {
   }
 
   render() {
-    const { children, account, hasPatron } = this.props;
+    const { children, account, hasPatron, features } = this.props;
 
     return (
       <div className='page'>
@@ -64,8 +66,8 @@ class HomePage extends ImmutablePureComponent {
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
                 {/* <GroupSidebarPanel /> */}
-                <TrendsPanel limit={3} />
-                <WhoToFollowPanel limit={5} />
+                {features.trends && <TrendsPanel limit={3} />}
+                {features.suggestions && <WhoToFollowPanel limit={5} />}
               </div>
             </div>
           </div>

app/gabsocial/pages/profile_page.js

@@ -6,13 +6,13 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Helmet from 'gabsocial/components/helmet';
 import HeaderContainer from '../features/account_timeline/containers/header_container';
 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 SignUpPanel from '../features/ui/components/sign_up_panel';
 import ProfileInfoPanel from '../features/ui/components/profile_info_panel';
 import { acctFull } from 'gabsocial/utils/accounts';
 import { fetchAccount, fetchAccountByUsername } from '../actions/accounts';
 import { fetchAccountIdentityProofs } from '../actions/identity_proofs';
+import { getFeatures } from 'gabsocial/utils/features';
 
 const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
   const accounts = state.getIn(['accounts']);
@@ -35,6 +35,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) =
     account,
     accountId,
     accountUsername,
+    features: getFeatures(state.get('instance')),
   };
 };
 
@@ -44,6 +45,7 @@ class ProfilePage extends ImmutablePureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map,
     accountUsername: PropTypes.string.isRequired,
+    features: PropTypes.node,
   };
 
   componentWillMount() {
@@ -58,7 +60,7 @@ class ProfilePage extends ImmutablePureComponent {
   }
 
   render() {
-    const { children, accountId, account, accountUsername } = this.props;
+    const { children, accountId, account, accountUsername, features } = this.props;
     if (!account) return null;
     const bg = account.getIn(['customizations', 'background']);
 
@@ -90,8 +92,7 @@ class ProfilePage extends ImmutablePureComponent {
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
                 <SignUpPanel />
-                <WhoToFollowPanel />
-                {/* <TrendsPanel /> */}
+                {features.suggestions && <WhoToFollowPanel />}
                 <LinkFooter />
               </div>
             </div>

app/gabsocial/pages/search_page.js

@@ -1,12 +1,17 @@
 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 TrendsPanel from '../features/ui/components/trends_panel';
 import LinkFooter from '../features/ui/components/link_footer';
 import SignUpPanel from '../features/ui/components/sign_up_panel';
+import { getFeatures } from 'gabsocial/utils/features';
 
-const SearchPage = ({ children }) => (
+const mapStateToProps = state => ({
+  features: getFeatures(state.get('instance')),
+});
+
+const SearchPage = ({ children, features }) => (
   <div className='page'>
     <div className='page__top'>
       <Header />
@@ -16,7 +21,6 @@ const SearchPage = ({ children }) => (
 
         <div className='columns-area__panels__pane columns-area__panels__pane--left'>
           <div className='columns-area__panels__pane__inner'>
-            {/* <TrendsPanel /> */}
             <LinkFooter />
           </div>
         </div>
@@ -30,7 +34,7 @@ const SearchPage = ({ children }) => (
         <div className='columns-area__panels__pane columns-area__panels__pane--right'>
           <div className='columns-area__panels__pane__inner'>
             <SignUpPanel />
-            <WhoToFollowPanel />
+            {features.suggestions && <WhoToFollowPanel />}
           </div>
         </div>
       </div>
@@ -40,6 +44,7 @@ const SearchPage = ({ children }) => (
 
 SearchPage.propTypes = {
   children: PropTypes.node,
+  features: PropTypes.node,
 };
 
-export default SearchPage;
+export default connect(mapStateToProps)(SearchPage);