From e7d360baaeb837385323444fa85cacdab2ea7087 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Jul 2021 19:31:27 -0500
Subject: [PATCH] ProfileDropdown: memoize otherAccounts for performance

---
 app/soapbox/components/sidebar_menu.js        | 20 ++---------
 .../ui/components/profile_dropdown.js         | 35 ++++++++++---------
 app/soapbox/selectors/index.js                | 15 ++++++++
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 583f54a09..caabe7f0c 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -13,13 +13,12 @@ import Icon from './icon';
 import DisplayName from './display_name';
 import { closeSidebar } from '../actions/sidebar';
 import { isStaff } from '../utils/accounts';
-import { makeGetAccount } from '../selectors';
+import { makeGetAccount, makeGetOtherAccounts } from '../selectors';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import ThemeToggle from '../features/ui/components/theme_toggle_container';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
-import { List as ImmutableList, is as ImmutableIs } from 'immutable';
+import { is as ImmutableIs } from 'immutable';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { createSelector } from 'reselect';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -46,21 +45,6 @@ const messages = defineMessages({
   add_account: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
 });
 
-const makeGetOtherAccounts = () => {
-  return createSelector(
-    [(accounts, authUsers, me) => {
-      return authUsers
-        .keySeq()
-        .reduce((list, id) => {
-          if (id === me) return list;
-          const account = accounts.get(id);
-          return account ? list.push(account) : list;
-        }, ImmutableList());
-    }],
-    otherAccounts => otherAccounts,
-  );
-};
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
   const getOtherAccounts = makeGetOtherAccounts();
diff --git a/app/soapbox/features/ui/components/profile_dropdown.js b/app/soapbox/features/ui/components/profile_dropdown.js
index 8e26f0ea3..c58201a64 100644
--- a/app/soapbox/features/ui/components/profile_dropdown.js
+++ b/app/soapbox/features/ui/components/profile_dropdown.js
@@ -8,33 +8,34 @@ import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { isStaff } from 'soapbox/utils/accounts';
 import { defineMessages, injectIntl } from 'react-intl';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
-import { List as ImmutableList, is as ImmutableIs } from 'immutable';
+import { is as ImmutableIs } from 'immutable';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
+import { makeGetOtherAccounts } from 'soapbox/selectors';
 
 const messages = defineMessages({
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
 });
 
-const mapStateToProps = state => {
-  const me = state.get('me');
+const makeMapStateToProps = () => {
+  const getOtherAccounts = makeGetOtherAccounts();
 
-  const otherAccounts =
-    state
-      .getIn(['auth', 'users'])
-      .keySeq()
-      .reduce((list, id) => {
-        if (id === me) return list;
-        const account = state.getIn(['accounts', id]);
-        return account ? list.push(account) : list;
-      }, ImmutableList());
+  const mapStateToProps = state => {
+    const me = state.get('me');
 
-  return {
-    account: state.getIn(['accounts', me]),
-    otherAccounts,
-    isStaff: isStaff(state.getIn(['accounts', me])),
+    const accounts = state.get('accounts');
+    const authUsers = state.getIn(['auth', 'users']);
+    const otherAccounts = getOtherAccounts(accounts, authUsers, me);
+
+    return {
+      account: state.getIn(['accounts', me]),
+      otherAccounts,
+      isStaff: isStaff(state.getIn(['accounts', me])),
+    };
   };
+
+  return mapStateToProps;
 };
 
 class ProfileDropdown extends React.PureComponent {
@@ -130,4 +131,4 @@ class ProfileDropdown extends React.PureComponent {
 
 }
 
-export default injectIntl(connect(mapStateToProps)(ProfileDropdown));
+export default injectIntl(connect(makeMapStateToProps)(ProfileDropdown));
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
index 85006973a..81882e646 100644
--- a/app/soapbox/selectors/index.js
+++ b/app/soapbox/selectors/index.js
@@ -195,3 +195,18 @@ export const makeGetReport = () => {
     },
   );
 };
+
+export const makeGetOtherAccounts = () => {
+  return createSelector(
+    [(accounts, authUsers, me) => {
+      return authUsers
+        .keySeq()
+        .reduce((list, id) => {
+          if (id === me) return list;
+          const account = accounts.get(id);
+          return account ? list.push(account) : list;
+        }, ImmutableList());
+    }],
+    otherAccounts => otherAccounts,
+  );
+};