refactor: fetch notifications over graphql query

Author: barinali

.devcontainer/boot.sh

@@ -29,7 +29,6 @@ rm -rf .env
 echo "
 PORT=$WEB_PORT
 REACT_APP_GRAPHQL_URL=http://localhost:$BACKEND_PORT/graphql
-REACT_APP_NOTIFICATIONS_URL=https://notifications.automatisch.io
 " >> .env
 cd $CURRENT_DIR
 

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

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

@@ -0,0 +1,15 @@
+import axios from '../../helpers/axios-with-proxy';
+
+const NOTIFICATIONS_URL = 'https://notifications.automatisch.io/notifications.json';
+
+const getNotifications = async () => {
+  try {
+    const { data: notifications = [] } = await axios.get(NOTIFICATIONS_URL);
+
+    return notifications;
+  } catch (err) {
+    return [];
+  }
+};
+
+export default getNotifications;

packages/backend/src/graphql/query-resolvers.ts

@@ -16,13 +16,14 @@ import getExecutions from './queries/get-executions';
 import getFlow from './queries/get-flow';
 import getFlows from './queries/get-flows';
 import getInvoices from './queries/get-invoices.ee';
+import getNotifications from './queries/get-notifications';
 import getPaddleInfo from './queries/get-paddle-info.ee';
 import getPaymentPlans from './queries/get-payment-plans.ee';
 import getPermissionCatalog from './queries/get-permission-catalog.ee';
 import getRole from './queries/get-role.ee';
 import getRoles from './queries/get-roles.ee';
-import getSamlAuthProvider from './queries/get-saml-auth-provider.ee';
 import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-role-mappings.ee';
+import getSamlAuthProvider from './queries/get-saml-auth-provider.ee';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions';
 import getSubscriptionStatus from './queries/get-subscription-status.ee';
 import getTrialStatus from './queries/get-trial-status.ee';
@@ -51,6 +52,7 @@ const queryResolvers = {
   getFlow,
   getFlows,
   getInvoices,
+  getNotifications,
   getPaddleInfo,
   getPaymentPlans,
   getPermissionCatalog,

packages/backend/src/graphql/schema.graphql

@@ -46,6 +46,7 @@ type Query {
   getPermissionCatalog: PermissionCatalog
   getRole(id: String!): Role
   getRoles: [Role]
+  getNotifications: [Notification]
   getSamlAuthProvider: SamlAuthProvider
   getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
   getSubscriptionStatus: GetSubscriptionStatus
@@ -787,6 +788,13 @@ input UpdateAppAuthClientInput {
   active: Boolean
 }
 
+type Notification {
+  name: String
+  createdAt: String
+  documentationUrl: String
+  description: String
+}
+
 schema {
   query: Query
   mutation: Mutation

packages/backend/src/helpers/authentication.ts

@@ -1,7 +1,7 @@
-import { rule, shield, allow } from 'graphql-shield';
+import { allow, rule, shield } from 'graphql-shield';
 import jwt from 'jsonwebtoken';
-import User from '../models/user';
 import appConfig from '../config/app';
+import User from '../models/user';
 
 const isAuthenticated = rule()(async (_parent, _args, req) => {
   const token = req.headers['authorization'];
@@ -34,15 +34,16 @@ const authentication = shield(
     Query: {
       '*': isAuthenticated,
       getAutomatischInfo: allow,
-      listSamlAuthProviders: allow,
-      healthcheck: allow,
       getConfig: allow,
+      getNotifications: allow,
+      healthcheck: allow,
+      listSamlAuthProviders: allow,
     },
     Mutation: {
       '*': isAuthenticated,
-      registerUser: allow,
       forgotPassword: allow,
       login: allow,
+      registerUser: allow,
       resetPassword: allow,
     },
   },

packages/types/index.d.ts

@@ -448,6 +448,13 @@ type AppAuthClient = {
   formattedAuthDefaults: IJSONObject;
 };
 
+type Notification = {
+  name: string;
+  createdAt: string;
+  documentationUrl: string;
+  description: string;
+}
+
 declare module 'axios' {
   interface AxiosResponse {
     httpError?: IJSONObject;

packages/web/.env-example

@@ -2,4 +2,3 @@ PORT=3001
 REACT_APP_GRAPHQL_URL=http://localhost:3000/graphql
 # HTTPS=true
 REACT_APP_BASE_URL=http://localhost:3001
-REACT_APP_NOTIFICATIONS_URL=https://notifications.automatisch.io

packages/web/src/config/app.ts

@@ -2,15 +2,13 @@ type Config = {
   [key: string]: string;
   baseUrl: string;
   graphqlUrl: string;
-  notificationsUrl: string;
   chatwootBaseUrl: string;
   supportEmailAddress: string;
 };
 
 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: '[email protected]',
 };

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