From 23d6bf077efa13009568c4d7cfb17cb442e02836 Mon Sep 17 00:00:00 2001
From: Roman Prokopchuk <fat.ki11er.diet@gmail.com>
Date: Fri, 28 Jul 2023 21:44:22 +0700
Subject: [PATCH] [#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
---
 .../CreateRoomContainer.tsx                   | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/ligretto-frontend/src/containers/CreateRoomContainer/CreateRoomContainer.tsx b/apps/ligretto-frontend/src/containers/CreateRoomContainer/CreateRoomContainer.tsx
index 2c2e73d4..4a71ef6d 100644
--- a/apps/ligretto-frontend/src/containers/CreateRoomContainer/CreateRoomContainer.tsx
+++ b/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>