Migrate query/products.ts to use @app/client (#142)

Signed-off-by: Hiram Chirino <[email protected]>

client/src/app/pages/product-details/overview.tsx

@@ -13,11 +13,10 @@ import {
   Stack,
   StackItem,
 } from "@patternfly/react-core";
-
-import { Product } from "@app/api/models";
+import { ProductDetails } from "../../client";
 
 interface OverviewProps {
-  product: Product;
+  product: ProductDetails;
 }
 
 export const Overview: React.FC<OverviewProps> = ({ product }) => {

client/src/app/pages/product-details/product-versions.tsx

@@ -17,6 +17,7 @@ import {
 } from "@app/components/TableControls";
 import { useLocalTableControls } from "@app/hooks/table-controls";
 import { formatDate } from "@app/utils/utils";
+import { ProductDetails } from "../../client";
 
 interface TableData {
   sbomId: string;
@@ -25,7 +26,7 @@ interface TableData {
 }
 
 interface ProductVersionsProps {
-  product: Product;
+  product: ProductDetails;
 }
 
 export const ProductVersions: React.FC<ProductVersionsProps> = ({
@@ -42,7 +43,7 @@ export const ProductVersions: React.FC<ProductVersionsProps> = ({
       return {
         sbomId: sbom.sbom_id,
         sbomVersion: sbom.version,
-      };
+      } as TableData;
     });
 
     setAllSboms(sbombs);

client/src/app/queries/products.ts

@@ -2,44 +2,51 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 
 import { HubRequestParams } from "@app/api/models";
-import { getProductById, getProducts } from "@app/api/rest";
-import { deleteProduct, ProductDetails } from "@app/client";
+import {
+  deleteProduct,
+  getProduct,
+  listProducts,
+  ProductDetails,
+} from "@app/client";
 import { client } from "@app/axios-config/apiInit";
+import { convertQuery, dataOf } from "./dataOf";
+import { requestParamsQuery } from "../hooks/table-controls";
 
 export const ProductsQueryKey = "products";
 
 export const useFetchProducts = (
   params: HubRequestParams = {},
   refetchDisabled: boolean = false
 ) => {
-  const { data, isLoading, error, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ProductsQueryKey, params],
-    queryFn: () => getProducts(params),
+    queryFn: () =>
+      dataOf(
+        listProducts({
+          client,
+          query: { ...requestParamsQuery(params) },
+        })
+      ),
     refetchInterval: !refetchDisabled ? 5000 : false,
   });
   return {
+    ...convertQuery(query),
     result: {
-      data: data?.data || [],
-      total: data?.total ?? 0,
-      params: data?.params ?? params,
+      data: query.data?.items || [],
+      total: query.data?.total ?? 0,
+      params: params,
     },
-    isFetching: isLoading,
-    fetchError: error,
-    refetch,
   };
 };
 
-export const useFetchProductById = (id: number | string) => {
-  const { data, isLoading, error } = useQuery({
+export const useFetchProductById = (id: string) => {
+  const query = useQuery({
     queryKey: [ProductsQueryKey, id],
-    queryFn: () => getProductById(id),
-    enabled: id !== undefined,
+    queryFn: () => dataOf(getProduct({ client, path: { id } })),
   });
-
   return {
-    product: data,
-    isFetching: isLoading,
-    fetchError: error as AxiosError,
+    ...convertQuery(query),
+    product: query.data,
   };
 };
 
@@ -48,8 +55,7 @@ export const useDeleteProductMutation = (
   onSuccess?: (payload: ProductDetails, id: string) => void
 ) => {
   return useMutation({
-    mutationFn: async (id: string) =>
-      (await deleteProduct({ client, path: { id } })).data,
+    mutationFn: (id: string) => dataOf(deleteProduct({ client, path: { id } })),
     mutationKey: [ProductsQueryKey],
     onSuccess,
     onError,