Refactor ReleaseNotesContainer to TypeScript, implement SWR for data fetching, and update release note structure

frontend/src/features/about/releaseNotes/ReleaseNotesContainer.js

@@ -1,35 +0,0 @@
-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;

frontend/src/features/about/releaseNotes/ReleaseNotesContainer.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import ReleaseNotesList from "./ReleaseNotesList";
+import TimelineComponent from "../timeline/TimelineComponent";
+import { routes, get, endpoints } from "../../../utils/api";
+import useSWR from "swr";
+import { fetcher } from "utils/swr";
+import { blip } from "utils";
+import { dtos } from "types";
+
+const sort = (releases: dtos.ReleaseNote[]) =>
+  releases.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+type Props = {
+  view: string;
+};
+
+const ReleaseNotesContainer: React.FC<Props> = ({ view }) => {
+  const { data, isLoading } = useSWR<dtos.ReleaseNote[], Error>(endpoints.system.releaseNotes, fetcher, {
+    revalidateOnFocus: false,
+    onError: err => blip.error(err.message)
+  });
+
+  if (isLoading || !data) return null;
+
+  return (
+    <>
+      {view === "timeline" ? <TimelineComponent releases={sort(data)} /> : <ReleaseNotesList releases={sort(data)} />}
+    </>
+  );
+};
+
+export default ReleaseNotesContainer;

frontend/src/types/dtos.ts

@@ -7,3 +7,9 @@ export type SystemVersion = {
   api: SystemVersionElement;
   server: SystemVersionElement;
 };
+
+export type ReleaseNote = {
+  version: string;
+  date: string;
+  notes: string[];
+};

frontend/src/utils/api.js

@@ -11,7 +11,6 @@ const securityRoute = `${apiHost}/security`;
 
 const routes = {
   permissions: `${securityRoute}/permissions`,
-  releaseNotes: `${systemRoute}/release-notes`,
   resetCache: `${systemRoute}/reset-cache`,
   machines: `${networkRoute}/machines`,
   wakeMachine: `${powerActionsRoute}/wake`,