Username prefilled

sankkakeii · Feb 19, 2022 · 4fa4407 · 4fa4407
1 parent 7cf6b11
commit 4fa4407
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -88,7 +88,7 @@ function App () {
     <ThemeProvider theme={theme}>
       <BrowserRouter>
         <Routes>
-          <Route path='/' element={<HomeComponent theme={themeMode} setOuterUsername={setUsername} setTheme={setThemeMode} toast={toast} socket={socket} />} />
+          <Route path='/' element={<HomeComponent theme={themeMode} username={username} setUsername={setUsername} setTheme={setThemeMode} toast={toast} socket={socket} />} />
           <Route path='/local-multiplayer' element={<LocalMultiplayer />} />
           <Route path='/room' element={<WaitingRoom socket={socket} />} />
           <Route path='/matchmake' element={<Matchmaking socket={socket} />} />

diff --git a/client/src/components/HomeComponent.js b/client/src/components/HomeComponent.js
@@ -17,7 +17,7 @@ import {
 import ArrowIcon from '@mui/icons-material/ArrowForwardIosRounded'
 import SettingsSubmenu from './SettingsSubmenu'
 
-function HomeComponent ({ toast, socket, setTheme, theme, setOuterUsername }) {
+function HomeComponent ({ toast, socket, setTheme, theme, setUsername, username }) {
   const [roomName, setRoomName] = useState('')
   const [entered, setEntered] = useState(false)
   const [settingsMenu, setSettingsMenu] = useState(false)
@@ -175,8 +175,9 @@ function HomeComponent ({ toast, socket, setTheme, theme, setOuterUsername }) {
               <SettingsSubmenu
                 setTheme={setTheme}
                 toast={toast}
-                setOuterUsername={setOuterUsername}
+                setUsername={setUsername}
                 theme={theme}
+                username={username}
                 setSettingsMenu={setSettingsMenu}
               />
             </Box>
@@ -185,7 +186,7 @@ function HomeComponent ({ toast, socket, setTheme, theme, setOuterUsername }) {
         <Slide timeout={600} direction='up' in={entered === 2}>
           <Box
             justifySelf='flex-end'
-            py={2}
+            py={1}
             px={3}
             borderRadius='1rem 1rem 0 0'
             bgcolor='rgba(155, 155, 155, 0.2)'

diff --git a/client/src/components/SettingsSubmenu.js b/client/src/components/SettingsSubmenu.js
@@ -13,22 +13,23 @@ function SettingsSubmenu ({
   setSettingsMenu,
   setTheme,
   theme,
-  setOuterUsername,
-  toast
+  setUsername,
+  toast,
+  username
 }) {
-  const [username, setUsername] = useState('')
+  const [innerUsername, setInnerUsername] = useState(username)
   const [error, setError] = useState('')
 
   const handleSubmit = () => {
-    if (username.length < 3) {
+    if (innerUsername.length < 3) {
       setError('Minimum 3 characters required')
       return
     }
-    if (username.length > 10) {
+    if (innerUsername.length > 10) {
       setError('Maximum 10 characters allowed')
       return
     }
-    if (!username.match(/^[0-9a-zA-Z_]+$/)) {
+    if (!innerUsername.match(/^[0-9a-zA-Z_]+$/)) {
       setError('Underscore is the only special character allowed')
       return
     }
@@ -42,14 +43,14 @@ function SettingsSubmenu ({
       theme: theme || 'dark'
     })
     setError('')
-    setOuterUsername(username)
-    window.localStorage.setItem('username', username)
+    setUsername(innerUsername)
+    window.localStorage.setItem('username', innerUsername)
     setSettingsMenu(false)
   }
 
   return (
-    <Stack py={5} spacing={1}>
-      <Stack mb={2} direction='row' alignItems='center'>
+    <Stack py={5} spacing={2}>
+      <Stack direction='row' alignItems='center'>
         <Button
           onClick={() => setSettingsMenu(false)}
           color='primary'
@@ -64,6 +65,7 @@ function SettingsSubmenu ({
         </Button>
         <Typography
           px={4}
+          py='6px'
           flexGrow={1}
           textAlign='center'
           color='primary.main'
@@ -96,19 +98,19 @@ function SettingsSubmenu ({
         error={error}
         size='small'
         label='Change username'
-        value={username}
+        value={innerUsername}
         autoComplete='off'
         onChange={e => {
           if (e.target.value.length === 0) setError('')
-          setUsername(e.target.value)
+          setInnerUsername(e.target.value)
         }}
         InputProps={{
-          endAdornment: username.length
+          endAdornment: innerUsername.length && username !== innerUsername
             ? (
               <InputAdornment position='end'>
                 <IconButton
                   color='secondary'
-                  disabled={username.length === 0}
+                  disabled={innerUsername.length === 0}
                   onClick={handleSubmit}
                   edge='end'
                 >