refactor: introduce useApps hook
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
@@ -8,11 +7,6 @@ import ListItem from '@mui/material/ListItem';
|
|||||||
import TextField from '@mui/material/TextField';
|
import TextField from '@mui/material/TextField';
|
||||||
import Autocomplete from '@mui/material/Autocomplete';
|
import Autocomplete from '@mui/material/Autocomplete';
|
||||||
import Chip from '@mui/material/Chip';
|
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 {
|
import type {
|
||||||
IApp,
|
IApp,
|
||||||
IStep,
|
IStep,
|
||||||
@@ -21,6 +15,11 @@ import type {
|
|||||||
IAction,
|
IAction,
|
||||||
} from '@automatisch/types';
|
} 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 = {
|
type ChooseAppAndEventSubstepProps = {
|
||||||
substep: ISubstep;
|
substep: ISubstep;
|
||||||
expanded?: boolean;
|
expanded?: boolean;
|
||||||
@@ -73,10 +72,10 @@ function ChooseAppAndEventSubstep(
|
|||||||
const isTrigger = step.type === 'trigger';
|
const isTrigger = step.type === 'trigger';
|
||||||
const isAction = step.type === 'action';
|
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 app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
|
||||||
|
|
||||||
const appOptions = React.useMemo(
|
const appOptions = React.useMemo(
|
||||||
|
@@ -1,6 +1,5 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { DateTime } from 'luxon';
|
import { DateTime } from 'luxon';
|
||||||
import { useQuery } from '@apollo/client';
|
|
||||||
import Stack from '@mui/material/Stack';
|
import Stack from '@mui/material/Stack';
|
||||||
import ErrorIcon from '@mui/icons-material/Error';
|
import ErrorIcon from '@mui/icons-material/Error';
|
||||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
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 TabPanel from 'components/TabPanel';
|
||||||
import SearchableJSONViewer from 'components/SearchableJSONViewer';
|
import SearchableJSONViewer from 'components/SearchableJSONViewer';
|
||||||
import AppIcon from 'components/AppIcon';
|
import AppIcon from 'components/AppIcon';
|
||||||
import { GET_APPS } from 'graphql/queries/get-apps';
|
|
||||||
import useFormatMessage from 'hooks/useFormatMessage';
|
import useFormatMessage from 'hooks/useFormatMessage';
|
||||||
|
import useApps from 'hooks/useApps';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
AppIconWrapper,
|
AppIconWrapper,
|
||||||
AppIconStatusIconWrapper,
|
AppIconStatusIconWrapper,
|
||||||
@@ -80,10 +80,10 @@ export default function ExecutionStep(
|
|||||||
const isTrigger = step.type === 'trigger';
|
const isTrigger = step.type === 'trigger';
|
||||||
const isAction = step.type === 'action';
|
const isAction = step.type === 'action';
|
||||||
const formatMessage = useFormatMessage();
|
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);
|
const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
|
||||||
|
|
||||||
if (!apps) return null;
|
if (!apps) return null;
|
||||||
@@ -120,7 +120,7 @@ export default function ExecutionStep(
|
|||||||
|
|
||||||
<Box
|
<Box
|
||||||
display="flex"
|
display="flex"
|
||||||
justifyContent={["left", "right"]}
|
justifyContent={['left', 'right']}
|
||||||
gridArea="date"
|
gridArea="date"
|
||||||
>
|
>
|
||||||
<ExecutionStepDate createdAt={executionStep.createdAt} />
|
<ExecutionStepDate createdAt={executionStep.createdAt} />
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useQuery, useLazyQuery } from '@apollo/client';
|
import { useLazyQuery } from '@apollo/client';
|
||||||
import Stack from '@mui/material/Stack';
|
import Stack from '@mui/material/Stack';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
@@ -31,9 +31,9 @@ import ChooseConnectionSubstep from 'components/ChooseConnectionSubstep';
|
|||||||
import Form from 'components/Form';
|
import Form from 'components/Form';
|
||||||
import FlowStepContextMenu from 'components/FlowStepContextMenu';
|
import FlowStepContextMenu from 'components/FlowStepContextMenu';
|
||||||
import AppIcon from 'components/AppIcon';
|
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 { GET_STEP_WITH_TEST_EXECUTIONS } from 'graphql/queries/get-step-with-test-executions';
|
||||||
import useFormatMessage from 'hooks/useFormatMessage';
|
import useFormatMessage from 'hooks/useFormatMessage';
|
||||||
|
import useApps from 'hooks/useApps';
|
||||||
import {
|
import {
|
||||||
AppIconWrapper,
|
AppIconWrapper,
|
||||||
AppIconStatusIconWrapper,
|
AppIconStatusIconWrapper,
|
||||||
@@ -136,8 +136,10 @@ export default function FlowStep(
|
|||||||
const isAction = step.type === 'action';
|
const isAction = step.type === 'action';
|
||||||
const formatMessage = useFormatMessage();
|
const formatMessage = useFormatMessage();
|
||||||
const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
|
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 [
|
const [
|
||||||
getStepWithTestExecutions,
|
getStepWithTestExecutions,
|
||||||
@@ -162,7 +164,6 @@ export default function FlowStep(
|
|||||||
isTrigger,
|
isTrigger,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const apps: IApp[] = data?.getApps;
|
|
||||||
const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
|
const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
|
||||||
|
|
||||||
const actionsOrTriggers: Array<ITrigger | IAction> =
|
const actionsOrTriggers: Array<ITrigger | IAction> =
|
||||||
|
26
packages/web/src/hooks/useApps.ts
Normal file
26
packages/web/src/hooks/useApps.ts
Normal file
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
Reference in New Issue
Block a user