Add useSerial hook

Author: steverydz

static/js/publisher/hooks/__tests__/useSerialLog.test.tsx

@@ -0,0 +1,124 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+
+import useSerialLog from "../useSerialLog";
+
+import type { ReactNode } from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const createWrapper = () => {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+const serialLogData = [
+  {
+    "brand-id": "test-brand",
+    "created-at": "2023-09-05T11:55:53.732366",
+    "model-name": "test-model",
+    serial: "test-serial",
+    "serial-assertion": "test-serial-assertion",
+    "serial-sign-key-sha3-384": "test-sha",
+  },
+];
+
+const handlers = [
+  http.get(
+    "/api/store/test-brand/models/test-model/serial/test-serial/serial-log",
+    () => {
+      return HttpResponse.json({
+        data: serialLogData,
+        message: "",
+        success: true,
+      });
+    },
+  ),
+  http.get(
+    "/api/store/test-brand-fail/models/test-model/serial/test-serial/serial-log",
+    () => {
+      return HttpResponse.json({
+        data: [],
+        message: "There was a problem fetching the serial log",
+        success: false,
+      });
+    },
+  ),
+  http.get(
+    "/api/store/test-brand-error/models/test-model/serial/test-serial/serial-log",
+    () => {
+      return HttpResponse.error();
+    },
+  ),
+];
+
+const server = setupServer(...handlers);
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+  queryClient.clear();
+});
+
+afterAll(() => {
+  server.close();
+});
+
+describe("useSerialLog", () => {
+  test("returns serial log data", async () => {
+    const { result } = renderHook(
+      () => useSerialLog("test-brand", "test-model", "test-serial"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toEqual(serialLogData);
+  });
+
+  test("returns error if request fails", async () => {
+    const { result } = renderHook(
+      () => useSerialLog("test-brand-fail", "test-model", "test-serial"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.data).toBeUndefined();
+  });
+
+  test("returns error if network error", async () => {
+    const { result } = renderHook(
+      () => useSerialLog("test-brand-error", "test-model", "test-serial"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.data).toBeUndefined();
+  });
+});

static/js/publisher/hooks/index.ts

@@ -17,6 +17,7 @@ import useSortTableData from "./useSortTableData";
 import useAccountKeys from "./useAccountKeys";
 import useRemodels from "./useRemodels";
 import useSerialLogs from "./useSerialLogs";
+import useSerialLog from "./useSerialLog";
 
 export {
   useValidationSets,
@@ -38,4 +39,5 @@ export {
   useAccountKeys,
   useRemodels,
   useSerialLogs,
+  useSerialLog,
 };

static/js/publisher/hooks/useSerialLog.ts

@@ -0,0 +1,32 @@
+import { useQuery, UseQueryResult } from "react-query";
+import type { SerialLog } from "../types/shared";
+
+const useSerialLog = (
+  brandId: string | undefined,
+  modelId: string | undefined,
+  serial: string | undefined,
+): UseQueryResult<SerialLog[], Error> => {
+  return useQuery<SerialLog[], Error>({
+    queryKey: ["serialLog", brandId, modelId, serial],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/store/${brandId}/models/${modelId}/serial/${serial}/serial-log`,
+      );
+
+      if (!response.ok) {
+        throw new Error("There was a problem fetching the serial log");
+      }
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.message);
+      }
+
+      return data.data;
+    },
+    enabled: !!brandId,
+  });
+};
+
+export default useSerialLog;