refactor: fetch notifications over graphql query

packages/web/src/config/app.ts

@@ -2,7 +2,6 @@ type Config = {
   [key: string]: string;
   baseUrl: string;
   graphqlUrl: string;
-  notificationsUrl: string;
   chatwootBaseUrl: string;
   supportEmailAddress: string;
 };
@@ -10,7 +9,6 @@ type Config = {
 const config: Config = {
   baseUrl: process.env.REACT_APP_BASE_URL as string,
   graphqlUrl: process.env.REACT_APP_GRAPHQL_URL as string,
-  notificationsUrl: process.env.REACT_APP_NOTIFICATIONS_URL as string,
   chatwootBaseUrl: 'https://app.chatwoot.com',
   supportEmailAddress: 'support@automatisch.io',
 };

packages/web/src/graphql/queries/get-notifications.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const GET_NOTIFICATIONS = gql`
+  query GetNotifications {
+    getNotifications {
+      name
+      createdAt
+      documentationUrl
+      description
+    }
+  }
+`;

packages/web/src/hooks/useNotifications.ts

@@ -1,26 +1,20 @@
-import * as React from 'react';
-import appConfig from 'config/app';
+import { useQuery } from '@apollo/client';
+import type { Notification } from '@automatisch/types';
 
-interface INotification {
-  name: string;
-  createdAt: string;
-  documentationUrl: string;
-  description: string;
+import { GET_NOTIFICATIONS } from 'graphql/queries/get-notifications';
+
+type UseNotificationsReturn = {
+  notifications: Notification[];
+  loading: boolean;
 }
 
-export default function useNotifications(): INotification[] {
-  const [notifications, setNotifications] = React.useState<INotification[]>([]);
+export default function useNotifications(): UseNotificationsReturn {
+  const { data, loading } = useQuery(GET_NOTIFICATIONS);
 
-  React.useEffect(() => {
-    fetch(`${appConfig.notificationsUrl}/notifications.json`)
-      .then((response) => response.json())
-      .then((notifications) => {
-        if (Array.isArray(notifications) && notifications.length) {
-          setNotifications(notifications);
-        }
-      })
-      .catch(console.error);
-  }, []);
+  const notifications = data?.getNotifications || [];
 
-  return notifications;
+  return {
+    loading,
+    notifications,
+  };
 }

packages/web/src/hooks/useVersion.ts

@@ -10,7 +10,7 @@ type TVersionInfo = {
 };
 
 export default function useVersion(): TVersionInfo {
-  const notifications = useNotifications();
+  const { notifications } = useNotifications();
   const { data } = useQuery(HEALTHCHECK, { fetchPolicy: 'cache-and-network' });
   const version = data?.healthcheck.version;
 

packages/web/src/pages/Notifications/index.tsx

@@ -17,7 +17,7 @@ interface INotification {
 
 export default function Updates(): React.ReactElement {
   const formatMessage = useFormatMessage();
-  const notifications = useNotifications();
+  const { notifications } = useNotifications();
 
   return (
     <Box sx={{ py: 3 }}>