Rework DrawerResults to make them closer to upstream

app/javascript/flavours/glitch/features/compose/index.js

@@ -16,10 +16,11 @@ import DrawerAccount from './account';
 import DrawerHeader from './header';
 import DrawerResults from './results';
 import SearchContainer from './containers/search_container';
+import spring from 'react-motion/lib/spring';
 
 //  Utils.
 import { me, mascot } from 'flavours/glitch/util/initial_state';
-import { wrap } from 'flavours/glitch/util/redux_helpers';
+import Motion from 'flavours/glitch/util/optional_motion';
 
 //  Messages.
 const messages = defineMessages({
@@ -27,13 +28,14 @@ const messages = defineMessages({
 });
 
 //  State mapping.
-const mapStateToProps = state => ({
+const mapStateToProps = (state, ownProps) => ({
   account: state.getIn(['accounts', me]),
   columns: state.getIn(['settings', 'columns']),
   elefriend: state.getIn(['compose', 'elefriend']),
   results: state.getIn(['search', 'results']),
   searchHidden: state.getIn(['search', 'hidden']),
   submitted: state.getIn(['search', 'submitted']),
+  showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
   unreadNotifications: state.getIn(['notifications', 'unread']),
   showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
 });
@@ -58,6 +60,7 @@ class Compose extends React.PureComponent {
     intl: PropTypes.object.isRequired,
     isSearchPage: PropTypes.bool,
     multiColumn: PropTypes.bool,
+    showSearch: PropTypes.bool,
 
     //  State props.
     account: ImmutablePropTypes.map,
@@ -90,6 +93,7 @@ class Compose extends React.PureComponent {
       isSearchPage,
       unreadNotifications,
       showNotificationsBadge,
+      showSearch,
     } = this.props;
     const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
 
@@ -117,11 +121,13 @@ class Compose extends React.PureComponent {
             )}
           </div>}
 
-          {(multiColumn || isSearchPage) &&
-            <DrawerResults
-              results={results}
-              visible={submitted && !searchHidden}
-            />}
+          <Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
+            {({ x }) => (
+              <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
+                <DrawerResults results={results} visible={submitted && !searchHidden} />
+              </div>
+            )}
+          </Motion>
         </div>
       </div>
     );

app/javascript/flavours/glitch/features/compose/results/index.js

@@ -1,12 +1,9 @@
 //  Package imports.
 import PropTypes from 'prop-types';
 import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import {
-  FormattedMessage,
-  defineMessages,
-} from 'react-intl';
-import spring from 'react-motion/lib/spring';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 //  Components.
@@ -15,103 +12,67 @@ import AccountContainer from 'flavours/glitch/containers/account_container';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 import Hashtag from 'flavours/glitch/components/hashtag';
 
-//  Utils.
-import Motion from 'flavours/glitch/util/optional_motion';
-
 //  Messages.
-const messages = defineMessages({
-  total: {
-    defaultMessage: '{count, number} {count, plural, one {result} other {results}}',
-    id: 'search_results.total',
-  },
-});
-
 //  The component.
-export default function DrawerResults ({
-  results,
-  visible,
-}) {
-  const accounts = results ? results.get('accounts') : null;
-  const statuses = results ? results.get('statuses') : null;
-  const hashtags = results ? results.get('hashtags') : null;
+export default @injectIntl
+class DrawerResults extends ImmutablePureComponent {
+
+  static propTypes = {
+    results: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { intl, results } = this.props;
+
+    let accounts, statuses, hashtags;
+    let count = 0;
+
+    if (results.get('accounts') && results.get('accounts').size > 0) {
+      count   += results.get('accounts').size;
+      accounts = (
+        <section>
+          <h5><Icon icon='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
 
-  //  This gets the total number of items.
-  const count = [accounts, statuses, hashtags].reduce(function (size, item) {
-    if (item && item.size) {
-      return size + item.size;
+          {results.get('accounts').map(accountId => <AccountContainer id={accountId} key={accountId} />)}
+        </section>
+      );
     }
-    return size;
-  }, 0);
 
-  //  The result.
-  return (
-    <Motion
-      defaultStyle={{ x: -100 }}
-      style={{
-        x: spring(visible ? 0 : -100, {
-          stiffness: 210,
-          damping: 20,
-        }),
-      }}
-    >
-      {({ x }) => (
-        <div
-          className='drawer--results'
-          style={{
-            transform: `translateX(${x}%)`,
-            visibility: x === -100 ? 'hidden' : 'visible',
-          }}
-        >
-          <header>
-            <Icon icon='search' fixedWidth />
-            <FormattedMessage
-              {...messages.total}
-              values={{ count }}
-            />
-          </header>
-          {accounts && accounts.size ? (
-            <section>
-              <h5><Icon icon='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
+    if (results.get('statuses') && results.get('statuses').size > 0) {
+      count   += results.get('statuses').size;
+      statuses = (
+        <section>
+          <h5><Icon icon='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
 
-              {accounts.map(
-                accountId => (
-                  <AccountContainer
-                    id={accountId}
-                    key={accountId}
-                  />
-                )
-              )}
-            </section>
-          ) : null}
-          {statuses && statuses.size ? (
-            <section>
-              <h5><Icon icon='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
+          {results.get('statuses').map(statusId => <StatusContainer id={statusId} key={statusId}/>)}
+        </section>
+      );
+    }
 
-              {statuses.map(
-                statusId => (
-                  <StatusContainer
-                    id={statusId}
-                    key={statusId}
-                  />
-                )
-              )}
-            </section>
-          ) : null}
-          {hashtags && hashtags.size ? (
-            <section>
-              <h5><Icon icon='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
+    if (results.get('hashtags') && results.get('hashtags').size > 0) {
+      count += results.get('hashtags').size;
+      hashtags = (
+        <section>
+          <h5><Icon icon='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
 
-              {hashtags.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
-            </section>
-          ) : null}
-        </div>
-      )}
-    </Motion>
-  );
-}
+          {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
+        </section>
+      );
+    }
 
-//  Props.
-DrawerResults.propTypes = {
-  results: ImmutablePropTypes.map,
-  visible: PropTypes.bool,
-};
+    //  The result.
+    return (
+      <div className='drawer--results'>
+        <header className='search-results__header'>
+          <Icon icon='search' fixedWidth />
+          <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
+        </header>
+
+        {accounts}
+        {statuses}
+        {hashtags}
+      </div>
+    );
+  };
+}

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -185,12 +185,6 @@
 }
 
 .drawer--results {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 0;
   background: $ui-base-color;
   overflow-x: hidden;
   overflow-y: auto;