finish profile uploading

DeckThemes · Mar 6, 2024 · 9985da7 · 9985da7
1 parent ed88cbc
commit 9985da7
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 239 deletions.
diff --git a/src/backend/apiHelpers/fetchWrappers.ts b/src/backend/apiHelpers/fetchWrappers.ts
@@ -48,41 +48,34 @@ export async function genericApiFetch(
   } = options;
 
   const { apiUrl } = globalState!.getPublicState();
-  function doTheFetching(authToken: string | undefined = undefined) {
+  async function doTheFetching(authToken: string | undefined = undefined) {
     const headers = createHeadersObj(authToken, request);
-
-    return server!
-      .fetchNoCors<Response>(`${apiUrl}${fetchPath}`, {
+    try {
+      const deckyRes = await server!.fetchNoCors<Response>(`${apiUrl}${fetchPath}`, {
         method: "GET",
         // If a  custom method is specified in request it will overwrite
         ...request,
         headers: headers,
-      })
-      .then((deckyRes) => {
-        if (deckyRes.success) {
-          return deckyRes.result;
-        }
+      });
+      if (!deckyRes.success) {
         throw new Error(`Fetch not successful!`);
-      })
-      .then((res) => {
-        if (res.status >= 200 && res.status <= 300 && res.body) {
-          // @ts-ignore
-          return JSON.parse(res.body || "");
-        }
+      }
+      const res = deckyRes.result;
+      if (res.status < 200 || res.status > 300 || !res.body) {
         throw new Error(`Res not OK!, code ${res.status} - ${res.body}`);
-      })
-      .then((json) => {
-        if (json) {
-          return json;
-        }
+      }
+      // @ts-ignore
+      const json = JSON.parse(res.body || "");
+      if (!json) {
         throw new Error(`No json returned!`);
-      })
-      .catch((err) => {
-        if (!failSilently) {
-          console.error(`Error fetching ${fetchPath}`, err);
-        }
-        onError();
-      });
+      }
+      return json;
+    } catch (err) {
+      if (!failSilently) {
+        console.error(`Error fetching ${fetchPath}`, err);
+      }
+      onError();
+    }
   }
   if (requiresAuth) {
     if (customAuthToken) {

diff --git a/src/backend/apiHelpers/profileUploadingHelpers.ts b/src/backend/apiHelpers/profileUploadingHelpers.ts
@@ -32,27 +32,35 @@ export async function publishProfile(
     throw new Error(`No blobId returned!`);
   }
   const blobId = deckyRes.result.message.id;
-
-  const json = await genericApiFetch(
-    `/submissions/css_zip`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+  try {
+    const json = await genericApiFetch(
+      `/submissions/css_zip`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          blob: blobId,
+          meta: {
+            imageBlobs: [],
+            description: description,
+            privateSubmission: !isPublic,
+          },
+        }),
       },
-      body: JSON.stringify({
-        blob: blobId,
-        meta: {
-          imageBlobs: [],
-          description: description,
-          privateSubmission: !isPublic,
+      {
+        requiresAuth: true,
+        onError: () => {
+          throw new Error(`Error Posting Request`);
         },
-      }),
-    },
-    { requiresAuth: true }
-  );
-  if (!json || !json.task) throw new Error(`No task returned`);
-  return json.task;
+      }
+    );
+    if (!json || !json.task) throw new Error(`No task returned`);
+    return json.task;
+  } catch (error) {
+    throw new Error(`Failed to submit profile: ${error}`);
+  }
 }
 
 export async function getTaskStatus(taskId: string): Promise<TaskQueryResponse> {

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -0,0 +1,29 @@
+import { ImSpinner5 } from "react-icons/im";
+
+export function Loading() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        gap: "1em",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <style>
+        {`
+            @keyframes spin {
+              to {
+                transform: rotate(360deg);
+              }
+            }
+            .spinny {
+              animation: spin 1s linear infinite;
+            }
+          `}
+      </style>
+      <ImSpinner5 className="spinny" size={48} />
+      <span style={{ fontWeight: "bold", fontSize: "2.5em" }}>Loading</span>
+    </div>
+  );
+}
diff --git a/src/components/Modals/UploadProfileModal.tsx b/src/components/Modals/UploadProfileModal.tsx
@@ -3,6 +3,7 @@ import * as python from "../../python";
 import {
   ButtonItem,
   ConfirmModal,
+  DialogButton,
   DropdownItem,
   Focusable,
   ModalRoot,
@@ -53,38 +54,56 @@ function UploadProfileModal({
   const [description, setDescription] = useState<string>("");
 
   const [uploadStatus, setUploadStatus] = useState<
-    "idle" | "submitting" | "taskStatus" | "completed"
+    "idle" | "submitting" | "taskStatus" | "completed" | "error"
   >("idle");
   const [taskId, setTaskId] = useState<string | undefined>(undefined);
+  const [errorData, setErrorData] = useState<string | undefined>(undefined);
 
   async function onUpload() {
     if (!selectedProfile) return;
-    setUploadStatus("submitting");
-    // eventually run the submit here
-    const taskId = await publishProfile(
-      localThemeList.find((e) => e.id === selectedProfile)!.name,
-      isPublic,
-      description
-    );
-    setUploadStatus("taskStatus");
-    setTaskId(taskId);
+    try {
+      setUploadStatus("submitting");
+      const taskId = await publishProfile(
+        localThemeList.find((e) => e.id === selectedProfile)!.name,
+        isPublic,
+        description
+      );
+      setUploadStatus("taskStatus");
+      setTaskId(taskId);
+    } catch (error) {
+      if (typeof error === "string") setErrorData(error);
+      setUploadStatus("error");
+    }
   }
 
-  function onTaskFinish(success: boolean) {
-    setUploadStatus("completed");
-    if (success) {
-      closeModal();
-      onUploadFinish();
-    }
+  function onTaskFinish() {
+    closeModal();
+    onUploadFinish();
   }
 
-  if (uploadStatus === "taskStatus" && taskId) {
-    return <TaskStatus task={taskId} onFinish={onTaskFinish} />;
+  if (uploadStatus !== "idle") {
+    return (
+      <TaskStatus
+        errorData={errorData}
+        uploadStatus={uploadStatus}
+        setUploadStatus={setUploadStatus}
+        taskId={taskId}
+        onFinish={onTaskFinish}
+      />
+    );
   }
 
   return (
     <Focusable style={{ display: "flex", flexDirection: "column" }}>
-      <span>Upload Profile</span>
+      <style>
+        {`
+          .confirm-button .gpfocuswithin {
+            background: #1a9fff;
+            color: #fff;
+          }
+        `}
+      </style>
+      <span style={{ fontSize: "22px", fontWeight: "bold" }}>Upload Profile</span>
       <DropdownItem
         selectedOption={selectedProfile}
         rgOptions={eligibleProfiles.map((e) => ({ data: e.id, label: e.display_name }))}
@@ -99,9 +118,14 @@ function UploadProfileModal({
         value={description}
         onChange={(e) => setDescription(e.target.value)}
       />
-      <ButtonItem onClick={onUpload}>
-        <span>Upload</span>
-      </ButtonItem>
+      <Focusable style={{ display: "flex", gap: "1em" }}>
+        <DialogButton className="confirm-button" onClick={onUpload}>
+          <span>Upload</span>
+        </DialogButton>
+        <DialogButton onClick={closeModal}>
+          <span>Cancel</span>
+        </DialogButton>
+      </Focusable>
     </Focusable>
   );
 }