TASKS-1823 WebManager module

apps/backend/app/templates/frontend/module/api/create.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { axiosClient } from '#infrastructure/axios';
+import { ErrorResponse, SuccessMutationResponse } from '#infrastructure/reactQuery';
+import { MODULE_API_ENDPOINT } from '../config/meta';
+
+export const useCreate = () => {
+  return useMutation<SuccessMutationResponse, ErrorResponse, Record<string, unknown>>({
+    mutationFn: async (payload) => {
+      return axiosClient
+        .post<SuccessMutationResponse>(MODULE_API_ENDPOINT, payload)
+        .then((data) => data.data);
+    },
+    onSuccess(data) {
+      toast.success(data.message);
+    }
+  });
+};

apps/backend/app/templates/frontend/module/api/delete.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { axiosClient } from '#infrastructure/axios';
+import { ErrorResponse, SuccessMutationResponse } from '#infrastructure/reactQuery';
+import { MODULE_API_ENDPOINT } from '../config/meta';
+
+export const useDelete = () => {
+  return useMutation<SuccessMutationResponse, ErrorResponse, { id: number }>({
+    mutationFn: async (payload) => {
+      return axiosClient
+        .delete<SuccessMutationResponse>(`${MODULE_API_ENDPOINT}/${payload.id}`)
+        .then((data) => data.data);
+    },
+    onSuccess(data) {
+      toast.success(data.message);
+    }
+  });
+};

apps/backend/app/templates/frontend/module/api/detailed.ts

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import { queryClient } from '#app/providers/QueryProvider';
+import { axiosClient } from '#infrastructure/axios';
+import { MODULE_API_ENDPOINT } from '../config/meta';
+import { Entity } from '../entities/Entity';
+import { detailedKeyBuilder } from './keys';
+
+export const invalidateDetailed = async (id?: number) => {
+  if (id === undefined) {
+    await queryClient.invalidateQueries(detailedKeyBuilder.invalidateAll());
+  } else {
+    await queryClient.invalidateQueries(detailedKeyBuilder.invalidate({ id: String(id) }));
+  }
+};
+
+export interface DetailedPayload {
+  id: string;
+}
+export const useGetDetailed = (payload?: DetailedPayload) => {
+  return useQuery({
+    queryKey: detailedKeyBuilder.store(payload as DetailedPayload),
+    queryFn: async () => {
+      return axiosClient
+        .get<Entity>(`${MODULE_API_ENDPOINT}/${payload?.id}`)
+        .then((data) => data.data);
+    },
+    enabled: Boolean(payload?.id),
+    throwOnError(_error) {
+      return false;
+    }
+  });
+};

apps/backend/app/templates/frontend/module/api/keys.ts

@@ -0,0 +1,9 @@
+import { createKeyBuilder, ListQueryParams } from '#infrastructure/reactQuery';
+import { MODULE_NAME } from '../config/meta';
+import { DetailedPayload } from './detailed';
+
+const ROOT = MODULE_NAME;
+
+export const listKeyBuilder = createKeyBuilder<ListQueryParams>(ROOT, 'LIST');
+
+export const detailedKeyBuilder = createKeyBuilder<DetailedPayload>(ROOT, 'DETAILED');

apps/backend/app/templates/frontend/module/api/list.ts

@@ -0,0 +1,35 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import React from 'react';
+import { queryClient } from '#app/providers/QueryProvider';
+import { axiosClient } from '#infrastructure/axios';
+import { getPaginationInfo, ListQueryParams, SuccessListResponse } from '#infrastructure/reactQuery';
+import { MODULE_API_ENDPOINT } from '../config/meta';
+import { Entity } from '../entities/Entity';
+import { listKeyBuilder } from './keys';
+
+export const invalidateList = async () => {
+  await queryClient.invalidateQueries(listKeyBuilder.invalidateAll());
+};
+
+export const useGetList = (params: ListQueryParams = { page: 1, perPage: 10 }) => {
+  const { data, ...query } = useQuery({
+    queryKey: listKeyBuilder.store(params),
+    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      return axiosClient
+        .get<SuccessListResponse<Entity>>(MODULE_API_ENDPOINT, { params })
+        .then((response) => response.data);
+    },
+    throwOnError(_error) {
+      return false;
+    }
+  });
+
+  const list = React.useMemo(() => {
+    return data?.data ?? [];
+  }, [data?.data]);
+
+  const paginationInfo = getPaginationInfo(data?.meta);
+
+  return { ...query, ...paginationInfo, list };
+};

apps/backend/app/templates/frontend/module/api/update.ts

@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { axiosClient } from '#infrastructure/axios';
+import { ErrorResponse, SuccessMutationResponse } from '#infrastructure/reactQuery';
+import { MODULE_API_ENDPOINT } from '../config/meta';
+
+export const useUpdate = () => {
+  return useMutation<
+    SuccessMutationResponse,
+    ErrorResponse,
+    { id: number } & Record<string, unknown>
+  >({
+    mutationFn: async (payload) => {
+      return axiosClient
+        .put<SuccessMutationResponse>(`${MODULE_API_ENDPOINT}/${payload.id}`, payload)
+        .then((data) => data.data);
+    },
+    onSuccess(data) {
+      toast.success(data.message);
+    }
+  });
+};