const api = {
  request: (id) => {
    console.log(`requesting info for ${id}`);
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(id), 1000);
    })
  }
}

let interval;
let selected;

const HelloWorld = () => {
  // const [selected, setSelected] = React.useState(null);
  const [clicked, setClicked] = React.useState(null);

  const refreshStudent = async (studentId) => {
    const response = await api.request(studentId);
    if (studentId === selected) {
      console.log(`painting markers for ${studentId}`);
    }
  }

  const selectStudent = (studentId) => {
    selected = studentId;
    refreshStudent(studentId);

    if (interval) {
      clearInterval(interval);
    }

    interval = setInterval(() => refreshStudent(studentId), 3000);
  }

  return (
    <div>
      Students ( { clicked })

      <div className="button" onClick={() => selectStudent(1)}>
        Student 1
      </div>

      <div className="button" onClick={() => selectStudent(2)}>
        Student 2
      </div>
    </div>
   );
};


ReactDOM.render(<HelloWorld />, document.getElementById('app'));