From 9097a618cd70db74f8e188f275fff9e0979b3ed6 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 6 Jun 2025 18:51:49 +0800
Subject: [PATCH] feat: Display existing components in edit form

---
 .../src/hooks/useStatusPageComponents.ts      | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 application/src/hooks/useStatusPageComponents.ts

diff --git a/application/src/hooks/useStatusPageComponents.ts b/application/src/hooks/useStatusPageComponents.ts
new file mode 100644
index 0000000..fea1748
--- /dev/null
+++ b/application/src/hooks/useStatusPageComponents.ts
@@ -0,0 +1,66 @@
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { statusPageComponentsService } from '@/services/statusPageComponentsService';
+import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
+import { toast } from '@/hooks/use-toast';
+
+export const useStatusPageComponents = () => {
+  return useQuery({
+    queryKey: ['status-page-components'],
+    queryFn: statusPageComponentsService.getStatusPageComponents,
+    staleTime: 30000,
+  });
+};
+
+export const useStatusPageComponentsByOperationalId = (operationalStatusId: string) => {
+  return useQuery({
+    queryKey: ['status-page-components', operationalStatusId],
+    queryFn: () => statusPageComponentsService.getStatusPageComponentsByOperationalId(operationalStatusId),
+    enabled: !!operationalStatusId,
+    staleTime: 30000,
+  });
+};
+
+export const useCreateStatusPageComponent = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: statusPageComponentsService.createStatusPageComponent,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['status-page-components'] });
+      toast({
+        title: 'Success',
+        description: 'Status page component created successfully',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: 'Failed to create status page component',
+        variant: 'destructive',
+      });
+    },
+  });
+};
+
+export const useDeleteStatusPageComponent = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: statusPageComponentsService.deleteStatusPageComponent,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['status-page-components'] });
+      toast({
+        title: 'Success',
+        description: 'Status page component deleted successfully',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: 'Failed to delete status page component',
+        variant: 'destructive',
+      });
+    },
+  });
+};
\ No newline at end of file