dictionary

import React from 'react';
import './App.css';
import CSS from 'csstype';
let words = new Set<string>();

export default function App() {
  let textInput = React.createRef<HTMLInputElement>();
  let srcInput = React.createRef<HTMLInputElement>();
  let [srcStyle, setSrcStyle] = React.useState<CSS.Properties>({
    backgroundColor: 'white'
  });
  const [message, setMessage] = React.useState<string>('');
  const [submitDisabled, setsubmitDisabled] = React.useState<boolean>(true);

  const updateSrcZone = () => {
    const { value: word } = srcInput.current!;
    if (words.has(word)) {
      setSrcStyle({
        backgroundColor: 'green'
      });
      setMessage(`Word "${word}" exists!`);
    } else {
      setSrcStyle({
        backgroundColor: 'red'
      })
      setMessage(`Word "${word}" doesn't exists!`);
    }
  }

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
    event.preventDefault();
    words.add(textInput.current!.value);
    if (srcInput.current?.value) {
      updateSrcZone();
    }
    textInput.current!.value = '';
    setsubmitDisabled(true);
  }

  const handleSrcChange = (): void => {
    updateSrcZone();
  }

  return (
    <div className="App">
      <h1>DICTIONARY</h1>
      <br />
      <input
        type="text"
        ref={textInput}
        onChange={() => setsubmitDisabled(Boolean(!textInput.current?.value.length))}
      />
      <button onClick={handleClick} disabled={submitDisabled}>submit</button>
      <br /><br /><br />
      <p>type a word to search for:</p>
      <input
        type="text" style={srcStyle}
        className="search-bar"
        ref={srcInput}
        onChange={handleSrcChange}
      />
      <br />
      <i className="message"> {message}</i>
      <br />
    </div>
  );
}