From 705bf1ad853cf94df97f4d67c55adcaa22caf4a2 Mon Sep 17 00:00:00 2001
From: InfiniteStash <117855276+InfiniteStash@users.noreply.github.com>
Date: Sat, 21 May 2022 22:01:26 +0200
Subject: [PATCH] Show submission errors in tag/studio forms (#402)

---
 frontend/src/pages/studios/StudioAdd.tsx | 10 +++++++++-
 frontend/src/pages/tags/TagAdd.tsx       | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/studios/StudioAdd.tsx b/frontend/src/pages/studios/StudioAdd.tsx
index 8cbba0fde..540429347 100644
--- a/frontend/src/pages/studios/StudioAdd.tsx
+++ b/frontend/src/pages/studios/StudioAdd.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { useHistory } from "react-router-dom";
 
 import {
@@ -12,10 +12,13 @@ import StudioForm from "./studioForm";
 
 const StudioAdd: FC = () => {
   const history = useHistory();
+  const [submissionError, setSubmissionError] = useState("");
   const [insertStudioEdit, { loading: saving }] = useStudioEdit({
     onCompleted: (data) => {
+      if (submissionError) setSubmissionError("");
       if (data.studioEdit.id) history.push(editHref(data.studioEdit));
     },
+    onError: (error) => setSubmissionError(error.message),
   });
 
   const doInsert = (insertData: StudioEditDetailsInput, editNote: string) => {
@@ -37,6 +40,11 @@ const StudioAdd: FC = () => {
       <h3>Add new studio</h3>
       <hr />
       <StudioForm callback={doInsert} saving={saving} />
+      {submissionError && (
+        <div className="text-danger text-end col-9">
+          Error: {submissionError}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/pages/tags/TagAdd.tsx b/frontend/src/pages/tags/TagAdd.tsx
index eb948b31a..9701ddc10 100644
--- a/frontend/src/pages/tags/TagAdd.tsx
+++ b/frontend/src/pages/tags/TagAdd.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { useHistory } from "react-router-dom";
 
 import { useTagEdit, OperationEnum, TagEditDetailsInput } from "src/graphql";
@@ -8,10 +8,13 @@ import TagForm from "./tagForm";
 
 const TagAddComponent: FC = () => {
   const history = useHistory();
+  const [submissionError, setSubmissionError] = useState("");
   const [insertTagEdit, { loading: saving }] = useTagEdit({
     onCompleted: (data) => {
+      if (submissionError) setSubmissionError("");
       if (data.tagEdit.id) history.push(editHref(data.tagEdit));
     },
+    onError: (error) => setSubmissionError(error.message),
   });
 
   const doInsert = (insertData: TagEditDetailsInput, editNote: string) => {
@@ -33,6 +36,11 @@ const TagAddComponent: FC = () => {
       <h3>Add new tag</h3>
       <hr />
       <TagForm callback={doInsert} saving={saving} />
+      {submissionError && (
+        <div className="text-danger text-end col-9">
+          Error: {submissionError}
+        </div>
+      )}
     </div>
   );
 };