From ee1d4f5e9bfa2949186583fca7e860759cfd36e9 Mon Sep 17 00:00:00 2001
From: William Stein <wstein@sagemath.com>
Date: Wed, 11 Dec 2024 21:41:30 +0000
Subject: [PATCH] fix longstanding non-collab username display bug, which
 became only visible/obvious when loading new message system directly

---
 src/packages/frontend/client/users.ts |  2 ++
 src/packages/frontend/users/user.tsx  | 28 ++++++++++++++++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/packages/frontend/client/users.ts b/src/packages/frontend/client/users.ts
index 5d9bb964de..1cc7847dbe 100644
--- a/src/packages/frontend/client/users.ts
+++ b/src/packages/frontend/client/users.ts
@@ -70,6 +70,7 @@ export class UsersClient {
   // get map from account_id to first_name, last_name (or undefined if no account); cached
   // for about a minute client side.
   getNames = reuseInFlight(async (account_ids: string[]) => {
+    console.log("getNames", { account_ids });
     const x: {
       [account_id: string]:
         | { first_name: string; last_name: string }
@@ -84,6 +85,7 @@ export class UsersClient {
       }
     }
     if (v.length > 0) {
+      console.log("api: /accounts/get-names", { v });
       const { names } = await api("/accounts/get-names", { account_ids: v });
       for (const account_id of v) {
         // iterate over v to record accounts that don't exist too
diff --git a/src/packages/frontend/users/user.tsx b/src/packages/frontend/users/user.tsx
index cdebc15fa9..a4a19ac824 100644
--- a/src/packages/frontend/users/user.tsx
+++ b/src/packages/frontend/users/user.tsx
@@ -3,14 +3,12 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-//TODO: Make useable without passing in user_map
-
-import { redux } from "../app-framework";
-import { Gap, TimeAgo, Tip } from "../components";
+import { useTypedRedux } from "@cocalc/frontend/app-framework";
+import { Gap, TimeAgo, Tip } from "@cocalc/frontend/components";
 import { is_valid_uuid_string, trunc_middle } from "@cocalc/util/misc";
 import { UserMap } from "./types";
 import { actions } from "./actions";
-import { Avatar } from "../account/avatar/avatar";
+import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
 
 interface Props {
   account_id: string;
@@ -25,7 +23,23 @@ interface Props {
   trunc?: number;
 }
 
+// We have to split the component into two like this because
+// it's expensive to invoke the useTypedRedux hook, and we can
+// have a large number of names, in general.
 export function User(props: Props) {
+  if (props.user_map != null) {
+    return <User_map_given {...props} />;
+  } else {
+    return <User_nomap {...props} />;
+  }
+}
+
+function User_nomap(props: Props) {
+  const user_map = useTypedRedux("users", "user_map");
+  return <User_map_given {...props} user_map={user_map} />;
+}
+
+function User_map_given(props: Props) {
   function render_last_active() {
     if (props.last_active) {
       return (
@@ -75,8 +89,8 @@ export function User(props: Props) {
 
   const { addonAfter, style } = props;
 
-  const user_map = props.user_map ?? redux.getStore("users").get("user_map");
-  if (user_map == null || user_map.size === 0) {
+  const user_map = props.user_map;
+  if (user_map == null) {
     return <span style={style}>Loading...{addonAfter}</span>;
   }
   let info = user_map?.get(props.account_id);