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 { Form, Link, useLocation } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import {
   Dialog,
   DialogContent,
@@ -46,10 +46,6 @@ 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();
@@ -175,62 +171,30 @@ 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()}
@@ -238,15 +202,10 @@ const UploadFileForm = () => {
           <input
             hidden
             aria-hidden
+            name="uppyFiles[]"
             key={new Date().toISOString()}
             multiple
-              name={fields.uppyFiles.name}
-              {...inputProps}
-              value={files.value}
-              onChange={() => {
-                //@ts-expect-error -- conform has shitty typeinference for controls
-                files.change(getFiles());
-              }}
+            {...getInputProps()}
           />
           <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
           <p>Drag & Drop Files or Browse</p>
@@ -266,12 +225,11 @@ const UploadFileForm = () => {
         ))}
       </div>
 
-        <ErrorList
-          errors={[
-            ...(fields.uppyFiles.errors ?? []),
-            ...(hasErrored ? ["An error occurred"] : []),
-          ]}
-        />
+      {hasErrored ? (
+        <div className="text-red-500">
+          <p>An error occurred</p>
+        </div>
+      ) : null}
 
       {hasStarted && !hasErrored ? (
         <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
@@ -284,7 +242,7 @@ const UploadFileForm = () => {
 
       {isUploading ? (
         <DialogClose asChild onClick={cancelAll}>
-            <Button type="button" size={"lg"} className="mt-6">
+          <Button size={"lg"} className="mt-6">
             Cancel
           </Button>
         </DialogClose>
@@ -292,22 +250,17 @@ const UploadFileForm = () => {
 
       {isCompleted ? (
         <DialogClose asChild>
-            <Button type="button" size={"lg"} className="mt-6">
+          <Button size={"lg"} className="mt-6">
             Close
           </Button>
         </DialogClose>
       ) : null}
 
       {!hasStarted && !isCompleted && !isUploading ? (
-          <Button
-            type="submit"
-            size={"lg"}
-            className="mt-6"
-            disabled={!isValid}>
+        <Button size={"lg"} className="mt-6" onClick={upload} disabled={getFiles().length === 0}>
           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 !== "processing";
+      return status.status !== "completed";
     });
 
     while (inProgress) {

app/hooks/usePinning.ts

@@ -63,7 +63,6 @@ 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?.items || query.state.data.items.length === 0) {
+      if (!query.state.data || !query.state.data.items.length) {
         return false;
       }
 

app/routes/file-manager/columns.tsx

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