feat: add useTriggers with RQ

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

@@ -14,6 +14,7 @@ import useApps from 'hooks/useApps';
 import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import { StepPropType, SubstepPropType } from 'propTypes/propTypes';
+import useTriggers from 'hooks/useTriggers';
 
 const optionGenerator = (app) => ({
   label: app.name,
@@ -49,18 +50,22 @@ function ChooseAppAndEventSubstep(props) {
     onlyWithActions: isAction,
   });
 
-  const app = apps?.data?.find((currentApp) => currentApp.key === step.appKey);
+  const app = apps?.data?.find(
+    (currentApp) => currentApp?.key === step?.appKey,
+  );
+
+  const { data: triggers } = useTriggers(app?.key);
 
   const appOptions = React.useMemo(
     () => apps?.data?.map((app) => optionGenerator(app)) || [],
     [apps?.data],
   );
 
-  const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
+  const actionsOrTriggers = (isTrigger ? triggers?.data : app?.actions) || [];
 
   const actionOrTriggerOptions = React.useMemo(
     () => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),
-    [app?.key],
+    [app?.key, actionsOrTriggers],
   );
 
   const selectedActionOrTrigger = actionsOrTriggers.find(

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

@@ -36,6 +36,7 @@ import {
 } from './style';
 import isEmpty from 'helpers/isEmpty';
 import { StepPropType } from 'propTypes/propTypes';
+import useTriggers from 'hooks/useTriggers';
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
@@ -140,7 +141,13 @@ function FlowStep(props) {
   ]);
 
   const app = apps?.data?.find((currentApp) => currentApp.key === step.appKey);
-  const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
+
+  const { data: triggers } = useTriggers(app?.key);
+
+  console.log('triggers:', triggers);
+
+  const actionsOrTriggers = (isTrigger ? triggers?.data : app?.actions) || [];
+
   const actionOrTrigger = actionsOrTriggers?.find(
     ({ key }) => key === step.key,
   );

packages/web/src/hooks/useTriggers.js

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useTriggers(appKey) {
+  const query = useQuery({
+    queryKey: ['triggers', appKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}/triggers`, {
+        signal,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
+}