feat: display user-friendly peer names

package-lock.json

@@ -22,6 +22,7 @@
         "@types/react-dom": "^18.0.6",
         "classnames": "^2.3.1",
         "fast-memoize": "^2.5.2",
+        "fun-animal-names": "^0.1.1",
         "localforage": "^1.10.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -11242,6 +11243,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fun-animal-names": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/fun-animal-names/-/fun-animal-names-0.1.1.tgz",
+      "integrity": "sha512-QAGZiESFUSlcJ17PMBtuzsmwYOI8KK9s4HAGYbxIzWP+IxvioDG/yLRiRjB+BOxgtoELCd1/Hii7sDKsm4htpw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -32325,6 +32334,11 @@
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "optional": true
     },
+    "fun-animal-names": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/fun-animal-names/-/fun-animal-names-0.1.1.tgz",
+      "integrity": "sha512-QAGZiESFUSlcJ17PMBtuzsmwYOI8KK9s4HAGYbxIzWP+IxvioDG/yLRiRjB+BOxgtoELCd1/Hii7sDKsm4htpw=="
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "@types/react-dom": "^18.0.6",
     "classnames": "^2.3.1",
     "fast-memoize": "^2.5.2",
+    "fun-animal-names": "^0.1.1",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Message/Message.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react'
+import { funAnimalName } from 'fun-animal-names'
 
 import { ReceivedMessage, UnsentMessage } from 'models/chat'
 
@@ -37,6 +38,6 @@ describe('Message', () => {
   test('renders message author', () => {
     render(<Message message={mockReceivedMessage} userId={mockUserId} />)
 
-    screen.getByText(mockUserId)
+    screen.getByText(funAnimalName(mockUserId))
   })
 })

src/components/Message/Message.tsx

@@ -8,6 +8,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 import { Message as IMessage, isMessageReceived } from 'models/chat'
+import { PeerNameDisplay } from 'components/PeerNameDisplay'
 
 export interface MessageProps {
   message: IMessage
@@ -76,7 +77,7 @@ export const Message = ({ message, userId }: MessageProps) => {
           textAlign: message.authorId === userId ? 'right' : 'left',
         }}
       >
-        {message.authorId}
+        <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
       </Typography>
       <Box
         sx={{

src/components/PeerNameDisplay/PeerNameDisplay.tsx

@@ -0,0 +1,9 @@
+import { funAnimalName } from 'fun-animal-names'
+
+interface PeerNameDisplayProps {
+  children: string
+}
+
+export const PeerNameDisplay = ({ children }: PeerNameDisplayProps) => {
+  return <>{funAnimalName(children)}</>
+}

src/components/PeerNameDisplay/index.ts

@@ -0,0 +1 @@
+export * from './PeerNameDisplay'