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

feat: add room name input text field

Browse Source
This commit is contained in:
Jeremy Kahn 2022-08-10 09:42:15 -05:00
parent 65196ae9c4
commit 36d059329c
3 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -30,9 +30,11 @@
"typeface-public-sans": "^1.1.13",
"typeface-roboto": "^1.1.13",
"typescript": "^4.7.4",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.8",
@ -5693,6 +5695,12 @@
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
},
"node_modules/@types/uuid": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
"dev": true
},
"node_modules/@types/ws": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@ -27640,6 +27648,12 @@
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
},
"@types/uuid": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
"dev": true
},
"@types/ws": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",

2
package.json
View File

@ -26,6 +26,7 @@
"typeface-public-sans": "^1.1.13",
"typeface-roboto": "^1.1.13",
"typescript": "^4.7.4",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
@ -59,6 +60,7 @@
]
},
"devDependencies": {
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.8",

20
src/pages/Home/Home.tsx
View File

@ -1,7 +1,16 @@
import React from 'react'
import React, { useState } from 'react'
import Typography from '@mui/material/Typography'
import TextField from '@mui/material/TextField'
import { v4 as uuid } from 'uuid'
export function Home() {
const [roomName, setRoomName] = useState(uuid())
const handleRoomNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target
setRoomName(value)
}
return (
<div className="Home">
<header className="max-w-3xl text-center mx-auto">
@ -15,6 +24,15 @@ export function Home() {
chitchatter is still a work in progress and not yet ready to be used!
</Typography>
</header>
<main className="mt-8 max-w-3xl text-center mx-auto">
<TextField
id="outlined-basic"
label="Room name"
variant="outlined"
value={roomName}
onChange={handleRoomNameChange}
/>
</main>
</div>
)
}