From a04b933161396ce80081db7529bbd7a9dcb0d7b9 Mon Sep 17 00:00:00 2001 From: Kasia Date: Fri, 22 Sep 2023 09:59:22 +0200 Subject: [PATCH] refactor: introduce useApps hook --- .../ChooseAppAndEventSubstep/index.tsx | 17 ++++++------ .../src/components/ExecutionStep/index.tsx | 12 ++++----- .../web/src/components/FlowStep/index.tsx | 11 ++++---- packages/web/src/hooks/useApps.ts | 26 +++++++++++++++++++ 4 files changed, 46 insertions(+), 20 deletions(-) create mode 100644 packages/web/src/hooks/useApps.ts diff --git a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx b/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx index ae90cf77..07fbd02f 100644 --- a/packages/web/src/components/ChooseAppAndEventSubstep/index.tsx +++ b/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, { - variables: { onlyWithTriggers: isTrigger, onlyWithActions: isAction }, + const { apps } = useApps({ + onlyWithTriggers: isTrigger, + onlyWithActions: isAction, }); - const apps: IApp[] = data?.getApps; const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey); const appOptions = React.useMemo( diff --git a/packages/web/src/components/ExecutionStep/index.tsx b/packages/web/src/components/ExecutionStep/index.tsx index c434cbd2..b2488a08 100644 --- a/packages/web/src/components/ExecutionStep/index.tsx +++ b/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, { - variables: { onlyWithTriggers: isTrigger, onlyWithActions: isAction }, + const { apps } = useApps({ + 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( diff --git a/packages/web/src/components/FlowStep/index.tsx b/packages/web/src/components/FlowStep/index.tsx index 99821b2b..5b57ed36 100644 --- a/packages/web/src/components/FlowStep/index.tsx +++ b/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(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 = diff --git a/packages/web/src/hooks/useApps.ts b/packages/web/src/hooks/useApps.ts new file mode 100644 index 00000000..956293c3 --- /dev/null +++ b/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(GET_APPS, { + variables, + }); + const apps = data?.getApps; + + return { + apps, + loading, + }; +}