Refactored stack queries

exceptionless · Dec 20, 2024 · ca7a95a · ca7a95a
1 parent 8d554c2
commit ca7a95a
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 171 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/api.svelte.ts
@@ -21,183 +21,241 @@ export const queryKeys = {
     type: ['Stack'] as const
 };
 
-export interface AddStackReferenceProps {
-    id: string | undefined;
+export interface DeleteStackRequest {
+    route: {
+        ids: string | undefined;
+    };
 }
 
-export interface GetStackByIdProps {
-    id: string | undefined;
+export interface GetStackRequest {
+    route: {
+        id: string | undefined;
+    };
 }
 
-export interface MarkStackAsCriticalProps {
-    id: string | undefined;
+export interface PostAddLinkRequest {
+    route: {
+        id: string | undefined;
+    };
 }
 
-export interface PromoteStackToExternalProps {
-    id: string | undefined;
+export interface PostChangeStatusRequest {
+    route: {
+        ids: string | undefined;
+    };
 }
 
-export interface RemoveStackProps {
-    id: string | undefined;
+export interface PostMarkCriticalRequest {
+    route: {
+        ids: string | undefined;
+    };
 }
 
-export interface RemoveStackReferenceProps {
-    id: string | undefined;
+export interface PostMarkFixedRequest {
+    route: {
+        ids: string | undefined;
+    };
 }
 
-export interface UpdateStackFixedStatusProps {
-    id: string | undefined;
+export interface PostMarkSnoozedRequest {
+    route: {
+        id: string | undefined;
+    };
 }
 
-export interface UpdateStackSnoozedStatusProps {
-    id: string | undefined;
+export interface PostPromoteRequest {
+    route: {
+        ids: string | undefined;
+    };
 }
 
-export interface UpdateStackStatusProps {
-    id: string | undefined;
+export interface PostRemoveLinkRequest {
+    route: {
+        id: string | undefined;
+    };
 }
 
-export function getStackByIdQuery(props: GetStackByIdProps) {
+export function deleteMarkCritical(request: PostMarkCriticalRequest) {
+    const queryClient = useQueryClient();
+    return createMutation<void, ProblemDetails, void>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.ids,
+        mutationFn: async () => {
+            const client = useFetchClient();
+            await client.delete(`stacks/${request.route.ids}/mark-critical`);
+        },
+        mutationKey: queryKeys.id(request.route.ids),
+        onError: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
+        }
+    }));
+}
+
+export function deleteStack(request: DeleteStackRequest) {
+    const queryClient = useQueryClient();
+    return createMutation<void, ProblemDetails, void>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.ids,
+        mutationFn: async () => {
+            const client = useFetchClient();
+            await client.delete(`stacks/${request.route.ids}`);
+        },
+        mutationKey: queryKeys.id(request.route.ids),
+        onError: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
+        }
+    }));
+}
+export function getStackQuery(request: GetStackRequest) {
     return createQuery<Stack, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
+        enabled: () => !!accessToken.value && !!request.route.id,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
-            const response = await client.getJSON<Stack>(`stacks/${props.id}`, {
+            const response = await client.getJSON<Stack>(`stacks/${request.route.id}`, {
                 signal
             });
 
             return response.data!;
         },
-        queryKey: queryKeys.id(props.id)
+        queryKey: queryKeys.id(request.route.id)
     }));
 }
 
-export function mutateAddStackReference(props: AddStackReferenceProps) {
+export function postAddLink(request: PostAddLinkRequest) {
     const queryClient = useQueryClient();
     return createMutation<void, ProblemDetails, string>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
+        enabled: () => !!accessToken.value && !!request.route.id,
         mutationFn: async (url: string) => {
             const client = useFetchClient();
-            await client.post(`stacks/${props.id}/add-link`, { value: url });
+            await client.post(`stacks/${request.route.id}/add-link`, { value: url });
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.id),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
         }
     }));
 }
-export function mutateMarkStackAsCritical(props: MarkStackAsCriticalProps) {
+
+export function postChangeStatus(request: PostChangeStatusRequest) {
     const queryClient = useQueryClient();
-    return createMutation<void, ProblemDetails, void>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async () => {
+    return createMutation<void, ProblemDetails, StackStatus>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.ids,
+        mutationFn: async (status: StackStatus) => {
             const client = useFetchClient();
-            await client.post(`stacks/${props.id}/mark-critical`);
+            await client.post(`stacks/${request.route.ids}/change-status`, undefined, { params: { status } });
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.ids),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         }
     }));
 }
 
-export function mutateMarkStackAsNotCritical(props: MarkStackAsCriticalProps) {
+export function postMarkCritical(request: PostMarkCriticalRequest) {
     const queryClient = useQueryClient();
     return createMutation<void, ProblemDetails, void>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
+        enabled: () => !!accessToken.value && !!request.route.ids,
         mutationFn: async () => {
             const client = useFetchClient();
-            await client.delete(`stacks/${props.id}/mark-critical`);
+            await client.post(`stacks/${request.route.ids}/mark-critical`);
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.ids),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         }
     }));
 }
 
