From 352686db3744ba587a909448249ae12a0ccc8a7c Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Wed, 23 Aug 2023 19:00:19 -0500
Subject: [PATCH] fix file upload

---
 src/components/ResourcePhoto.tsx        |  2 +-
 src/components/admin/resources/form.tsx | 11 +++--
 src/pages/resources/[id]/edit.tsx       | 60 ++++++++++++++-----------
 3 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/components/ResourcePhoto.tsx b/src/components/ResourcePhoto.tsx
index 379f8ab..df56ba2 100644
--- a/src/components/ResourcePhoto.tsx
+++ b/src/components/ResourcePhoto.tsx
@@ -46,7 +46,7 @@ export const ResourcePhoto = (input: ResourcePhotoProps) => {
   return (
     <Image
       className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
-      src={blobSrc ?? `/resource_logos/${input.src ?? "logo_not_found.png"}`}
+      src={`/resource_logos/${input.src ?? "logo_not_found.png"}`}
       alt={`${input.name} logo`}
       {...commonProps}
     />
diff --git a/src/components/admin/resources/form.tsx b/src/components/admin/resources/form.tsx
index 8d60d1a..4efd041 100644
--- a/src/components/admin/resources/form.tsx
+++ b/src/components/admin/resources/form.tsx
@@ -41,6 +41,7 @@ import Modal from "react-modal";
 import { type RouterInputs } from "~/utils/api";
 import { PlatformLinkButton } from "~/pages/resources/[id]";
 import { ResourcePhoto } from "~/components/ResourcePhoto";
+import Image from "next/image";
 
 // Required for accessibility
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
@@ -90,10 +91,12 @@ const SelectImageInput = ({
             src={resource?.icon}
           />
         ) : (
-          <ResourcePhoto
-            photo={null}
-            src={previewImg}
-            name={resource?.name ?? "n/a"}
+          <Image
+            className="w-full"
+            src={previewImg ?? ""}
+            alt={`resource logo`}
+            width={512}
+            height={512}
           />
         )}
         <div className="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center group-hover:grid group-hover:bg-white/70">
diff --git a/src/pages/resources/[id]/edit.tsx b/src/pages/resources/[id]/edit.tsx
index 28aa5c3..e5f40f7 100644
--- a/src/pages/resources/[id]/edit.tsx
+++ b/src/pages/resources/[id]/edit.tsx
@@ -17,6 +17,7 @@ const EditResourcePage = () => {
   const router = useRouter();
   const id = router.query["id"]?.toString() ?? "";
 
+  // TODO: Maybe useWait id before querying
   const { data: resource } = api.auditoryResource.byId.useQuery({ id });
 
   const [updateIconFile, setIconFile] = useState<File | undefined>(undefined);
@@ -26,37 +27,44 @@ const EditResourcePage = () => {
   });
 
   const { mutate } = api.auditoryResource.update.useMutation({
-    onSuccess: (_data) => {
+    onSuccess: async (_data) => {
+      if (!resource) {
+        setServerError("An unexpected error has occured");
+        return;
+      }
+
       setServerError(undefined);
+
+      if (updateIconFile) {
+        const data = new FormData();
+        data.append("photo", updateIconFile);
+
+        if (!resource?.id) {
+          throw Error("Resource data missing for photo to upload");
+        }
+
+        const uploadResponse = await fetch(
+          `/api/resources/photo/${resource.id}`,
+          {
+            method: "POST",
+            body: data,
+          }
+        );
+
+        if (uploadResponse.status !== 200) {
+          setServerError(
+            "Failed uploading resource icon file. Changes did not save!"
+          );
+          throw new Error(JSON.stringify(uploadResponse));
+        }
+      }
+
+      await router.push(`/resources/${resource.id}`);
     },
     onError: (error) => setServerError(error.message),
   });
 
-  const onSubmit: SubmitHandler<ResourceUpdateInput> = async (data) => {
-    if (updateIconFile) {
-      const data = new FormData();
-      data.append("photo", updateIconFile);
-
-      if (!resource?.id) {
-        throw Error("Resource data missing for photo to upload");
-      }
-
-      const uploadResponse = await fetch(
-        `/api/resources/photo/${resource.id}`,
-        {
-          method: "POST",
-          body: data,
-        }
-      );
-
-      if (uploadResponse.status !== 200) {
-        setServerError(
-          "Failed uploading resource icon file. Changes did not save!"
-        );
-        throw new Error(JSON.stringify(uploadResponse));
-      }
-    }
-
+  const onSubmit: SubmitHandler<ResourceUpdateInput> = (data) => {
     mutate(data);
   };