WIP <Compose> Refactor; 1000 tiny edits

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 (
-      <div className='drawer--pager--account'>
+      <div className='drawer--account'>
         <a
           className='edit'
           href='/settings/profile'
@@ -40,7 +40,7 @@ export default function DrawerAccount ({ account }) {
 
   //  The result.
   return (
-    <div className='drawer--pager--account'>
+    <div className='drawer--account'>
       <Permalink
         className='avatar'
         href={account.get('url')}
@@ -67,4 +67,5 @@ export default function DrawerAccount ({ account }) {
   );
 }
 
+//  Props.
 DrawerAccount.propTypes = { account: ImmutablePropTypes.map };

app/javascript/flavours/glitch/features/drawer/header/index.js

@@ -51,7 +51,7 @@ export default function DrawerHeader ({
 }) {
 
   //  Only renders the component if the column isn't being shown.
-  const renderForColumn = conditionalRender.bind(
+  const renderForColumn = conditionalRender.bind(null,
     columnId => !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,

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 {
           <DrawerHeader
             columns={columns}
             intl={intl}
-            onSettingsClick={openSettings}
+            onSettingsClick={onOpenSettings}
           />
         ) : null}
         <DrawerSearch
           intl={intl}
-          onChange={change}
-          onClear={clear}
-          onShow={show}
-          onSubmit={submit}
+          onChange={onChange}
+          onClear={onClear}
+          onShow={onShow}
+          onSubmit={onSubmit}
           submitted={submitted}
           value={searchValue}
         />
@@ -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.

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,
 };

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}
           />
         </label>
         <div
           aria-label={intl.formatMessage(messages.placeholder)}
           className='icon'
-          onClick={clear}
+          onClick={handleClear}
           role='button'
           tabIndex='0'
         >
           <Icon icon='search' />
           <Icon icon='fa-times-circle' />
         </div>
-
         <Overlay
           placement='bottom'
           show={expanded && !(value || '').length && !submitted}
@@ -138,6 +139,7 @@ export default class DrawerSearch extends React.PureComponent {
 
 }
 
+//  Props.
 DrawerSearch.propTypes = {
   value: PropTypes.string,
   submitted: PropTypes.bool,

app/javascript/flavours/glitch/features/drawer/search/popout/index.js

@@ -34,9 +34,13 @@ const messages = defineMessages({
   },
 });
 
+//  The spring used by our motion.
 const motionSpring = spring(1, { damping: 35, stiffness: 400 });
 
+//  The component.
 export default function DrawerSearchPopout ({ style }) {
+
+  //  The result.
   return (
     <Motion
       defaultStyle={{