import React, { useState, useEffect } from "react";

function GitHubProfile() {
  const [inputUserName, setInputUserName] = useState("dasithKuruppu");
  const [gitHubUserInfo, getGitHubUserInfo] = useGetGitHubInfo(null);

  const displayNameButtonClick = () => {
    getGitHubUserInfo(inputUserName);
  };

  const onInputTextChange = e => {
    setInputUserName(e.currentTarget.value);
  };

  return (
    <div>
      <h1>Hello, {gitHubUserInfo && gitHubUserInfo.name}</h1>
      <input value={inputUserName} onChange={onInputTextChange} />
      <button onClick={displayNameButtonClick}>Fetch Github Information</button>
      <ul>
        {gitHubUserInfo &&
          Object.keys(gitHubUserInfo).map(key => {
            return <li key={key}>{`${key} : ${gitHubUserInfo[key]}`} </li>;
          })}
      </ul>
    </div>
  );
}