Merge pull request #2470 from ClearlyClaire/glitch-soc/cleanup

Clean up some more and reduce unwarranted differences with upstream further

app/javascript/flavours/glitch/actions/interactions.js

@@ -211,7 +211,7 @@ export function bookmark(status) {
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/bookmark`).then(function (response) {
       dispatch(importFetchedStatus(response.data));
-      dispatch(bookmarkSuccess(status));
+      dispatch(bookmarkSuccess(status, response.data));
     }).catch(function (error) {
       dispatch(bookmarkFail(status, error));
     });
@@ -224,7 +224,7 @@ export function unbookmark(status) {
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unbookmark`).then(response => {
       dispatch(importFetchedStatus(response.data));
-      dispatch(unbookmarkSuccess(status));
+      dispatch(unbookmarkSuccess(status, response.data));
     }).catch(error => {
       dispatch(unbookmarkFail(status, error));
     });
@@ -238,10 +238,11 @@ export function bookmarkRequest(status) {
   };
 }
 
-export function bookmarkSuccess(status) {
+export function bookmarkSuccess(status, response) {
   return {
     type: BOOKMARK_SUCCESS,
     status: status,
+    response: response,
   };
 }
 
@@ -260,10 +261,11 @@ export function unbookmarkRequest(status) {
   };
 }
 
-export function unbookmarkSuccess(status) {
+export function unbookmarkSuccess(status, response) {
   return {
     type: UNBOOKMARK_SUCCESS,
     status: status,
+    response: response,
   };
 }
 

app/javascript/flavours/glitch/components/account.jsx

@@ -6,7 +6,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Skeleton } from 'flavours/glitch/components/skeleton';
-import { me } from 'flavours/glitch/initial_state';
+
+import { me } from '../initial_state';
 
 import { Avatar } from './avatar';
 import { DisplayName } from './display_name';
@@ -14,7 +15,6 @@ import { IconButton } from './icon_button';
 import Permalink from './permalink';
 import { RelativeTimestamp } from './relative_timestamp';
 
-
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },

app/javascript/flavours/glitch/components/autosuggest_emoji.jsx

@@ -28,7 +28,7 @@ export default class AutosuggestEmoji extends PureComponent {
     }
 
     return (
-      <div className='emoji'>
+      <div className='autosuggest-emoji'>
         <img
           className='emojione'
           src={url}

app/javascript/flavours/glitch/components/edited_timestamp/index.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { openModal } from 'flavours/glitch/actions/modal';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import InlineAccount from 'flavours/glitch/components/inline_account';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 

app/javascript/flavours/glitch/components/intersection_observer_article.jsx

@@ -106,24 +106,24 @@ export default class IntersectionObserverArticle extends Component {
     const { children, id, index, listLength, cachedHeight } = this.props;
     const { isIntersecting, isHidden } = this.state;
 
-    const style = {};
-
     if (!isIntersecting && (isHidden || cachedHeight)) {
-      style.height = `${this.height || cachedHeight || 150}px`;
-      style.opacity = 0;
-      style.overflow = 'hidden';
+      return (
+        <article
+          ref={this.handleRef}
+          aria-posinset={index + 1}
+          aria-setsize={listLength}
+          style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
+          data-id={id}
+          tabIndex={-1}
+        >
+          {children && cloneElement(children, { hidden: true })}
+        </article>
+      );
     }
 
     return (
-      <article
-        ref={this.handleRef}
-        aria-posinset={index + 1}
-        aria-setsize={listLength}
-        data-id={id}
-        tabIndex={0}
-        style={style}
-      >
-        {children && cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })}
+      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={-1}>
+        {children && cloneElement(children, { hidden: false })}
       </article>
     );
   }

app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 
 class PictureInPicturePlaceholder extends PureComponent {
 

app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx

@@ -14,8 +14,8 @@ export default class AutosuggestAccount extends ImmutablePureComponent {
     const { account } = this.props;
 
     return (
-      <div className='account small' title={account.get('acct')}>
-        <div className='account__avatar-wrapper'><Avatar account={account} size={24} /></div>
+      <div className='autosuggest-account' title={account.get('acct')}>
+        <div className='autosuggest-account-icon'><Avatar account={account} size={24} /></div>
         <DisplayName account={account} inline />
       </div>
     );

app/javascript/flavours/glitch/features/domain_blocks/index.jsx

@@ -33,7 +33,7 @@ class Blocks extends ImmutablePureComponent {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     hasMore: PropTypes.bool,
-    domains: ImmutablePropTypes.list,
+    domains: ImmutablePropTypes.orderedSet,
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
   };

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -308,9 +308,9 @@
     background: darken($ui-secondary-color, 10%);
   }
 
-  > .account,
-  > .emoji,
-  > .autosuggest-hashtag {
+  .autosuggest-account,
+  .autosuggest-emoji,
+  .autosuggest-hashtag {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -342,12 +342,13 @@
     }
   }
 
-  & > .account.small {
-    .display-name {
-      & > span {
-        color: $lighter-text-color;
-      }
-    }
+  .autosuggest-account-icon,
+  .autosuggest-emoji img {
+    margin-inline-end: 8px;
+  }
+
+  .autosuggest-account .display-name > span {
+    color: $lighter-text-color;
   }
 }