fix: pinning progress bar is now fully working

app/components/general-layout.tsx

@@ -2,7 +2,7 @@ import { Button } from "~/components/ui/button";
 import logoPng from "~/images/lume-logo.png?url";
 import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
 import discordLogoPng from "~/images/discord-logo.png?url";
-import { Link, useLocation } from "@remix-run/react";
+import { Form, Link, useLocation } from "@remix-run/react";
 import {
   Dialog,
   DialogContent,
@@ -46,6 +46,10 @@ import {
   TooltipProvider,
 } from "./ui/tooltip";
 import filesize from "./lib/filesize";
+import { z } from "zod";
+import { getFormProps, useForm, useInputControl } from "@conform-to/react";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
+import { ErrorList } from "./forms";
 
 export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
   const location = useLocation();
@@ -171,30 +175,62 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
   );
 };
 
+const UploadFormSchema = z.object({
+  uppyFiles: z.array(z.any()).min(1, {
+    message: "At least one file must be uploaded",
+  }),
+});
+
 const UploadFileForm = () => {
   const {
     getRootProps,
     getInputProps,
     getFiles,
-    upload,
     state,
     removeFile,
     cancelAll,
     failedFiles,
+    upload,
   } = useUppy();
 
+  const [form, fields] = useForm({
+    constraint: getZodConstraint(UploadFormSchema),
+    shouldValidate: "onInput",
+    onValidate: ({ formData }) => {
+      const result = parseWithZod(formData, {
+        schema: UploadFormSchema,
+      });
+      return result;
+    },
+    onSubmit: (e) => {
+      e.preventDefault();
+      return upload();
+    },
+  });
+
+  const inputProps = getInputProps();
+  const files = useInputControl({
+    key: fields.uppyFiles.key,
+    name: fields.uppyFiles.name,
+    formId: form.id
+  });
+
   const isUploading = state === "uploading";
   const isCompleted = state === "completed";
   const hasErrored = state === "error";
   const hasStarted = state !== "idle" && state !== "initializing";
+  const isValid = form.valid || getFiles().length > 0;
   const getFailedState = (id: string) =>
     failedFiles.find((file) => file.id === id);
 
+  console.log({ files: getFiles() });
+
   return (
     <>
       <DialogHeader className="mb-6">
         <DialogTitle>Upload Files</DialogTitle>
       </DialogHeader>
+      <Form {...getFormProps(form)} className="flex flex-col">
         {!hasStarted ? (
           <div
             {...getRootProps()}
@@ -202,10 +238,15 @@ const UploadFileForm = () => {
             <input
               hidden
               aria-hidden
-            name="uppyFiles[]"
               key={new Date().toISOString()}
               multiple
-            {...getInputProps()}
+              name={fields.uppyFiles.name}
+              {...inputProps}
+              value={files.value}
+              onChange={() => {
+                //@ts-expect-error -- conform has shitty typeinference for controls
+                files.change(getFiles());
+              }}
             />
             <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
             <p>Drag & Drop Files or Browse</p>
@@ -225,11 +266,12 @@ const UploadFileForm = () => {
           ))}
         </div>
 
-      {hasErrored ? (
-        <div className="text-red-500">
-          <p>An error occurred</p>
-        </div>
-      ) : null}
+        <ErrorList
+          errors={[
+            ...(fields.uppyFiles.errors ?? []),
+            ...(hasErrored ? ["An error occurred"] : []),
+          ]}
+        />
 
         {hasStarted && !hasErrored ? (
           <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
@@ -242,7 +284,7 @@ const UploadFileForm = () => {
 
         {isUploading ? (
           <DialogClose asChild onClick={cancelAll}>
-          <Button size={"lg"} className="mt-6">
+            <Button type="button" size={"lg"} className="mt-6">
               Cancel
             </Button>
           </DialogClose>
@@ -250,17 +292,22 @@ const UploadFileForm = () => {
 
         {isCompleted ? (
           <DialogClose asChild>
-          <Button size={"lg"} className="mt-6">
+            <Button type="button" size={"lg"} className="mt-6">
               Close
             </Button>
           </DialogClose>
         ) : null}
 
         {!hasStarted && !isCompleted && !isUploading ? (
-        <Button size={"lg"} className="mt-6" onClick={upload} disabled={getFiles().length === 0}>
+          <Button
+            type="submit"
+            size={"lg"}
+            className="mt-6"
+            disabled={!isValid}>
             Upload
           </Button>
         ) : null}
+      </Form>
     </>
   );
 };

app/data/pinning.ts

@@ -60,7 +60,7 @@ export class PinningProcess {
     let allStatuses = Array.from(PinningProcess.instances.values());
     let inProgress = allStatuses.some((status) => {
       PinningProcess.checkStatus(status.id);
-      return status.status !== "completed";
+      return status.status !== "processing";
     });
 
     while (inProgress) {

app/hooks/usePinning.ts

@@ -63,6 +63,7 @@ export const usePinning = () => {
   return {
     progressStatus: context.query.status,
     progressData: context.query.data,
+    fetchProgress: context.query.refetch,
     pinStatus,
     pinData,
     unpinStatus,

app/providers/PinningProvider.tsx

@@ -33,7 +33,7 @@ export const PinningProvider = ({ children }: React.PropsWithChildren) => {
   const queryResult = useQuery({
     queryKey: ["pin-progress"],
     refetchInterval: (query) => {
-      if (!query.state.data || !query.state.data.items.length) {
+      if (!query.state.data?.items || query.state.data.items.length === 0) {
         return false;
       }
 

app/routes/file-manager/columns.tsx

@@ -53,6 +53,10 @@ export const columns: ColumnDef<FileItem>[] = [
   //   enableSorting: false,
   //   enableHiding: false,
   // },
+  {
+    accessorKey: "name",
+    header: () => null,
+  },
   {
     accessorKey: "cid",
     header: "CID",

app/routes/file-manager/index.tsx

@@ -113,7 +113,7 @@ const PinFilesSchema = z.object({
 });
 
 const PinFilesForm = ({ close }: { close: () => void }) => {
-  const { bulkPin, pinStatus, pinData } = usePinning();
+  const { bulkPin, pinStatus, fetchProgress } = usePinning();
   const [form, fields] = useForm({
     id: "pin-files",
     constraint: getZodConstraint(PinFilesSchema),
@@ -131,13 +131,12 @@ const PinFilesForm = ({ close }: { close: () => void }) => {
     },
   });
 
-  console.log({pinStatus, pinData})
-
   useEffect(() => {
     if (pinStatus === "success") {
+      fetchProgress();
       close();
     }
-  }, [pinStatus, close]);
+  }, [pinStatus, fetchProgress, close]);
 
   return (
     <>
@@ -154,8 +153,8 @@ const PinFilesForm = ({ close }: { close: () => void }) => {
           errors={fields.cids.errors || pinStatus === "error" ? ["An error occurred, please try again"] : []}
         />
 
-        <Button type="submit" className="w-full">
-          Pin Content
+        <Button type="submit" className="w-full" disabled={pinStatus === "pending"}>
+          {pinStatus === "pending" ? "Processing..." : "Pin Content"}
         </Button>
       </form>
     </>