Model service hooks (#4352)

* Update models table test * Convert model service queries to hooks
canonical · Jul 25, 2023 · fd9cdee · fd9cdee
1 parent 1ec7c13
commit fd9cdee
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 119 deletions.
diff --git a/static/js/brand-store/components/Model/CreatePolicyForm.tsx b/static/js/brand-store/components/Model/CreatePolicyForm.tsx
@@ -1,13 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useRecoilState } from "recoil";
 import { useParams, Link, useNavigate } from "react-router-dom";
-import { useQuery, useMutation } from "react-query";
+import { useMutation } from "react-query";
 import { Button } from "@canonical/react-components";
 
+import { useSigningKeys } from "../../hooks";
 import { signingKeysListState } from "../../atoms";
 
-import type { Query } from "../../types/shared";
-
 type Props = {
   setShowNotification: Function;
   setShowErrorNotification: Function;
@@ -19,28 +18,9 @@ function CreatePolicyForm({
   setShowErrorNotification,
   refetchPolicies,
 }: Props) {
-  const getSigningKeys = async () => {
-    const response = await fetch(`/admin/store/${id}/signing-keys`);
-
-    if (!response.ok) {
-      throw new Error("There was a problem fetching signing keys");
-    }
-
-    const signingKeysData = await response.json();
-
-    if (!signingKeysData.success) {
-      throw new Error(signingKeysData.message);
-    }
-
-    setSigningKeys(signingKeysData.data);
-  };
-
   const { id, model_id } = useParams();
   const navigate = useNavigate();
-  const { isLoading, isError, error }: Query = useQuery(
-    "signingKeys",
-    getSigningKeys
-  );
+  const { isLoading, isError, error, data }: any = useSigningKeys(id);
   const [signingKeys, setSigningKeys] = useRecoilState(signingKeysListState);
   const [selectedSigningKey, setSelectedSigningKey] = useState("");
 
@@ -93,6 +73,12 @@ function CreatePolicyForm({
     },
   });
 
+  useEffect(() => {
+    if (!isLoading && !error) {
+      setSigningKeys(data);
+    }
+  }, [isLoading, error, data]);
+
   return (
     <form
       onSubmit={(event) => {

diff --git a/static/js/brand-store/components/Model/Model.tsx b/static/js/brand-store/components/Model/Model.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { useMutation, useQuery } from "react-query";
+import { useMutation } from "react-query";
 import { format } from "date-fns";
 import randomstring from "randomstring";
 import {
@@ -12,32 +12,13 @@ import {
   Notification,
 } from "@canonical/react-components";
 
+import { useModels } from "../../hooks";
 import { modelsListState } from "../../atoms";
 import { currentModelState } from "../../selectors";
 
 import ModelNav from "./ModelNav";
 
 function Model() {
-  const getModels = async () => {
-    if (currentModel) {
-      return;
-    }
-
-    const response = await fetch(`/admin/store/${id}/models`);
-
-    if (!response.ok) {
-      throw new Error("There was a problem fetching models");
-    }
-
-    const modelsData = await response.json();
-
-    if (!modelsData.success) {
-      throw new Error(modelsData.message);
-    }
-
-    setModelsList(modelsData.data);
-  };
-
   const mutation = useMutation({
     mutationFn: (apiKey: string) => {
       const formData = new FormData();
@@ -74,8 +55,7 @@ function Model() {
   const [showSuccessNotification, setShowSuccessNotificaton] = useState(false);
   const [showErrorNotification, setShowErrorNotificaton] = useState(false);
   const setModelsList = useSetRecoilState<any>(modelsListState);
-
-  useQuery("models", getModels);
+  const { isLoading, error, data } = useModels(id);
 
   const handleError = () => {
     setShowErrorNotificaton(true);
@@ -84,6 +64,12 @@ function Model() {
     }, 5000);
   };
 
+  useEffect(() => {
+    if (!currentModel && !isLoading && !error) {
+      setModelsList(data);
+    }
+  }, [currentModel, isLoading, error, data]);
+
   return (
     <main className="l-main">
       <div className="p-panel">
@@ -246,6 +232,7 @@ function Model() {
                   <hr style={{ marginTop: "1rem", marginBottom: "1rem" }} />
                   <div className="u-align--right">
                     <Button
+                      type="button"
                       onClick={() => {
                         setNewApiKey("");
                       }}

diff --git a/static/js/brand-store/components/Model/Policies.tsx b/static/js/brand-store/components/Model/Policies.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Link,
   useParams,
@@ -7,48 +7,27 @@ import {
   useNavigate,
 } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
-import { useQuery } from "react-query";
 import { Row, Col, Notification } from "@canonical/react-components";
 
 import ModelNav from "./ModelNav";
 import PoliciesFilter from "./PoliciesFilter";
 import PoliciesTable from "./PoliciesTable";
 import CreatePolicyForm from "./CreatePolicyForm";
 
+import { usePolicies } from "../../hooks";
 import { policiesListFilterState, policiesListState } from "../../atoms";
 
 import { isClosedPanel } from "../../utils";
 
-import type { Policy, Query } from "../../types/shared";
+import type { Policy } from "../../types/shared";
 
 function Policies() {
-  const getPolicies = async () => {
-    setPoliciesList([]);
-
-    const response = await fetch(
-      `/admin/store/${id}/models/${model_id}/policies`
-    );
-
-    if (!response.ok) {
-      throw new Error("There was a problem fetching policies");
-    }
-
-    const policiesData = await response.json();
-
-    if (!policiesData.success) {
-      throw new Error(policiesData.message);
-    }
-
-    setPoliciesList(policiesData.data);
-    setFilter(searchParams.get("filter") || "");
-  };
-
   const { id, model_id } = useParams();
   const location = useLocation();
   const navigate = useNavigate();
-  const { isLoading, isError, error, refetch }: Query = useQuery(
-    "policies",
-    getPolicies
+  const { isLoading, isError, error, refetch, data }: any = usePolicies(
+    id,
+    model_id
   );
   const setPoliciesList = useSetRecoilState<Array<Policy>>(policiesListState);
   const setFilter = useSetRecoilState<string>(policiesListFilterState);
@@ -58,6 +37,15 @@ function Policies() {
     false
   );
 
+  useEffect(() => {
+    if (!isLoading && !isError) {
+      setPoliciesList(data);
+      setFilter(searchParams.get("filter") || "");
+    } else {
+      setPoliciesList([]);
+    }
+  }, [isLoading, error, data]);
+
   return (
     <>
       <main className="l-main">
@@ -110,9 +98,11 @@ function Policies() {
               </Col>
             </Row>
             <div className="u-fixed-width">
-              {isLoading && <p>Fetching policies...</p>}
-              {isError && error && <p>Error: {error.message}</p>}
-              <PoliciesTable />
+              <>
+                {isLoading && <p>Fetching policies...</p>}
+                {isError && error && <p>Error: {error.message}</p>}
+                <PoliciesTable />
+              </>
             </div>
           </div>
         </div>

diff --git a/static/js/brand-store/components/Models/Models.tsx b/static/js/brand-store/components/Models/Models.tsx
@@ -1,6 +1,5 @@
-import React, { useState } from "react";
-import { useQuery } from "react-query";
-import { useSetRecoilState, useRecoilState } from "recoil";
+import React, { useState, useEffect } from "react";
+import { useSetRecoilState } from "recoil";
 import {
   Link,
   useParams,
@@ -10,6 +9,7 @@ import {
 } from "react-router-dom";
 import { Row, Col, Notification } from "@canonical/react-components";
 
+import { useModels } from "../../hooks";
 import {
   modelsListFilterState,
   modelsListState,
@@ -23,28 +23,9 @@ import CreateModelForm from "./CreateModelForm";
 
 import { isClosedPanel } from "../../utils";
 
-import type { Model, Policy, Query } from "../../types/shared";
+import type { Model, Policy } from "../../types/shared";
 
 function Models() {
-  const getModels = async () => {
-    const response = await fetch(`/admin/store/${id}/models`);
-
-    if (!response.ok) {
-      throw new Error("There was a problem fetching models");
-    }
-
-    const modelsData = await response.json();
-
-    if (!modelsData.success) {
-      throw new Error(modelsData.message);
-    }
-
-    setModelsList(modelsData.data);
-    setFilter(searchParams.get("filter") || "");
-
-    getPolicies(modelsData.data);
-  };
-
   const getPolicies = async (modelsList: Array<Model>) => {
     const data = await Promise.all(
       modelsList.map((model) => {
@@ -74,18 +55,24 @@ function Models() {
   const { id } = useParams();
   const location = useLocation();
   const navigate = useNavigate();
-  const { isLoading, isError, error }: Query = useQuery("models", getModels);
+  const { isLoading, isError, error, data }: any = useModels(id);
   const setModelsList = useSetRecoilState<Array<Model>>(modelsListState);
-  const [policies, setPolicies] = useRecoilState<Array<Policy>>(
-    policiesListState
-  );
+  const setPolicies = useSetRecoilState<Array<Policy>>(policiesListState);
   const setFilter = useSetRecoilState<string>(modelsListFilterState);
   const [searchParams] = useSearchParams();
   const [showNotification, setShowNotification] = useState<boolean>(false);
   const [showErrorNotification, setShowErrorNotification] = useState<boolean>(
     false
   );
 
+  useEffect(() => {
+    if (!isLoading && !error) {
+      setModelsList(data);
+      setFilter(searchParams.get("filter") || "");
+      getPolicies(data);
+    }
+  }, [isLoading, error, data]);
+
   return (
     <>
       <main className="l-main">
@@ -129,9 +116,11 @@ function Models() {
               </Col>
             </Row>
             <div className="u-fixed-width">
-              {isLoading && <p>Fetching models...</p>}
-              {isError && error && <p>Error: {error.message}</p>}
-              <ModelsTable />
+              <>
+                {isLoading && <p>Fetching models...</p>}
+                {isError && error && <p>Error: {error.message}</p>}
+                <ModelsTable />
+              </>
             </div>
           </div>
         </div>

diff --git a/static/js/brand-store/components/Models/ModelsTable.test.tsx b/static/js/brand-store/components/Models/ModelsTable.test.tsx
@@ -27,7 +27,7 @@ describe("ModelsTable", () => {
     renderComponent();
 
     expect(
-      screen.getByRole("columnheader", { name: "Name (0)" })
+      screen.getByRole("columnheader", { name: /Name/ })
     ).toBeInTheDocument();
 
     expect(
@@ -51,7 +51,7 @@ describe("ModelsTable", () => {
     renderComponent();
 
     const user = userEvent.setup();
-    const columnHeader = screen.getByRole("columnheader", { name: "Name (0)" });
+    const columnHeader = screen.getByRole("columnheader", { name: /Name/ });
 
     expect(columnHeader.getAttribute("aria-sort")).toBe("none");