[#370] added pressing Enter to create a room (#384)

* [#370] added pressing Enter to create a room

* [#370] handlers renamed and moved room name check

apps/ligretto-frontend/src/containers/CreateRoomContainer/CreateRoomContainer.tsx

@@ -24,21 +24,31 @@ export const CreateRoomContainer = () => {
     [setName],
   )
 
-  const handleCreateRoomClick = useCallback(() => {
-    const roomName = name.trim()
-    dispatch(createRoomAction({ name: roomName, config: { dndEnabled: true } }))
-  }, [dispatch, name])
+  const handleCreateRoom = useCallback(() => {
+    if (name.trim() !== '' && !validationErrors) {
+      dispatch(createRoomAction({ name, config: { dndEnabled: true } }))
+    }
+  }, [name, validationErrors, dispatch])
+
+  const handleCreateRoomKeyDown = useCallback<React.KeyboardEventHandler<HTMLInputElement>>(
+    e => {
+      if (e.key === 'Enter') {
+        handleCreateRoom()
+      }
+    },
+    [handleCreateRoom],
+  )
 
   return (
     <InputWithButton>
-      <InputWithButton.Input inputProps={{ 'data-test-id': 'CreateGameInput' }} placeholder="Room name..." onChange={handleNameChange} />
+      <InputWithButton.Input
+        inputProps={{ 'data-test-id': 'CreateGameInput' }}
+        placeholder="Room name..."
+        onChange={handleNameChange}
+        onKeyDown={handleCreateRoomKeyDown}
+      />
       <InputWithButton.ButtonWrapper>
-        <InputWithButton.Button
-          data-test-id="CreateGameButton"
-          onClick={handleCreateRoomClick}
-          disabled={!name || !!validationErrors}
-          variant="contained"
-        >
+        <InputWithButton.Button data-test-id="CreateGameButton" onClick={handleCreateRoom} disabled={!name || !!validationErrors} variant="contained">
           <Typography fontSize="inherit">Create</Typography>
         </InputWithButton.Button>
       </InputWithButton.ButtonWrapper>