diff --git a/src/components/LoginPage/NameInput/NameInput.jsx b/src/components/LoginPage/NameInput/NameInput.jsx index f07ffd0..22da873 100644 --- a/src/components/LoginPage/NameInput/NameInput.jsx +++ b/src/components/LoginPage/NameInput/NameInput.jsx @@ -2,7 +2,7 @@ import React, { useState, useContext, useEffect, useCallback } from 'react'; import { SocketContext } from '../../../App'; import useInput from '../../../hooks/useInput'; import './NameInput.css'; -import Overlay from '../../Overlay/Overlay'; +import useKeyPress from '../../../hooks/useKeyPress'; const NameInput = ({ isRoomPrivate, roomId }) => { const socket = useContext(SocketContext); @@ -14,21 +14,12 @@ const NameInput = ({ isRoomPrivate, roomId }) => { socket.emit('player:login', { name: nickname.value, password: password.value, roomId: roomId }); }, [socket, nickname.value, password.value, roomId]); + useKeyPress('Enter', handleButtonClick); useEffect(() => { socket.on('error:wrongPassword', () => { setIsPasswordWrong(true); }); - const keyDownHandler = event => { - if (event.key === 'Enter') { - event.preventDefault(); - handleButtonClick(); - } - }; - document.addEventListener('keydown', keyDownHandler); - return () => { - document.removeEventListener('keydown', keyDownHandler); - }; - }, [socket, handleButtonClick]); + }, [socket]); return (
diff --git a/src/hooks/useKeyPress.js b/src/hooks/useKeyPress.js new file mode 100644 index 0000000..072a74c --- /dev/null +++ b/src/hooks/useKeyPress.js @@ -0,0 +1,15 @@ +import { useEffect } from 'react'; +export default function useKeyPress(targetKey, callback) { + const keyPressHandler = ({ key }) => { + if (key === targetKey) { + callback(); + } + }; + + useEffect(() => { + window.addEventListener('keydown', keyPressHandler); + return () => { + window.removeEventListener('keydown', keyPressHandler); + }; + }, []); +}