{"size": 1245, "ext": "js", "max_stars_repo_path": "client/src/components/FactButton.js", "max_stars_repo_name": "ctninman/times-tables-master-project", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/FactButton.js", "max_issues_repo_name": "ctninman/times-tables-master-project", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/FactButton.js", "max_forks_repo_name": "ctninman/times-tables-master-project", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.6428571429, "max_line_length": 88, "alphanum_fraction": 0.6763052209}
import {useState, useEffect, useRef} from 'react'

function FactButton ({mastery}) {

  const firstUpdate = useRef(true);

  const [factMasteryLevel, setFactMasteryLevel] = useState(mastery.mastery_level)
  const [factTimesAnswered, setFactTimesAnswered] = useState(mastery.times_answered)
  const [factTimesCorrect, setFactTimesCorrect] = useState(mastery.times_correct)
  
  useEffect (() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }
    fetch(`/masteries/${mastery.id}`, {
      method: "PATCH",
      headers: {"Content-Type": "application/json",},
      body: JSON.stringify(
        {mastery_level: factMasteryLevel,
          times_answered: factTimesAnswered,
          times_correct: factTimesCorrect}
      ),
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
  }, [factTimesAnswered])

  function handleMasteryUpdate () {
    if (factMasteryLevel < 10) {
      setFactMasteryLevel(prevCount => prevCount + 1)
    }
    setFactTimesAnswered(prevCount => prevCount + 1)
    setFactTimesCorrect(prevCount => prevCount + 1)
  }

  return (
    <button onClick={handleMasteryUpdate}>{mastery.problem.multiplication_fact}</button>
  )
}

export default FactButton