refactor: rewrite useApps with RQ

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

@@ -8,6 +8,7 @@ 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 useApps from 'hooks/useApps';
 import { EditorContext } from 'contexts/Editor';
@@ -18,13 +19,16 @@ const optionGenerator = (app) => ({
   label: app.name,
   value: app.key,
 });
+
 const eventOptionGenerator = (app) => ({
   label: app.name,
   value: app.key,
   type: app?.type,
 });
+
 const getOption = (options, selectedOptionValue) =>
   options.find((option) => option.value === selectedOptionValue);
+
 function ChooseAppAndEventSubstep(props) {
   const {
     substep,
@@ -39,26 +43,36 @@ function ChooseAppAndEventSubstep(props) {
   const editorContext = React.useContext(EditorContext);
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
-  const { apps } = useApps({
+
+  const { data: apps } = useApps({
     onlyWithTriggers: isTrigger,
     onlyWithActions: isAction,
   });
-  const app = apps?.find((currentApp) => currentApp.key === step.appKey);
+
+  const app = apps?.data?.find((currentApp) => currentApp.key === step.appKey);
+
   const appOptions = React.useMemo(
-    () => apps?.map((app) => optionGenerator(app)) || [],
-    [apps],
+    () => apps?.data?.map((app) => optionGenerator(app)) || [],
+    [apps?.data],
   );
+
   const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
+
   const actionOrTriggerOptions = React.useMemo(
     () => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),
     [app?.key],
   );
+
   const selectedActionOrTrigger = actionsOrTriggers.find(
     (actionOrTrigger) => actionOrTrigger.key === step?.key,
   );
+
   const isWebhook = isTrigger && selectedActionOrTrigger?.type === 'webhook';
+
   const { name } = substep;
+
   const valid = !!step.key && !!step.appKey;
+
   // placeholders
   const onEventChange = React.useCallback(
     (event, selectedOption) => {
@@ -79,6 +93,7 @@ function ChooseAppAndEventSubstep(props) {
     },
     [step, onChange],
   );
+
   const onAppChange = React.useCallback(
     (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
@@ -100,7 +115,9 @@ function ChooseAppAndEventSubstep(props) {
     },
     [step, onChange],
   );
+
   const onToggle = expanded ? onCollapse : onExpand;
+
   return (
     <React.Fragment>
       <FlowSubstepTitle