Merge pull request #12837 from nanaya/user-card-more-mobx

Move user card state to mobx

Author: notbakaneko

resources/js/components/user-card.tsx

@@ -6,7 +6,7 @@ import FriendButton from 'components/friend-button';
 import Reportable from 'interfaces/reportable';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
-import * as _ from 'lodash';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
 import * as React from 'react';
@@ -67,17 +67,14 @@ export class UserCard extends React.PureComponent<Props, State> {
     username: trans('users.card.loading'),
   };
 
-  state: Readonly<State> = {
-    avatarLoaded: false,
-    backgroundLoaded: false,
-  };
-
+  @observable private avatarLoaded = false;
+  @observable private backgroundLoaded = false;
   private readonly popupMenuState = new PopupMenuState();
   private url?: string;
 
   private get canMessage() {
     return !this.isSelf
-      && _.find(core.currentUser?.blocks ?? [], { target_id: this.user.id }) == null;
+      && !core.currentUserModel.blocks.has(this.user.id);
   }
 
   private get isOnline() {
@@ -104,13 +101,10 @@ export class UserCard extends React.PureComponent<Props, State> {
     return this.props.user || UserCard.userLoading;
   }
 
-  onAvatarLoad = () => {
-    this.setState({ avatarLoaded: true });
-  };
-
-  onBackgroundLoad = () => {
-    this.setState({ backgroundLoaded: true });
-  };
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
 
   render() {
     if (this.props.mode === 'brick') {
@@ -156,7 +150,7 @@ export class UserCard extends React.PureComponent<Props, State> {
   }
 
   renderAvatar() {
-    const modifiers = { loaded: this.state.avatarLoaded };
+    const modifiers = { loaded: this.avatarLoaded };
     const hasAvatar = present(this.user.avatar_url) && !this.isUserNotFound;
 
     return (
@@ -177,44 +171,28 @@ export class UserCard extends React.PureComponent<Props, State> {
   }
 
   renderBackground() {
-    let background: React.ReactNode;
-    let backgroundLink: React.ReactNode;
-
-    const overlayCssClass = classWithModifiers(
+    const overlay = (<div className={classWithModifiers(
       'user-card__background-overlay',
-      this.isOnline ? ['online'] : [],
-    );
-
-    if (this.user.cover?.url != null) {
-      let backgroundCssClass = 'user-card__background';
-      if (!this.state.backgroundLoaded) {
-        backgroundCssClass += ' user-card__background--loading';
-      }
-
-      background = (
-        <>
-          <img className={backgroundCssClass} onLoad={this.onBackgroundLoad} src={this.user.cover.url} />
-          <div className={overlayCssClass} />
-        </>
-      );
-    } else {
-      background = <div className={overlayCssClass} />;
-    }
-
-    if (this.isUserVisible) {
-      backgroundLink = (
-        <a
-          className='user-card__background-container'
-          href={this.url}
-        >
+      { online: this.isOnline },
+    )} />);
+
+    const background = this.user.cover?.url == null
+      ? overlay
+      : (<>
+        <img
+          className={classWithModifiers('user-card__background', { loading: !this.backgroundLoaded })}
+          onLoad={this.onBackgroundLoad}
+          src={this.user.cover.url}
+        />
+        {overlay}
+      </>);
+
+    return this.isUserVisible
+      ? (
+        <a className='user-card__background-container' href={this.url}>
           {background}
         </a>
-      );
-    } else {
-      backgroundLink = background;
-    }
-
-    return backgroundLink;
+      ) : background;
   }
 
   renderIcons() {
@@ -345,6 +323,16 @@ export class UserCard extends React.PureComponent<Props, State> {
     );
   }
 
+  @action
+  private readonly onAvatarLoad = () => {
+    this.avatarLoaded = true;
+  };
+
+  @action
+  private readonly onBackgroundLoad = () => {
+    this.backgroundLoaded = true;
+  };
+
   private readonly renderMenuItems = () => (
     <div className='simple-menu'>
       {this.canMessage && (