From 42f50049ff29ccdc484c22f8a5a19cda2dd03a5b Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 3 Jan 2018 12:36:21 -0800 Subject: WIP Refactor; 1000 tiny edits --- .../glitch/features/drawer/account/index.js | 5 +- .../glitch/features/drawer/header/index.js | 3 +- .../flavours/glitch/features/drawer/index.js | 88 +++++++++------------- .../glitch/features/drawer/results/index.js | 6 +- .../glitch/features/drawer/search/index.js | 34 +++++---- .../glitch/features/drawer/search/popout/index.js | 4 + 6 files changed, 68 insertions(+), 72 deletions(-) (limited to 'app/javascript/flavours/glitch/features/drawer') diff --git a/app/javascript/flavours/glitch/features/drawer/account/index.js b/app/javascript/flavours/glitch/features/drawer/account/index.js index 9afe8ba3e..168d0c2cf 100644 --- a/app/javascript/flavours/glitch/features/drawer/account/index.js +++ b/app/javascript/flavours/glitch/features/drawer/account/index.js @@ -27,7 +27,7 @@ export default function DrawerAccount ({ account }) { // We need an account to render. if (!account) { return ( -
+
+
!columns || !columns.some( column => column.get('id') === columnId ) @@ -110,6 +110,7 @@ export default function DrawerHeader ({ ); } +// Props. DrawerHeader.propTypes = { columns: ImmutablePropTypes.list, intl: PropTypes.object, diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index d184dfd9b..9ade1f87a 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/app/javascript/flavours/glitch/features/drawer/index.js @@ -34,23 +34,13 @@ const mapStateToProps = state => ({ }); // Dispatch mapping. -const mapDispatchToProps = dispatch => ({ - change (value) { - dispatch(changeSearch(value)); - }, - clear () { - dispatch(clearSearch()); - }, - show () { - dispatch(showSearch()); - }, - submit () { - dispatch(submitSearch()); - }, - openSettings () { - dispatch(openModal('SETTINGS', {})); - }, -}); +const mapDispatchToProps = { + onChange: changeSearch, + onClear: clearSearch, + onShow: showSearch, + onSubmit: submitSearch, + onOpenSettings: openModal.bind(null, 'SETTINGS', {}), +}; // The component. class Drawer extends React.Component { @@ -63,23 +53,19 @@ class Drawer extends React.Component { // Rendering. render () { const { - dispatch: { - change, - clear, - openSettings, - show, - submit, - }, + account, + columns, intl, multiColumn, - state: { - account, - columns, - results, - searchHidden, - searchValue, - submitted, - }, + onChange, + onClear, + onOpenSettings, + onShow, + onSubmit, + results, + searchHidden, + searchValue, + submitted, } = this.props; // The result. @@ -89,15 +75,15 @@ class Drawer extends React.Component { ) : null} @@ -117,23 +103,23 @@ class Drawer extends React.Component { // Props. Drawer.propTypes = { - dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, - state: PropTypes.shape({ - account: ImmutablePropTypes.map, - columns: ImmutablePropTypes.list, - results: ImmutablePropTypes.map, - searchHidden: PropTypes.bool, - searchValue: PropTypes.string, - submitted: PropTypes.bool, - }).isRequired, -}; -// Default props. -Drawer.defaultProps = { - dispatch: {}, - state: {}, + // State props. + account: ImmutablePropTypes.map, + columns: ImmutablePropTypes.list, + results: ImmutablePropTypes.map, + searchHidden: PropTypes.bool, + searchValue: PropTypes.string, + submitted: PropTypes.bool, + + // Dispatch props. + onChange: PropTypes.func, + onClear: PropTypes.func, + onShow: PropTypes.func, + onSubmit: PropTypes.func, + onOpenSettings: PropTypes.func, }; // Connecting and export. diff --git a/app/javascript/flavours/glitch/features/drawer/results/index.js b/app/javascript/flavours/glitch/features/drawer/results/index.js index 559d56da5..f2a79eb59 100644 --- a/app/javascript/flavours/glitch/features/drawer/results/index.js +++ b/app/javascript/flavours/glitch/features/drawer/results/index.js @@ -25,7 +25,7 @@ const messages = defineMessages({ }); // The component. -export default function DrawerPager ({ +export default function DrawerResults ({ results, visible, }) { @@ -33,6 +33,7 @@ export default function DrawerPager ({ const statuses = results ? results.get('statuses') : null; const hashtags = results ? results.get('hashtags') : null; + // This gets the total number of items. const count = [accounts, statuses, hashtags].reduce(function (size, item) { if (item && item.size) { return size + item.size; @@ -108,7 +109,8 @@ export default function DrawerPager ({ ); } -DrawerPager.propTypes = { +// Props. +DrawerResults.propTypes = { results: ImmutablePropTypes.map, visible: PropTypes.bool, }; diff --git a/app/javascript/flavours/glitch/features/drawer/search/index.js b/app/javascript/flavours/glitch/features/drawer/search/index.js index ed69f71ed..2d739349c 100644 --- a/app/javascript/flavours/glitch/features/drawer/search/index.js +++ b/app/javascript/flavours/glitch/features/drawer/search/index.js @@ -30,18 +30,18 @@ const messages = defineMessages({ // Handlers. const handlers = { - blur () { + handleBlur () { this.setState({ expanded: false }); }, - change ({ target: { value } }) { + handleChange ({ target: { value } }) { const { onChange } = this.props; if (onChange) { onChange(value); } }, - clear (e) { + handleClear (e) { const { onClear, submitted, @@ -53,7 +53,7 @@ const handlers = { } }, - focus () { + handleFocus () { const { onShow } = this.props; this.setState({ expanded: true }); if (onShow) { @@ -61,7 +61,7 @@ const handlers = { } }, - keyUp (e) { + handleKeyUp (e) { const { onSubmit } = this.props; switch (e.key) { case 'Enter': @@ -78,19 +78,21 @@ const handlers = { // The component. export default class DrawerSearch extends React.PureComponent { + // Constructor. constructor (props) { super(props); assignHandlers(this, handlers); this.state = { expanded: false }; } + // Rendering. render () { const { - blur, - change, - clear, - focus, - keyUp, + handleBlur, + handleChange, + handleClear, + handleFocus, + handleKeyUp, } = this.handlers; const { intl, @@ -110,23 +112,22 @@ export default class DrawerSearch extends React.PureComponent { type='text' placeholder={intl.formatMessage(messages.placeholder)} value={value || ''} - onChange={change} - onKeyUp={keyUp} - onFocus={focus} - onBlur={blur} + onChange={handleChange} + onKeyUp={handleKeyUp} + onFocus={handleFocus} + onBlur={handleBlur} />
-