refactor: introduce useApps hook

packages/web/src/components/ChooseAppAndEventSubstep/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useQuery } from '@apollo/client';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -8,11 +7,6 @@ import ListItem from '@mui/material/ListItem';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
-
-import useFormatMessage from 'hooks/useFormatMessage';
-import { EditorContext } from 'contexts/Editor';
-import { GET_APPS } from 'graphql/queries/get-apps';
-import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import type {
   IApp,
   IStep,
@@ -21,6 +15,11 @@ import type {
   IAction,
 } from '@automatisch/types';
 
+import useFormatMessage from 'hooks/useFormatMessage';
+import useApps from 'hooks/useApps';
+import { EditorContext } from 'contexts/Editor';
+import FlowSubstepTitle from 'components/FlowSubstepTitle';
+
 type ChooseAppAndEventSubstepProps = {
   substep: ISubstep;
   expanded?: boolean;
@@ -73,10 +72,10 @@ function ChooseAppAndEventSubstep(
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
 
-  const { data } = useQuery(GET_APPS, {
+  const { apps } = useApps({
-    variables: { onlyWithTriggers: isTrigger, onlyWithActions: isAction },
+    onlyWithTriggers: isTrigger,
+    onlyWithActions: isAction,
   });
-  const apps: IApp[] = data?.getApps;
   const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
 
   const appOptions = React.useMemo(

packages/web/src/components/ExecutionStep/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { DateTime } from 'luxon';
-import { useQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import ErrorIcon from '@mui/icons-material/Error';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -14,8 +13,9 @@ import type { IApp, IExecutionStep, IStep } from '@automatisch/types';
 import TabPanel from 'components/TabPanel';
 import SearchableJSONViewer from 'components/SearchableJSONViewer';
 import AppIcon from 'components/AppIcon';
-import { GET_APPS } from 'graphql/queries/get-apps';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useApps from 'hooks/useApps';
+
 import {
   AppIconWrapper,
   AppIconStatusIconWrapper,
@@ -80,10 +80,10 @@ export default function ExecutionStep(
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
-  const { data } = useQuery(GET_APPS, {
+  const { apps } = useApps({
-    variables: { onlyWithTriggers: isTrigger, onlyWithActions: isAction },
+    onlyWithTriggers: isTrigger,
+    onlyWithActions: isAction,
   });
-  const apps: IApp[] = data?.getApps;
   const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
 
   if (!apps) return null;
@@ -120,7 +120,7 @@ export default function ExecutionStep(
 
             <Box
               display="flex"
-              justifyContent={["left", "right"]}
+              justifyContent={['left', 'right']}
               gridArea="date"
             >
               <ExecutionStepDate createdAt={executionStep.createdAt} />

packages/web/src/components/FlowStep/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useQuery, useLazyQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -31,9 +31,9 @@ import ChooseConnectionSubstep from 'components/ChooseConnectionSubstep';
 import Form from 'components/Form';
 import FlowStepContextMenu from 'components/FlowStepContextMenu';
 import AppIcon from 'components/AppIcon';
-import { GET_APPS } from 'graphql/queries/get-apps';
 import { GET_STEP_WITH_TEST_EXECUTIONS } from 'graphql/queries/get-step-with-test-executions';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useApps from 'hooks/useApps';
 import {
   AppIconWrapper,
   AppIconStatusIconWrapper,
@@ -136,8 +136,10 @@ export default function FlowStep(
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
   const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
-  const { data } = useQuery(GET_APPS, {
+
-    variables: { onlyWithTriggers: isTrigger, onlyWithActions: isAction },
+  const { apps } = useApps({
+    onlyWithTriggers: isTrigger,
+    onlyWithActions: isAction,
   });
   const [
     getStepWithTestExecutions,
@@ -162,7 +164,6 @@ export default function FlowStep(
     isTrigger,
   ]);
 
-  const apps: IApp[] = data?.getApps;
   const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
 
   const actionsOrTriggers: Array<ITrigger | IAction> =

packages/web/src/hooks/useApps.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@apollo/client';
+import { IApp } from '@automatisch/types';
+
+import { GET_APPS } from 'graphql/queries/get-apps';
+
+type QueryResponse = {
+  getApps: IApp[];
+};
+
+type UseAppsVariables = {
+  name?: string;
+  onlyWithTriggers?: boolean;
+  onlyWithActions?: boolean;
+};
+
+export default function useApps(variables?: UseAppsVariables) {
+  const { data, loading } = useQuery<QueryResponse>(GET_APPS, {
+    variables,
+  });
+  const apps = data?.getApps;
+
+  return {
+    apps,
+    loading,
+  };
+}