fix longstanding non-collab username display bug, which became only v…

…isible/obvious when loading new message system directly

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

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);