[Glitch] Add `limited` attribute to accounts in REST API and a warning in web UI

Port b4d373a3df2752d9f8bdc0d7f02350528f3789b2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

1 files changed, 13 insertions, 13 deletions

diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js
index c5e9072c4..6d53a5298 100644
--- a/app/javascript/flavours/glitch/components/avatar.js
+++ b/app/javascript/flavours/glitch/components/avatar.js
@@ -1,13 +1,13 @@
-import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import classNames from 'classnames';
 
 export default class Avatar extends React.PureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
+    account: ImmutablePropTypes.map,
     className: PropTypes.string,
     size: PropTypes.number.isRequired,
     style: PropTypes.object,
@@ -45,11 +45,6 @@ export default class Avatar extends React.PureComponent {
     } = this.props;
     const { hovering } = this.state;
 
-    const src = account.get('avatar');
-    const staticSrc = account.get('avatar_static');
-
-    const computedClass = classNames('account__avatar', { 'account__avatar-inline': inline }, className);
-
     const style = {
       ...this.props.style,
       width: `${size}px`,
@@ -57,19 +52,24 @@ export default class Avatar extends React.PureComponent {
       backgroundSize: `${size}px ${size}px`,
     };
 
-    if (hovering || animate) {
-      style.backgroundImage = `url(${src})`;
-    } else {
-      style.backgroundImage = `url(${staticSrc})`;
+    if (account) {
+      const src = account.get('avatar');
+      const staticSrc = account.get('avatar_static');
+
+      if (hovering || animate) {
+        style.backgroundImage = `url(${src})`;
+      } else {
+        style.backgroundImage = `url(${staticSrc})`;
+      }
     }
 
     return (
       <div
-        className={computedClass}
+        className={classNames('account__avatar', { 'account__avatar-inline': inline }, className)}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
-        data-avatar-of={`@${account.get('acct')}`}
+        data-avatar-of={account && `@${account.get('acct')}`}
       />
     );
   }