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

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

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