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

feat: improve sending UI layout

Browse Source
This commit is contained in:
Jeremy Kahn 2022-08-27 19:06:54 -05:00
parent fd9998fc2c
commit 7e107e8290
2 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Room/Room.test.tsx
View File

@ -59,7 +59,7 @@ describe('Room', () => {
</RouteStub>
)
const sendButton = screen.getByText('Send')
const sendButton = screen.getByLabelText('Send')
expect(sendButton).toBeDisabled()
})
@ -70,7 +70,7 @@ describe('Room', () => {
</RouteStub>
)
const sendButton = screen.getByText('Send')
const sendButton = screen.getByLabelText('Send')
const textInput = screen.getByPlaceholderText('Your message')
userEvent.type(textInput, 'hello')
expect(sendButton).not.toBeDisabled()
@ -83,7 +83,7 @@ describe('Room', () => {
</RouteStub>
)
const sendButton = screen.getByText('Send')
const sendButton = screen.getByLabelText('Send')
const textInput = screen.getByPlaceholderText('Your message')
userEvent.type(textInput, 'hello')
@ -105,7 +105,7 @@ describe('Room', () => {
</RouteStub>
)
const sendButton = screen.getByText('Send')
const sendButton = screen.getByLabelText('Send')
const textInput = screen.getByPlaceholderText('Your message')
userEvent.type(textInput, 'hello')

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

@ -1,9 +1,11 @@
import { useState } from 'react'
import { v4 as uuid } from 'uuid'
import Button from '@mui/material/Button'
import FormControl from '@mui/material/FormControl'
import Typography from '@mui/material/Typography'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Fab from '@mui/material/Fab'
import ArrowUpward from '@mui/icons-material/ArrowUpward'
import { usePeerRoom, usePeerRoomAction } from 'hooks/usePeerRoom'
import { PeerActions } from 'models/network'
@ -82,26 +84,27 @@ export function Room({
userId={userId}
className="grow overflow-auto"
/>
<form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
<FormControl fullWidth>
<TextField
variant="outlined"
value={textMessage}
onChange={handleMessageChange}
size="medium"
placeholder="Your message"
/>
</FormControl>
<Button
variant="contained"
type="submit"
disabled={textMessage.length === 0 || isMessageSending}
sx={{
marginTop: 2,
}}
>
Send
</Button>
<form onSubmit={handleMessageSubmit} className="mt-8">
<Stack direction="row" spacing={2}>
<FormControl fullWidth>
<TextField
variant="outlined"
value={textMessage}
onChange={handleMessageChange}
size="medium"
placeholder="Your message"
/>
</FormControl>
<Fab
className="shrink-0"
aria-label="Send"
type="submit"
disabled={textMessage.length === 0 || isMessageSending}
color="primary"
>
<ArrowUpward />
</Fab>
</Stack>
</form>
</div>
)