diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer/index.js')
| -rw-r--r-- | app/javascript/flavours/glitch/features/drawer/index.js | 268 |
1 files changed, 109 insertions, 159 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index 8386ae47c..01ec18fc5 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/app/javascript/flavours/glitch/features/drawer/index.js @@ -2,197 +2,147 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { injectIntl, defineMessages } from 'react-intl'; -import spring from 'react-motion/lib/spring'; -import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; // Actions. import { changeComposing } from 'flavours/glitch/actions/compose'; -import { changeLocalSetting } from 'flavours/glitch/actions/local_settings'; import { openModal } from 'flavours/glitch/actions/modal'; +import { + changeSearch, + clearSearch, + showSearch, + submitSearch, +} from 'flavours/glitch/actions/search'; // Components. -import Icon from 'flavours/glitch/components/icon'; -import Compose from 'flavours/glitch/features/compose'; -import NavigationContainer from './containers/navigation_container'; -import SearchContainer from './containers/search_container'; -import SearchResultsContainer from './containers/search_results_container'; +import DrawerHeader from './header'; +import DrawerPager from './pager'; +import DrawerResults from './results'; +import DrawerSearch from './search'; // Utils. -import Motion from 'flavours/glitch/util/optional_motion'; -import { - assignHandlers, - conditionalRender, -} from 'flavours/glitch/util/react_helpers'; - -// Messages. -const messages = defineMessages({ - community: { - defaultMessage: 'Local timeline', - id: 'navigation_bar.community_timeline', - }, - home_timeline: { - defaultMessage: 'Home', - id: 'tabs_bar.home', - }, - logout: { - defaultMessage: 'Logout', - id: 'navigation_bar.logout', - }, - notifications: { - defaultMessage: 'Notifications', - id: 'tabs_bar.notifications', - }, - public: { - defaultMessage: 'Federated timeline', - id: 'navigation_bar.public_timeline', - }, - settings: { - defaultMessage: 'App settings', - id: 'navigation_bar.app_settings', - }, - start: { - defaultMessage: 'Getting started', - id: 'getting_started.heading', - }, -}); +import { me } from 'flavours/glitch/util/initial_state'; +import { wrap } from 'flavours/glitch/util/redux_helpers'; // State mapping. const mapStateToProps = state => ({ + account: state.getIn(['accounts', me]), columns: state.getIn(['settings', 'columns']), - showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + isComposing: state.getIn(['compose', 'is_composing']), + results: state.getIn(['search', 'results']), + searchHidden: state.getIn(['search', 'hidden']), + searchValue: state.getIn(['search', 'value']), + submitted: state.getIn(['search', 'submitted']), }); // Dispatch mapping. const mapDispatchToProps = dispatch => ({ - onBlur () { + change (value) { + dispatch(changeSearch(value)); + }, + changeComposingOff () { dispatch(changeComposing(false)); }, - onFocus () { + changeComposingOn () { dispatch(changeComposing(true)); }, - onSettingsOpen () { + clear () { + dispatch(clearSearch()); + }, + show () { + dispatch(showSearch()); + }, + submit () { + dispatch(submitSearch()); + }, + openSettings () { dispatch(openModal('SETTINGS', {})); }, }); // The component. -@connect(mapStateToProps, mapDispatchToProps) -@injectIntl -export default function Drawer ({ - columns, - intl, - multiColumn, - onBlur, - onFocus, - onSettingsOpen, - showSearch, -}) { +class Drawer extends React.Component { - // Only renders the component if the column isn't being shown. - const renderForColumn = conditionalRender.bind( - columnId => !columns.some(column => column.get('id') === columnId) - ); + // Constructor. + constructor (props) { + super(props); + } - // The result. - return ( - <div className='drawer'> - {multiColumn ? ( - <nav className='drawer__header'> - <Link - aria-label={intl.formatMessage(messages.start)} - className='drawer__tab' - title={intl.formatMessage(messages.start)} - to='/getting-started' - ><Icon icon='asterisk' /></Link> - {renderForColumn('HOME', ( - <Link - aria-label={intl.formatMessage(messages.home_timeline)} - className='drawer__tab' - title={intl.formatMessage(messages.home_timeline)} - to='/timelines/home' - ><Icon icon='home' /></Link> - ))} - {renderForColumn('NOTIFICATIONS', ( - <Link - aria-label={intl.formatMessage(messages.notifications)} - className='drawer__tab' - title={intl.formatMessage(messages.notifications)} - to='/notifications' - ><Icon icon='bell' /></Link> - ))} - {renderForColumn('COMMUNITY', ( - <Link - aria-label={intl.formatMessage(messages.community)} - className='drawer__tab' - title={intl.formatMessage(messages.community)} - to='/timelines/public/local' - ><Icon icon='users' /></Link> - ))} - {renderForColumn('PUBLIC', ( - <Link - aria-label={intl.formatMessage(messages.public)} - className='drawer__tab' - title={intl.formatMessage(messages.public)} - to='/timelines/public' - ><Icon icon='globe' /></Link> - ))} - <a - aria-label={intl.formatMessage(messages.settings)} - className='drawer__tab' - onClick={settings} - role='button' - title={intl.formatMessage(messages.settings)} - tabIndex='0' - ><Icon icon='cogs' /></a> - <a - aria-label={intl.formatMessage(messages.logout)} - className='drawer__tab' - data-method='delete' - href='/auth/sign_out' - title={intl.formatMessage(messages.logout)} - ><Icon icon='sign-out' /></a> - </nav> - ) : null} - <SearchContainer /> - <div className='drawer__pager'> - <div - className='drawer__inner scrollable optionally-scrollable' - onFocus={focus} - > - <NavigationContainer onClose={blur} /> - <Compose /> - </div> - <Motion - defaultStyle={{ x: -100 }} - style={{ - x: spring(showSearch ? 0 : -100, { - stiffness: 210, - damping: 20, - }) - }} - > - {({ x }) => ( - <div - className='drawer__inner darker scrollable optionally-scrollable' - style={{ - transform: `translateX(${x}%)`, - visibility: x === -100 ? 'hidden' : 'visible' - }} - ><SearchResultsContainer /></div> - )} - </Motion> + // Rendering. + render () { + const { + dispatch: { + change, + changeComposingOff, + changeComposingOn, + clear, + openSettings, + show, + submit, + }, + intl, + multiColumn, + state: { + account, + columns, + isComposing, + results, + searchHidden, + searchValue, + submitted, + }, + } = this.props; + + // The result. + return ( + <div className='drawer'> + {multiColumn ? ( + <DrawerHeader + columns={columns} + intl={intl} + onSettingsClick={openSettings} + /> + ) : null} + <DrawerSearch + intl={intl} + onChange={change} + onClear={clear} + onShow={show} + onSubmit={submit} + submitted={submitted} + value={searchValue} + /> + <DrawerPager + account={account} + active={isComposing} + onBlur={changeComposingOff} + onFocus={changeComposingOn} + /> + <DrawerResults + results={results} + visible={submitted && !searchHidden} + /> </div> - </div> - ); + ); + } + } // Props. Drawer.propTypes = { dispatch: PropTypes.func.isRequired, - columns: ImmutablePropTypes.list.isRequired, - multiColumn: PropTypes.bool, - showSearch: PropTypes.bool, intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, + state: PropTypes.shape({ + account: ImmutablePropTypes.map, + columns: ImmutablePropTypes.list, + isComposing: PropTypes.bool, + results: ImmutablePropTypes.map, + searchHidden: PropTypes.bool, + searchValue: PropTypes.string, + submitted: PropTypes.bool, + }).isRequired, }; + +// Connecting and export. +export { Drawer as WrappedComponent }; +export default wrap(Drawer, mapStateToProps, mapDispatchToProps, true); |