From 59a93c6fd080008738986330ec8ebe7d85de906b Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sun, 4 Sep 2022 09:39:18 -0500
Subject: [PATCH] feat: display user-friendly peer names

---
 package-lock.json                                  | 14 ++++++++++++++
 package.json                                       |  1 +
 src/components/Message/Message.test.tsx            |  3 ++-
 src/components/Message/Message.tsx                 |  3 ++-
 src/components/PeerNameDisplay/PeerNameDisplay.tsx |  9 +++++++++
 src/components/PeerNameDisplay/index.ts            |  1 +
 6 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PeerNameDisplay/PeerNameDisplay.tsx
 create mode 100644 src/components/PeerNameDisplay/index.ts

diff --git a/package-lock.json b/package-lock.json
index a9c8be1..e9cb4e8 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b76d441..769504b 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Message/Message.test.tsx b/src/components/Message/Message.test.tsx
index f5b6518..2708459 100644
--- a/src/components/Message/Message.test.tsx
+++ b/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))
   })
 })
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index d10caa9..dece532 100644
--- a/src/components/Message/Message.tsx
+++ b/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={{
diff --git a/src/components/PeerNameDisplay/PeerNameDisplay.tsx b/src/components/PeerNameDisplay/PeerNameDisplay.tsx
new file mode 100644
index 0000000..e9adea9
--- /dev/null
+++ b/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)}</>
+}
diff --git a/src/components/PeerNameDisplay/index.ts b/src/components/PeerNameDisplay/index.ts
new file mode 100644
index 0000000..77f427c
--- /dev/null
+++ b/src/components/PeerNameDisplay/index.ts
@@ -0,0 +1 @@
+export * from './PeerNameDisplay'