Progress

app/javascript/gabsocial/features/blocked_domains.js

@@ -1,62 +1,86 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { debounce } from 'lodash';
-import { fetchDomainBlocks, expandDomainBlocks } from '../actions/domain_blocks';
-import DomainContainer from '../containers/domain_container';
-import ColumnIndicator from '../components/column_indicator';
-import ScrollableList from '../components/scrollable_list';
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { debounce } from 'lodash'
+import { unblockDomain, fetchDomainBlocks, expandDomainBlocks } from '../actions/domain_blocks'
+import ColumnIndicator from '../components/column_indicator'
+import List from '../components/list'
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
+  emptyMessage: { id: 'empty_column.domain_blocks', defaultMessage: 'There are no hidden domains yet.' },
 });
 
+const mapDispatchToProps = (dispatch) => ({
+  onExpandDomainBlocks() {
+    dispatch(expandDomainBlocks())
+  },
+
+  onFetchDomainBlocks() {
+    dispatch(fetchDomainBlocks())
+  },
+
+  onUnblockDomain (domain) {
+    dispatch(unblockDomain(domain))
+  },
+})
+
 const mapStateToProps = state => ({
   domains: state.getIn(['domain_lists', 'blocks', 'items']),
   hasMore: !!state.getIn(['domain_lists', 'blocks', 'next']),
-});
+})
 
 export default
-@connect(mapStateToProps)
 @injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
 class Blocks extends ImmutablePureComponent {
 
   static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
     hasMore: PropTypes.bool,
     domains: ImmutablePropTypes.orderedSet,
-    intl: PropTypes.object.isRequired,
-  };
+    onUnblockDomain: PropTypes.func.isRequired,
+    onFetchDomainBlocks: PropTypes.func.isRequired,
+    onExpandDomainBlocks: PropTypes.func.isRequired,
+  }
 
   componentWillMount() {
-    this.props.dispatch(fetchDomainBlocks());
+    this.props.onFetchDomainBlocks()
+  }
+
+  handleUnblockDomain = (domain) => {
+    this.props.onUnblockDomain(domain)
   }
 
   handleLoadMore = debounce(() => {
-    this.props.dispatch(expandDomainBlocks());
-  }, 300, { leading: true });
+    this.props.onExpandDomainBlocks()
+  }, 300, { leading: true })
 
   render() {
-    const { intl, domains, hasMore } = this.props;
+    const { intl, domains, hasMore } = this.props
 
     if (!domains) {
-      return (<ColumnIndicator type='loading' />);
+      return <ColumnIndicator type='loading' />
     }
 
+    const items = domains.map((domain) => {
+      return {
+        title: intl.formatMessage(messages.unblockDomain, { domain }),
+        onClick: () => this.handleUnblockDomain(domain),
+        hideArrow: true,
+      }
+    })
+
     return (
-      <ScrollableList
+      <List
         scrollKey='domain_blocks'
         onLoadMore={this.handleLoadMore}
         hasMore={hasMore}
-        emptyMessage={<FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />}
-      >
-        {domains.map(domain =>
-          <DomainContainer key={domain} domain={domain} />
-        )}
-      </ScrollableList>
-    );
+        emptyMessage={intl.formatMessage(messages.emptyMessage)}
+        items={items}
+      />
+    )
   }
 
 }

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

@@ -40,7 +40,7 @@ export default class ComposeExtraButton extends PureComponent {
       fillColorWhite: active,
     })
 
-    const iconSize = !!small ? '12px' : '16px'
+    const iconSize = !!small ? '14px' : '16px'
 
     return (
       <div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>

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

@@ -260,15 +260,6 @@ class ComposeForm extends ImmutablePureComponent {
       px15: !shouldCondense,
     })
 
-    const contentWarningClasses = cx({
-      default: 1,
-      px15: 1,
-      py10: 1,
-      borderBottom1PX: 1,
-      borderColorSecondary: 1,
-      displayNone: !spoiler
-    })
-
     return (
       <div className={parentContainerClasses}>
         <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
@@ -285,23 +276,26 @@ class ComposeForm extends ImmutablePureComponent {
             onClick={this.handleClick}
           >
 
-            <div className={contentWarningClasses}>
-              <AutosuggestTextbox
-                placeholder={intl.formatMessage(messages.spoiler_placeholder)}
-                value={this.props.spoilerText}
-                onChange={this.handleChangeSpoilerText}
-                onKeyDown={this.handleKeyDown}
-                disabled={!this.props.spoiler}
-                ref={this.setSpoilerText}
-                suggestions={this.props.suggestions}
-                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-                onSuggestionSelected={this.onSpoilerSuggestionSelected}
-                searchTokens={[':']}
-                prependIcon='warning'
-                id='cw-spoiler-input'
-              />
-            </div>
+            {
+              !!spoiler &&
+              <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+                <AutosuggestTextbox
+                  placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+                  value={this.props.spoilerText}
+                  onChange={this.handleChangeSpoilerText}
+                  onKeyDown={this.handleKeyDown}
+                  disabled={!this.props.spoiler}
+                  ref={this.setSpoilerText}
+                  suggestions={this.props.suggestions}
+                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                  onSuggestionSelected={this.onSpoilerSuggestionSelected}
+                  searchTokens={[':']}
+                  prependIcon='warning'
+                  id='cw-spoiler-input'
+                />
+              </div>
+            }
 
             <AutosuggestTextbox
               ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
@@ -335,22 +329,35 @@ class ComposeForm extends ImmutablePureComponent {
 
             <div className={actionsContainerClasses}>
               <div className={[_s.default, _s.flexRow, _s.marginRightAuto].join(' ')}>
-                <RichTextEditorButton small={shouldCondense} />
+                {
+                  !shouldCondense &&
+                  <RichTextEditorButton />
+                }
                 <UploadButton small={shouldCondense} />
                 {
-                  !edit && <PollButton small={shouldCondense} />
+                  !edit && !shouldCondense &&
+                  <PollButton />
                 }
                 {
                   !shouldCondense &&
-                  <StatusVisibilityButton small={shouldCondense} />
+                  <StatusVisibilityButton />
+                }
+                {
+                  !shouldCondense &&
+                  <SpoilerButton />
+                }
+                {
+                  !shouldCondense &&
+                  <SchedulePostButton />
                 }
-                <SpoilerButton small={shouldCondense} />
-                <SchedulePostButton small={shouldCondense} />
                 <GifSelectorButton small={shouldCondense} />
                 <EmojiPickerButton small={shouldCondense} />
               </div>
 
-              <CharacterCounter max={maxPostCharacterCount} text={text} small={shouldCondense} />
+              {
+                !shouldCondense &&
+                <CharacterCounter max={maxPostCharacterCount} text={text} />
+              }
               
               {
                 !shouldCondense &&

app/javascript/gabsocial/features/notifications/containers/notification_container.js

@@ -55,7 +55,7 @@ const mapDispatchToProps = dispatch => ({
   },
 
   onFavorite (status) {
-    if (status.get('favorited')) {
+    if (status.get('favourited')) {
       dispatch(unfavorite(status))
     } else {
       dispatch(favorite(status))

app/javascript/gabsocial/features/status/containers/detailed_status_container.js

@@ -80,7 +80,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onFavorite (status) {
-    if (status.get('favorited')) {
+    if (status.get('favourited')) {
       dispatch(unfavorite(status));
     } else {
       dispatch(favorite(status));