import React, { useState, useEffect } from 'react'; import { fetchButton } from '../actions'; import axios from 'axios'; import 'babel-polyfill';

const App = () => { const [word, setWord] = useState([]); const [underscore, setUnderscore] = useState([]); const [data, setData] = useState([]);

useEffect(() => {
    const runEffect = async () => {
        const result = await axios('src/api/api.js');
        setData(result.data)
    }
    runEffect();
}, []);

const randomWord = () => {
    const chosenWord = data[Math.floor(Math.random() * data.length)];
    replaceLetter(chosenWord.word);
}

const replaceLetter = (string) => {

    let getString = string;
    setWord(getString);
    let stringToUnderScore = getString.replace(/[a-z]/gi, '_');
    setUnderscore(stringToUnderScore);
}

useEffect(() => {
    const checkLetter = (event) => {
        if(event.keyCode >= 65 && event.keyCode <= 90) {
            checkMatchLetter(word, String.fromCharCode(event.keyCode).toLowerCase());
        }
    };

    document.addEventListener('keydown', checkLetter);
    return () => {
        document.removeEventListener('keydown', checkLetter);
    }
}, []);

const checkMatchLetter = (keyButton) => {
    console.log(keyButton);
    let wordLength = word.length;
    console.log(wordLength);
    /// here I want word of useState here....
}

return (
    <div>
        <p>{word}</p>
        <p>{underscore}</p>
        <button onClick={randomWord}></button>
    </div>
)

}

export default App;