Přepracování loginu přes ref

client/src/Login.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useRef } from 'react';
 import { Button } from 'react-bootstrap';
 import { useAuth } from './context/auth';
 import './Login.css';
@@ -8,16 +8,17 @@ import './Login.css';
  */
 export default function Login() {
   const auth = useAuth();
-  const [loginName, setLoginName] = useState<string>('');
+  const loginRef = useRef<HTMLInputElement>(null);
 
   if (!auth || !auth.login) {
     return <div className='login'>
       <div className='login-inner'>
         <p style={{ fontSize: "12px", marginTop: "10px" }}>Zobrazované jméno by mělo být ideálně vaše jméno a příjmení, nebo přezdívka, pod kterou vás kolegové dokážou snadno identifikovat. Jméno lze kdykoliv upravit/smazat v local storage prohlížeče.<br />PS: Enter nefunguje</p>
-        Zobrazované jméno: <input style={{ marginTop: "10px" }} onChange={(e) => setLoginName(e.target.value)} type='text' />
+        Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' />
         <Button onClick={() => {
-          if (loginName?.length > 0) {
-            auth?.setLogin(loginName);
+          // Netuším proč mě TypeScript seřve když se to pokusím zchainovat dohromady
+          if (loginRef?.current?.value && loginRef?.current?.value.length > 0) {
+            auth?.setLogin(loginRef.current.value);
           }
         }} style={{ marginTop: "20px" }}>Uložit</Button>
       </div>