Large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*

app/javascript/gabsocial/features/compose/components/action_bar.js

@@ -1,5 +1,4 @@
 import { openModal } from '../../../actions/modal';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import { meUsername } from 'gabsocial/initial_state';

app/javascript/gabsocial/features/compose/components/autosuggest_account.js

@@ -1,9 +1,21 @@
-import Avatar from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import Avatar from '../../../components/avatar/avatar';
+import DisplayName from '../../../components/display_name/display_name';
+import { makeGetAccount } from '../../../selectors';
 
-export default class AutosuggestAccount extends ImmutablePureComponent {
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { id }) => ({
+    account: getAccount(state, id),
+  });
+
+  return mapStateToProps;
+};
+
+export default @connect(makeMapStateToProps)
+class AutosuggestAccount extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
@@ -14,7 +26,9 @@ export default class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-account' title={account.get('acct')}>
-        <div className='autosuggest-account-icon'><Avatar account={account} size={18} /></div>
+        <div className='autosuggest-account-icon'>
+          <Avatar account={account} size={18} />
+        </div>
         <DisplayName account={account} />
       </div>
     );

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -1,24 +1,23 @@
-import CharacterCounter from './character_counter';
-import Button from '../../../components/button';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { length } from 'stringz';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import classNames from 'classnames';
+import CharacterCounter from './character_counter';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
-import AutosuggestTextarea from '../../../components/autosuggest_textarea';
-import AutosuggestInput from '../../../components/autosuggest_input';
+import AutosuggestTextbox from '../../../components/autosuggest_textbox';
 import PollButtonContainer from '../containers/poll_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
-import { defineMessages, injectIntl } from 'react-intl';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
 import PollFormContainer from '../containers/poll_form_container';
-import UploadFormContainer from '../containers/upload_form_container';
+import UploadForm from './upload_form';
 import WarningContainer from '../containers/warning_container';
 import { isMobile } from '../../../utils/is_mobile';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { length } from 'stringz';
 import { countableText } from '../util/counter';
-import Icon from 'gabsocial/components/icon';
+import Icon from '../../../components/icon';
+import Button from '../../../components/button';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 const maxPostCharacterCount = 3000;
@@ -104,10 +103,10 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleSubmit = () => {
-    if (this.props.text !== this.autosuggestTextarea.textarea.value) {
+    if (this.props.text !== this.autosuggestTextarea.textbox.value) {
       // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
       // Update the state to match the current text
-      this.props.onChange(this.autosuggestTextarea.textarea.value);
+      this.props.onChange(this.autosuggestTextarea.textbox.value);
     }
 
     // Submit disabled:
@@ -171,8 +170,8 @@ class ComposeForm extends ImmutablePureComponent {
         selectionStart = selectionEnd;
       }
 
-      this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
-      this.autosuggestTextarea.textarea.focus();
+      this.autosuggestTextarea.textbox.setSelectionRange(selectionStart, selectionEnd);
+      this.autosuggestTextarea.textbox.focus();
     }
   }
 
@@ -189,9 +188,9 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleEmojiPick = (data) => {
-    const { text }     = this.props;
-    const position     = this.autosuggestTextarea.textarea.selectionStart;
-    const needsSpace   = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
+    const { text } = this.props;
+    const position = this.autosuggestTextarea.textbox.selectionStart;
+    const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
 
     this.props.onPickEmoji(position, data, needsSpace);
   }
