feat: add room name input text field

package-lock.json

@@ -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",

package.json

@@ -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",

src/pages/Home/Home.tsx

@@ -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>
   )
 }