feat: highlight newer versions in notifications

packages/web/src/hooks/useNotifications.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import appConfig from 'config/app';
+
+interface INotification {
+  name: string;
+  createdAt: string;
+  documentationUrl: string;
+  description: string;
+}
+
+export default function useNotifications(): INotification[] {
+  const [notifications, setNotifications] = React.useState<INotification[]>([]);
+
+  React.useEffect(() => {
+    fetch(`${appConfig.notificationsUrl}/notifications.json`)
+      .then((response) => response.json())
+      .then((notifications) => {
+        if (Array.isArray(notifications) && notifications.length) {
+          setNotifications(notifications);
+        }
+      })
+      .catch(console.error);
+  }, []);
+
+  return notifications;
+}

packages/web/src/hooks/useVersion.ts

@@ -0,0 +1,35 @@
+import { useQuery } from '@apollo/client';
+import { compare } from 'compare-versions';
+
+
+import { HEALTHCHECK } from 'graphql/queries/healthcheck';
+import useNotifications from 'hooks/useNotifications';
+
+type TVersionInfo = {
+  version: string;
+  newVersionCount: number;
+}
+
+export default function useVersion(): TVersionInfo {
+  const notifications = useNotifications();
+  const { data } = useQuery(HEALTHCHECK, { fetchPolicy: 'cache-and-network' });
+  const version = data?.healthcheck.version;
+
+  const newVersionCount = notifications.reduce((count, notification) => {
+    if (!version) return 0;
+
+    // an unexpectedly invalid version would throw and thus, try-catch.
+    try {
+      const isNewer = compare(version, notification.name, '<');
+
+      return isNewer ? count + 1 : count;
+    } catch {
+      return count;
+    }
+  }, 0);
+
+  return {
+    version,
+    newVersionCount,
+  };
+}