import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import useApi from "../../../api";
import ReleaseNotesList from "./ReleaseNotesList";
import TimelineComponent from "../timeline/TimelineComponent";

const sort = releases =>
  releases.sort((a, b) => new Date(b.date) - new Date(a.date));

const ReleaseNotesContainer = ({ view }) => {
  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 &&
        (view === "timeline" ? (
          <TimelineComponent releases={sort(state.data)} />
        ) : (
          <ReleaseNotesList releases={sort(state.data)} />
        ))}
    </>
  );
};

ReleaseNotesContainer.propTypes = {
  view: PropTypes.string
};

export default ReleaseNotesContainer;