feat(web): introduce folders to organize flows

packages/web/src/hooks/useCreateFolder.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useCreateFolder() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.post('/v1/folders', payload);
+
+      return data;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['folders'],
+      });
+    },
+  });
+
+  return mutation;
+}

packages/web/src/hooks/useDeleteFolder.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useDeleteFolder() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (id) => {
+      const { data } = await api.delete(`/v1/folders/${id}`);
+
+      return data;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['folders'],
+      });
+    },
+  });
+
+  return mutation;
+}

packages/web/src/hooks/useFlowFolder.js

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

packages/web/src/hooks/useFlows.js

@@ -1,12 +1,12 @@
 import api from 'helpers/api';
 import { useQuery } from '@tanstack/react-query';
 
-export default function useFlows({ flowName, page }) {
+export default function useFlows({ flowName, page, folderId }) {
   const query = useQuery({
-    queryKey: ['flows', flowName, { page }],
+    queryKey: ['flows', flowName, { page, folderId }],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/flows', {
-        params: { name: flowName, page },
+        params: { name: flowName, page, folderId },
         signal,
       });
 

packages/web/src/hooks/useFolders.js

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

packages/web/src/hooks/useUpdateFlowFolder.js

@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useUpdateFlowFolder(flowId) {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (folderId) => {
+      const { data } = await api.patch(`/v1/flows/${flowId}/folder`, {
+        folderId,
+      });
+
+      return data;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['flows', flowId, 'folder'],
+      });
+    },
+  });
+
+  return mutation;
+}

packages/web/src/hooks/useUpdateFolder.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useUpdateFolder(folderId) {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.patch(`/v1/folders/${folderId}`, payload);
+
+      return data;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['folders'],
+      });
+    },
+  });
+
+  return mutation;
+}