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

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 });

  useEffect(() => {
    if (state.loaded) return;
    get(routes.releaseNotes, {
      onCompleted: data => setState({ data, loaded: true })
    });
  }, [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;