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')

45
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,26 +84,27 @@ 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">
<FormControl fullWidth> <Stack direction="row" spacing={2}>
<TextField <FormControl fullWidth>
variant="outlined" <TextField
value={textMessage} variant="outlined"
onChange={handleMessageChange} value={textMessage}
size="medium" onChange={handleMessageChange}
placeholder="Your message" size="medium"
/> placeholder="Your message"
</FormControl> />
<Button </FormControl>
variant="contained" <Fab
type="submit" className="shrink-0"
disabled={textMessage.length === 0 || isMessageSending} aria-label="Send"
sx={{ type="submit"
marginTop: 2, disabled={textMessage.length === 0 || isMessageSending}
}} color="primary"
> >
Send <ArrowUpward />
</Button> </Fab>
</Stack>
</form> </form>
</div> </div>
) )