-export function mutateRemoveStackReference(props: RemoveStackReferenceProps) {
+export function postMarkFixed(request: PostMarkFixedRequest) {
     const queryClient = useQueryClient();
-    return createMutation<void, ProblemDetails, string>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async (url: string) => {
+    return createMutation<void, ProblemDetails, string | undefined>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.ids,
+        mutationFn: async (version?: string) => {
             const client = useFetchClient();
-            await client.post(`stacks/${props.id}/add-link`, { value: url });
+            await client.post(`stacks/${request.route.ids}/mark-fixed`, undefined, { params: { version } });
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.ids),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         }
     }));
 }
 
-export function mutateStackFixedStatus(props: UpdateStackFixedStatusProps) {
+export function postMarkSnoozed(request: PostMarkSnoozedRequest) {
     const queryClient = useQueryClient();
-    return createMutation<void, ProblemDetails, string | undefined>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async (version?: string) => {
+    return createMutation<void, ProblemDetails, Date>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.id,
+        mutationFn: async (snoozeUntilUtc: Date) => {
             const client = useFetchClient();
-            await client.post(`stacks/${props.id}/mark-fixed`, undefined, { params: { version } });
+            await client.post(`stacks/${request.route.id}/mark-snoozed`, undefined, { params: { snoozeUntilUtc: snoozeUntilUtc.toISOString() } });
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.id),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
         }
     }));
 }
 
-export function mutateStackSnoozedStatus(props: UpdateStackSnoozedStatusProps) {
+export function postPromote(request: PostPromoteRequest) {
     const queryClient = useQueryClient();
-    return createMutation<void, ProblemDetails, Date>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async (snoozeUntilUtc: Date) => {
+    return createMutation<FetchClientResponse<unknown>, ProblemDetails, void>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.ids,
+        mutationFn: async () => {
             const client = useFetchClient();
-            await client.post(`stacks/${props.id}/mark-snoozed`, undefined, { params: { snoozeUntilUtc: snoozeUntilUtc.toISOString() } });
+            const response = await client.post(`stacks/${request.route.ids}/promote`, undefined, {
+                expectedStatusCodes: [200, 404, 426, 501]
+            });
+
+            return response;
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.ids),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.ids) });
         }
     }));
 }
 
-export function mutateStackStatus(props: UpdateStackStatusProps) {
+export function postRemoveLink(request: PostRemoveLinkRequest) {
     const queryClient = useQueryClient();
-    return createMutation<void, ProblemDetails, StackStatus>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async (status: StackStatus) => {
+    return createMutation<void, ProblemDetails, string>(() => ({
+        enabled: () => !!accessToken.value && !!request.route.id,
+        mutationFn: async (url: string) => {
             const client = useFetchClient();
-            await client.post(`stacks/${props.id}/change-status`, undefined, { params: { status } });
+            await client.post(`stacks/${request.route.id}/remove-link`, { value: url });
         },
-        mutationKey: queryKeys.id(props.id),
+        mutationKey: queryKeys.id(request.route.id),
         onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.id) });
         }
     }));
 }
 
-export async function prefetchStack(props: GetStackByIdProps) {
+export async function prefetchStack(request: GetStackRequest) {
     if (!accessToken.value) {
         return;
     }
@@ -206,52 +264,12 @@ export async function prefetchStack(props: GetStackByIdProps) {
     await queryClient.prefetchQuery<Stack, ProblemDetails>({
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
-            const response = await client.getJSON<Stack>(`stacks/${props.id}`, {
+            const response = await client.getJSON<Stack>(`stacks/${request.route.id}`, {
                 signal
             });
 
             return response.data!;
         },
-        queryKey: queryKeys.id(props.id)
+        queryKey: queryKeys.id(request.route.id)
     });
 }
-
-export function promoteStackToExternal(props: PromoteStackToExternalProps) {
-    const queryClient = useQueryClient();
-    return createMutation<FetchClientResponse<unknown>, ProblemDetails, void>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async () => {
-            const client = useFetchClient();
-            const response = await client.post(`stacks/${props.id}/promote`, undefined, {
-                expectedStatusCodes: [200, 404, 426, 501]
-            });
-
-            return response;
-        },
-        mutationKey: queryKeys.id(props.id),
-        onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
-        }
-    }));
-}
-
-export function removeStack(props: RemoveStackProps) {
-    const queryClient = useQueryClient();
-    return createMutation<void, ProblemDetails, void>(() => ({
-        enabled: () => !!accessToken.value && !!props.id,
-        mutationFn: async () => {
-            const client = useFetchClient();
-            await client.delete(`stacks/${props.id}`);
-        },
-        mutationKey: queryKeys.id(props.id),
-        onError: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: queryKeys.id(props.id) });
-        }
-    }));
-}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/StackCard.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/StackCard.svelte
@@ -10,7 +10,7 @@
     import { Button } from '$comp/ui/button';
     import * as Card from '$comp/ui/card';
     import * as Tooltip from '$comp/ui/tooltip';
-    import { getStackByIdQuery } from '$features/stacks/api.svelte';
+    import { getStackQuery } from '$features/stacks/api.svelte';
     import IconFirstOccurrence from '~icons/mdi/arrow-left-circle';
     import IconLastOccurrence from '~icons/mdi/arrow-right-circle';
     import IconCalendar from '~icons/mdi/calendar';
@@ -30,9 +30,11 @@
 
     let { changed, id }: Props = $props();
 
-    let stackResponse = getStackByIdQuery({
-        get id() {
-            return id;
+    let stackResponse = getStackQuery({
+        route: {
+            get id() {
+                return id;
+            }
         }
     });