reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

feat: improve layout of room

Browse Source
This commit is contained in:
Jeremy Kahn 2022-08-26 09:39:01 -05:00
parent 4584e0f42f
commit fd9998fc2c
4 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -20,6 +20,7 @@
"@types/node": "^18.6.5",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"classnames": "^2.3.1",
"fast-memoize": "^2.5.2",
"localforage": "^1.10.0",
"react": "^18.2.0",
@ -7753,6 +7754,11 @@
"resolved": "https://registry.npmjs.org/class-is/-/class-is-1.1.0.tgz",
"integrity": "sha512-rhjH9AG1fvabIDoGRVH587413LPjTZgmDF9fOFCbFJQV4yuocX1mHxxvXI4g3cGwbVY9wAYIoKlg1N79frJKQw=="
},
"node_modules/classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"node_modules/clean-css": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@ -29134,6 +29140,11 @@
"resolved": "https://registry.npmjs.org/class-is/-/class-is-1.1.0.tgz",
"integrity": "sha512-rhjH9AG1fvabIDoGRVH587413LPjTZgmDF9fOFCbFJQV4yuocX1mHxxvXI4g3cGwbVY9wAYIoKlg1N79frJKQw=="
},
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"clean-css": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"@types/node": "^18.6.5",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"classnames": "^2.3.1",
"fast-memoize": "^2.5.2",
"localforage": "^1.10.0",
"react": "^18.2.0",

13
src/components/ChatTranscript/ChatTranscript.tsx
View File

@ -1,14 +1,21 @@
import { HTMLAttributes } from 'react'
import cx from 'classnames'
import { Message as IMessage } from 'models/chat'
import { Message } from 'components/Message'
export interface ChatTranscriptProps {
export interface ChatTranscriptProps extends HTMLAttributes<HTMLDivElement> {
messageLog: Array<IMessage>
userId: string
}
export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => {
export const ChatTranscript = ({
className,
messageLog,
userId,
}: ChatTranscriptProps) => {
return (
<div className="ChatTranscript flex flex-col">
<div className={cx('ChatTranscript flex flex-col', className)}>
{messageLog.map(message => {
return <Message key={message.id} message={message} userId={userId} />
})}

9
src/components/Room/Room.tsx
View File

@ -75,9 +75,13 @@ export function Room({
})
return (
<div className="p-4">
<div className="h-full p-4 flex flex-col">
<Typography>Room ID: {roomId}</Typography>
<Typography>Open this page in another tab.</Typography>
<ChatTranscript
messageLog={messageLog}
userId={userId}
className="grow overflow-auto"
/>
<form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
<FormControl fullWidth>
<TextField
@ -99,7 +103,6 @@ export function Room({
Send
</Button>
</form>
<ChatTranscript messageLog={messageLog} userId={userId} />
</div>
)
}