feat: add useActions with RQ

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

@@ -15,6 +15,7 @@ import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import { StepPropType, SubstepPropType } from 'propTypes/propTypes';
 import useTriggers from 'hooks/useTriggers';
+import useActions from 'hooks/useActions';
 
 const optionGenerator = (app) => ({
   label: app.name,
@@ -56,12 +57,14 @@ function ChooseAppAndEventSubstep(props) {
 
   const { data: triggers } = useTriggers(app?.key);
 
+  const { data: actions } = useActions(app?.key);
+
   const appOptions = React.useMemo(
     () => apps?.data?.map((app) => optionGenerator(app)) || [],
     [apps?.data],
   );
 
-  const actionsOrTriggers = (isTrigger ? triggers?.data : app?.actions) || [];
+  const actionsOrTriggers = (isTrigger ? triggers?.data : actions?.data) || [];
 
   const actionOrTriggerOptions = React.useMemo(
     () => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),

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

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

packages/web/src/hooks/useActions.js

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