Look up comment username from userId

webapp/src/components/comment.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {FC} from 'react'
+import React, {FC, useEffect, useState} from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
 
 import {IBlock} from '../blocks/block'
@@ -11,18 +11,30 @@ import DeleteIcon from '../widgets/icons/delete'
 import OptionsIcon from '../widgets/icons/options'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
+import {UserCache} from '../userCache'
 import './comment.scss'
 
 type Props = {
     comment: IBlock
-    username: string
+    userId: string
     userImageUrl: string
     intl: IntlShape
 }
 
 const Comment: FC<Props> = (props: Props) => {
-    const {comment, username, userImageUrl, intl} = props
+    const {comment, userId, userImageUrl, intl} = props
     const html = Utils.htmlFromMarkdown(comment.title)
+
+    const [username, setUsername] = useState('')
+
+    useEffect(() => {
+        UserCache.shared.getUser(userId).then((user) => {
+            if (user) {
+                setUsername(user.username)
+            }
+        })
+    }, [])
+
     return (
         <div
             key={comment.id}

webapp/src/components/commentsList.tsx

@@ -65,9 +65,7 @@ class CommentsList extends React.Component<Props, State> {
                         key={comment.id}
                         comment={comment}
                         userImageUrl={userImageUrl}
-
-                        // TODO: Look up user name from userId
-                        username={comment.userId}
+                        userId={comment.userId}
                     />
                 ))}
 

webapp/src/octoClient.ts

@@ -88,8 +88,18 @@ class OctoClient {
         return user
     }
 
+    async getUser(userId: string): Promise<IUser | undefined> {
+        const path = `/api/v1/users/${encodeURIComponent(userId)}`
+        const response = await fetch(this.serverUrl + path, {headers: this.headers()})
+        if (response.status !== 200) {
+            return undefined
+        }
+        const user = (await this.getJson(response)) as IUser
+        return user
+    }
+
     async getSubtree(rootId?: string, levels = 2): Promise<IBlock[]> {
-        let path = `/api/v1/blocks/${rootId}/subtree?l=${levels}`
+        let path = `/api/v1/blocks/${encodeURIComponent(rootId || '')}/subtree?l=${levels}`
         if (this.readToken) {
             path += `&read_token=${this.readToken}`
         }

webapp/src/userCache.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import octoClient from './octoClient'
+import {IUser} from './user'
+
+class UserCache {
+    static shared = new UserCache()
+
+    private cache = new Map<string, IUser>()
+
+    async getUser(userId: string): Promise<IUser | undefined> {
+        let user = this.cache.get(userId)
+        if (!user) {
+            user = await octoClient.getUser(userId)
+            if (user) {
+                this.cache.set(userId, user)
+            }
+        }
+
+        return user || undefined
+    }
+
+    clear(): void {
+        this.cache.clear()
+    }
+}
+
+export {UserCache}