From 67771e6d65ea209dcb9156a7495b7ef64c1a762b Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 20 Apr 2019 18:21:11 +0200 Subject: Rework DrawerResults to make them closer to upstream --- .../flavours/glitch/features/compose/index.js | 20 ++- .../glitch/features/compose/results/index.js | 153 ++++++++------------- 2 files changed, 70 insertions(+), 103 deletions(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 83c5d82b0..6dc786c8b 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/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 { )} } - {(multiColumn || isSearchPage) && - } + + {({ x }) => ( +
+ +
+ )} +
); diff --git a/app/javascript/flavours/glitch/features/compose/results/index.js b/app/javascript/flavours/glitch/features/compose/results/index.js index 4574c0e1e..162d14913 100644 --- a/app/javascript/flavours/glitch/features/compose/results/index.js +++ b/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 = ( +
+
- // 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 => )} +
+ ); } - return size; - }, 0); - // The result. - return ( - - {({ x }) => ( -
-
- - -
- {accounts && accounts.size ? ( -
-
+ if (results.get('statuses') && results.get('statuses').size > 0) { + count += results.get('statuses').size; + statuses = ( +
+
- {accounts.map( - accountId => ( - - ) - )} -
- ) : null} - {statuses && statuses.size ? ( -
-
+ {results.get('statuses').map(statusId => )} +
+ ); + } - {statuses.map( - statusId => ( - - ) - )} -
- ) : null} - {hashtags && hashtags.size ? ( -
-
+ if (results.get('hashtags') && results.get('hashtags').size > 0) { + count += results.get('hashtags').size; + hashtags = ( +
+
- {hashtags.map(hashtag => )} -
- ) : null} -
- )} -
- ); -} + {results.get('hashtags').map(hashtag => )} + + ); + } -// Props. -DrawerResults.propTypes = { - results: ImmutablePropTypes.map, - visible: PropTypes.bool, -}; + // The result. + return ( +
+
+ + +
+ + {accounts} + {statuses} + {hashtags} +
+ ); + }; +} -- cgit