Move DrawerSearch to Search + SearchContainer

master
Thibaut Girka 6 years ago committed by ThibG
parent c92ab35b19
commit ab3e8fc542
  1. 2
      app/javascript/flavours/glitch/features/compose/components/search.js
  2. 35
      app/javascript/flavours/glitch/features/compose/containers/search_container.js
  3. 41
      app/javascript/flavours/glitch/features/compose/index.js
  4. 12
      app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js

@ -58,7 +58,7 @@ class SearchPopout extends React.PureComponent {
// The component. // The component.
export default @injectIntl export default @injectIntl
class DrawerSearch extends React.PureComponent { class Search extends React.PureComponent {
static propTypes = { static propTypes = {
value: PropTypes.string.isRequired, value: PropTypes.string.isRequired,

@ -0,0 +1,35 @@
import { connect } from 'react-redux';
import {
changeSearch,
clearSearch,
submitSearch,
showSearch,
} from 'flavours/glitch/actions/search';
import Search from '../components/search';
const mapStateToProps = state => ({
value: state.getIn(['search', 'value']),
submitted: state.getIn(['search', 'submitted']),
});
const mapDispatchToProps = dispatch => ({
onChange (value) {
dispatch(changeSearch(value));
},
onClear () {
dispatch(clearSearch());
},
onSubmit () {
dispatch(submitSearch());
},
onShow () {
dispatch(showSearch());
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Search);

@ -8,12 +8,6 @@ import classNames from 'classnames';
// Actions. // Actions.
import { openModal } from 'flavours/glitch/actions/modal'; import { openModal } from 'flavours/glitch/actions/modal';
import {
changeSearch,
clearSearch,
showSearch,
submitSearch,
} from 'flavours/glitch/actions/search';
import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
// Components. // Components.
@ -21,7 +15,7 @@ import Composer from 'flavours/glitch/features/composer';
import DrawerAccount from './account'; import DrawerAccount from './account';
import DrawerHeader from './header'; import DrawerHeader from './header';
import DrawerResults from './results'; import DrawerResults from './results';
import DrawerSearch from './search'; import SearchContainer from './containers/search_container';
// Utils. // Utils.
import { me, mascot } from 'flavours/glitch/util/initial_state'; import { me, mascot } from 'flavours/glitch/util/initial_state';
@ -39,7 +33,6 @@ const mapStateToProps = state => ({
elefriend: state.getIn(['compose', 'elefriend']), elefriend: state.getIn(['compose', 'elefriend']),
results: state.getIn(['search', 'results']), results: state.getIn(['search', 'results']),
searchHidden: state.getIn(['search', 'hidden']), searchHidden: state.getIn(['search', 'hidden']),
searchValue: state.getIn(['search', 'value']),
submitted: state.getIn(['search', 'submitted']), submitted: state.getIn(['search', 'submitted']),
unreadNotifications: state.getIn(['notifications', 'unread']), unreadNotifications: state.getIn(['notifications', 'unread']),
showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
@ -47,21 +40,9 @@ const mapStateToProps = state => ({
// Dispatch mapping. // Dispatch mapping.
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onChange (value) {
dispatch(changeSearch(value));
},
onClear () {
dispatch(clearSearch());
},
onClickElefriend () { onClickElefriend () {
dispatch(cycleElefriendCompose()); dispatch(cycleElefriendCompose());
}, },
onShow () {
dispatch(showSearch());
},
onSubmit () {
dispatch(submitSearch());
},
onOpenSettings (e) { onOpenSettings (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -84,17 +65,12 @@ class Compose extends React.PureComponent {
results: ImmutablePropTypes.map, results: ImmutablePropTypes.map,
elefriend: PropTypes.number, elefriend: PropTypes.number,
searchHidden: PropTypes.bool, searchHidden: PropTypes.bool,
searchValue: PropTypes.string,
submitted: PropTypes.bool, submitted: PropTypes.bool,
unreadNotifications: PropTypes.number, unreadNotifications: PropTypes.number,
showNotificationsBadge: PropTypes.bool, showNotificationsBadge: PropTypes.bool,
// Dispatch props. // Dispatch props.
onChange: PropTypes.func,
onClear: PropTypes.func,
onClickElefriend: PropTypes.func, onClickElefriend: PropTypes.func,
onShow: PropTypes.func,
onSubmit: PropTypes.func,
onOpenSettings: PropTypes.func, onOpenSettings: PropTypes.func,
}; };
@ -106,15 +82,10 @@ class Compose extends React.PureComponent {
elefriend, elefriend,
intl, intl,
multiColumn, multiColumn,
onChange,
onClear,
onClickElefriend, onClickElefriend,
onOpenSettings, onOpenSettings,
onShow,
onSubmit,
results, results,
searchHidden, searchHidden,
searchValue,
submitted, submitted,
isSearchPage, isSearchPage,
unreadNotifications, unreadNotifications,
@ -134,15 +105,7 @@ class Compose extends React.PureComponent {
onSettingsClick={onOpenSettings} onSettingsClick={onOpenSettings}
/> />
)} )}
{(multiColumn || isSearchPage) && <DrawerSearch {(multiColumn || isSearchPage) && <SearchContainer /> }
intl={intl}
onChange={onChange}
onClear={onClear}
onShow={onShow}
onSubmit={onSubmit}
submitted={submitted}
value={searchValue}
/> }
<div className='drawer__pager'> <div className='drawer__pager'>
{!isSearchPage && <div className='drawer__inner'> {!isSearchPage && <div className='drawer__inner'>
<DrawerAccount account={account} /> <DrawerAccount account={account} />

@ -8,10 +8,12 @@ import classNames from 'classnames';
import Permalink from 'flavours/glitch/components/permalink'; import Permalink from 'flavours/glitch/components/permalink';
import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer';
import DrawerAccount from 'flavours/glitch/features/compose/account'; import DrawerAccount from 'flavours/glitch/features/compose/account';
import DrawerSearch from 'flavours/glitch/features/compose/search'; import Search from 'flavours/glitch/features/compose/components/search';
import ColumnHeader from './column_header'; import ColumnHeader from './column_header';
import { me } from 'flavours/glitch/util/initial_state'; import { me } from 'flavours/glitch/util/initial_state';
const noop = () => { };
const messages = defineMessages({ const messages = defineMessages({
home_title: { id: 'column.home', defaultMessage: 'Home' }, home_title: { id: 'column.home', defaultMessage: 'Home' },
notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@ -63,7 +65,13 @@ PageTwo.propTypes = {
const PageThree = ({ intl, myAccount }) => ( const PageThree = ({ intl, myAccount }) => (
<div className='onboarding-modal__page onboarding-modal__page-three'> <div className='onboarding-modal__page onboarding-modal__page-three'>
<div className='figure non-interactive'> <div className='figure non-interactive'>
<DrawerSearch intl={intl} /> <Search
value=''
onChange={noop}
onSubmit={noop}
onClear={noop}
onShow={noop}
/>
<div className='pseudo-drawer'> <div className='pseudo-drawer'>
<DrawerAccount account={myAccount} /> <DrawerAccount account={myAccount} />

Loading…
Cancel
Save