Fix create model form validation error

canonical · Jul 19, 2023 · c33f6bd · c33f6bd
1 parent 31cb7ae
commit c33f6bd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 23 deletions.
diff --git a/static/js/brand-store/components/Models/CreateModelForm.tsx b/static/js/brand-store/components/Models/CreateModelForm.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { useMutation } from "react-query";
-import { Input, Button, Notification } from "@canonical/react-components";
+import { Input, Button } from "@canonical/react-components";
 import randomstring from "randomstring";
 
 import { checkModelNameExists } from "../../utils";
@@ -14,13 +14,11 @@ import type { Store, Model } from "../../types/shared";
 
 type Props = {
   setShowNotification: Function;
-  showErrorNotification: boolean;
   setShowErrorNotification: Function;
 };
 
 function CreateModelForm({
   setShowNotification,
-  showErrorNotification,
   setShowErrorNotification,
 }: Props) {
   const navigate = useNavigate();
@@ -31,6 +29,18 @@ function CreateModelForm({
   const modelsList = useRecoilValue(filteredModelsListState);
   const setModelsList = useSetRecoilState<Array<Model>>(modelsListState);
 
+  const handleError = () => {
+    setShowErrorNotification(true);
+    setModelsList((oldModelsList: Array<Model>) => {
+      return oldModelsList.filter((model) => model.name !== newModel.name);
+    });
+    navigate(`/admin/${id}/models`);
+    setNewModel({ name: "", apiKey: "" });
+    setTimeout(() => {
+      setShowErrorNotification(false);
+    }, 5000);
+  };
+
   const mutation = useMutation({
     mutationFn: (newModel: { name: string; apiKey: string }) => {
       const formData = new FormData();
@@ -39,6 +49,8 @@ function CreateModelForm({
       formData.set("name", newModel.name);
       formData.set("api_key", newModel.apiKey);
 
+      navigate(`/admin/${id}/models`);
+
       setModelsList((oldModelsList: Array<Model>) => {
         return [
           {
@@ -58,23 +70,21 @@ function CreateModelForm({
     },
     onSuccess: (response) => {
       if (!response.ok) {
-        setShowErrorNotification(true);
-        setModelsList((oldModelsList: Array<Model>) => {
-          return oldModelsList.filter((model) => model.name !== newModel.name);
-        });
+        handleError();
         throw new Error(`${response.status} ${response.statusText}`);
       }
 
       if (response.ok) {
-        navigate(`/admin/${id}/models`);
-        setNewModel({ name: "", apiKey: "" });
         setShowNotification(true);
+        setNewModel({ name: "", apiKey: "" });
+        navigate(`/admin/${id}/models`);
+        setTimeout(() => {
+          setShowNotification(false);
+        }, 5000);
       }
     },
     onError: () => {
-      setModelsList((oldModelsList: Array<Model>) => {
-        return oldModelsList.filter((model) => model.name !== newModel.name);
-      });
+      handleError();
       throw new Error("Unable to create a new model");
     },
   });
@@ -100,16 +110,6 @@ function CreateModelForm({
                 {currentStore.name}
               </p>
             )}
-            {showErrorNotification && (
-              <Notification
-                severity="negative"
-                onDismiss={() => {
-                  setShowErrorNotification(false);
-                }}
-              >
-                Unable to create model
-              </Notification>
-            )}
             <Input
               type="text"
               id="model-name-field"

diff --git a/static/js/brand-store/components/Models/Models.tsx b/static/js/brand-store/components/Models/Models.tsx
@@ -106,6 +106,18 @@ function Models() {
                 </Notification>
               </div>
             )}
+            {showErrorNotification && (
+              <div className="u-fixed-width">
+                <Notification
+                  severity="negative"
+                  onDismiss={() => {
+                    setShowErrorNotification(false);
+                  }}
+                >
+                  Unable to create model
+                </Notification>
+              </div>
+            )}
             <Row>
               <Col size={6}>
                 <Link className="p-button" to={`/admin/${id}/models/create`}>
@@ -140,7 +152,6 @@ function Models() {
       >
         <CreateModelForm
           setShowNotification={setShowNotification}
-          showErrorNotification={showErrorNotification}
           setShowErrorNotification={setShowErrorNotification}
         />
       </aside>