@@ -215,7 +214,7 @@ class ComposeForm extends ImmutablePureComponent {
     const composeClassNames = classNames({
       'compose-form': true,
       'condensed': condensed,
-    })
+    });
 
     return (
       <div className={composeClassNames} ref={this.setForm} onClick={this.handleClick}>
@@ -224,7 +223,7 @@ class ComposeForm extends ImmutablePureComponent {
         { !shouldCondense && <ReplyIndicatorContainer /> }
 
         <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
-          <AutosuggestInput
+          <AutosuggestTextbox
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={this.props.spoilerText}
             onChange={this.handleChangeSpoilerText}
@@ -245,7 +244,8 @@ class ComposeForm extends ImmutablePureComponent {
           <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
         </div>
 
-        <AutosuggestTextarea
+        <AutosuggestTextbox
+          textarea={true}
           ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
           disabled={disabled}
@@ -263,11 +263,11 @@ class ComposeForm extends ImmutablePureComponent {
           {
             !condensed &&
             <div className='compose-form__modifiers'>
-              <UploadFormContainer />
+              <UploadForm />
               <PollFormContainer />
             </div>
           }
-        </AutosuggestTextarea>
+        </AutosuggestTextbox>
 
         {
           !condensed &&

app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown.js

@@ -4,7 +4,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import detectPassiveEvents from 'detect-passive-events';
-import { buildCustomEmojis } from '../../emoji/emoji';
+import { buildCustomEmojis } from '../../../components/emoji/emoji';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },

app/javascript/gabsocial/features/compose/components/navigation_bar.js

@@ -5,8 +5,16 @@ import Permalink from '../../../components/permalink';
 import IconButton from '../../../components/icon_button';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { me } from '../../../initial_state';
 
-export default class NavigationBar extends ImmutablePureComponent {
+const mapStateToProps = state => {
+  return {
+    account: state.getIn(['accounts', me]),
+  };
+};
+
+export default @connect(mapStateToProps)
+class NavigationBar extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
@@ -26,7 +34,9 @@ export default class NavigationBar extends ImmutablePureComponent {
             <strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong>
           </Permalink>
 
-          <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+          <a href='/settings/profile' className='navigation-bar__profile-edit'>
+            <FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' />
+          </a>
         </div>
 
         <div className='navigation-bar__actions'>

app/javascript/gabsocial/features/compose/components/poll_form.js

@@ -1,12 +1,10 @@
-'use strict';
-
+import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import IconButton from 'gabsocial/components/icon_button';
-import Icon from 'gabsocial/components/icon';
-import AutosuggestInput from 'gabsocial/components/autosuggest_input';
-import classNames from 'classnames';
+import IconButton from '../../../components/icon_button';
+import Icon from '../../../components/icon';
+import AutosuggestTextbox from '../../../components/autosuggest_textbox';
 
 const messages = defineMessages({
   option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
@@ -75,7 +73,7 @@ class Option extends PureComponent {
             tabIndex='0'
           />
 
-          <AutosuggestInput
+          <AutosuggestTextbox
             placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
             maxLength={25}
             value={title}
@@ -143,7 +141,7 @@ class PollForm extends ImmutablePureComponent {
 
         <div className='poll__footer'>
           {options.size < 4 && (
-            <button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
+            <button className='button button--secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
           )}
 
           <select value={expiresIn} onChange={this.handleSelectDuration}>

app/javascript/gabsocial/features/compose/components/privacy_dropdown.js

@@ -1,11 +1,11 @@
 import { injectIntl, defineMessages } from 'react-intl';
-import IconButton from '../../../components/icon_button';
-import Overlay from 'react-overlays/lib/Overlay';
-import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import detectPassiveEvents from 'detect-passive-events';
 import classNames from 'classnames';
-import Icon from 'gabsocial/components/icon';
+import Overlay from 'react-overlays/lib/Overlay';
+import IconButton from '../../../components/icon_button';
+import Motion from '../../ui/util/optional_motion';
+import Icon from '../../../components/icon';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },

app/javascript/gabsocial/features/compose/components/search.js

@@ -1,9 +1,9 @@
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Overlay from 'react-overlays/lib/Overlay';
-import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
+import Motion from '../../ui/util/optional_motion';
 import { searchEnabled } from '../../../initial_state';
-import Icon from 'gabsocial/components/icon';
+import Icon from '../../../components/icon';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },

app/javascript/gabsocial/features/compose/components/search_results.js

@@ -3,10 +3,9 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Hashtag from '../../../components/hashtag';
-import Icon from 'gabsocial/components/icon';
-import WhoToFollowPanel from '../../ui/components/who_to_follow_panel';
-// import TrendsPanel from '../../ui/components/trends_panel';
+import TrendingItem from '../../../components/trending_item';
+import Icon from '../../../components/icon';
+import WhoToFollowPanel from '../../../components/panel';
 
 export default @injectIntl
 class SearchResults extends ImmutablePureComponent {
@@ -64,7 +63,7 @@ class SearchResults extends ImmutablePureComponent {
         <div className='search-results__section'>
           <h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
 
-          {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
+          {results.get('hashtags').map(hashtag => <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />)}
         </div>
       );
     }

app/javascript/gabsocial/features/compose/components/upload.js

@@ -1,10 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Motion from '../../ui/util/optional_motion';
-import spring from 'react-motion/lib/spring';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import Icon from 'gabsocial/components/icon';
+import spring from 'react-motion/lib/spring';
+import Motion from '../../ui/util/optional_motion';
+import Icon from '../../../components/icon';
 
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },

app/javascript/gabsocial/features/compose/components/upload_form.js

@@ -1,10 +1,15 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import UploadProgressContainer from '../containers/upload_progress_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import UploadProgress from './upload_progress';
 import UploadContainer from '../containers/upload_container';
 import SensitiveButtonContainer from '../containers/sensitive_button_container';
 
-export default class UploadForm extends ImmutablePureComponent {
+const mapStateToProps = state => ({
+  mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
+});
+
+export default @connect(mapStateToProps)
+class UploadForm extends ImmutablePureComponent {
 
   static propTypes = {
     mediaIds: ImmutablePropTypes.list.isRequired,
@@ -15,7 +20,7 @@ export default class UploadForm extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload-wrapper'>
-        <UploadProgressContainer />
+        <UploadProgress />
 
         <div className='compose-form__uploads-wrapper'>
           {mediaIds.map(id => (

app/javascript/gabsocial/features/compose/components/upload_progress.js

@@ -1,9 +1,15 @@
-import Motion from '../../ui/util/optional_motion';
-import spring from 'react-motion/lib/spring';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'gabsocial/components/icon';
+import spring from 'react-motion/lib/spring';
+import Motion from '../../ui/util/optional_motion';
+import Icon from '../../../components/icon';
 
-export default class UploadProgress extends PureComponent {
+const mapStateToProps = state => ({
+  active: state.getIn(['compose', 'is_uploading']),
+  progress: state.getIn(['compose', 'progress']),
+});
+
+export default @connect(mapStateToProps)
+class UploadProgress extends PureComponent {
 
   static propTypes = {
     active: PropTypes.bool,