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()
- 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}
+ {message.authorId}
{
+ 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'