import React, { useState, useEffect } from "react";
import useApi from "../../../api";
import ReleaseNotesList from "./ReleaseNotesList";

const ReleaseNotesContainer = () => {
  const [state, setState] = useState({ data: [], loaded: false });

  const api = useApi();

  useEffect(() => {
    if (state.loaded) return;
    api.readReleaseNotes({
      onCompleted: data => {
        setState({ data, loaded: true });
      }
    });
  }, [api, state.loaded]);

  return <>{state.loaded && <ReleaseNotesList releaseNotes={state.data} />}</>;
};

export default ReleaseNotesContainer;