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,139 +171,96 @@ 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 ? (
-        {!hasStarted ? (
+        <div
-          <div
+          {...getRootProps()}
-            {...getRootProps()}
+          className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
-            className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
+          <input
-            <input
+            hidden
-              hidden
+            aria-hidden
-              aria-hidden
+            name="uppyFiles[]"
-              key={new Date().toISOString()}
+            key={new Date().toISOString()}
-              multiple
+            multiple
-              name={fields.uppyFiles.name}
+            {...getInputProps()}
-              {...inputProps}
+          />
-              value={files.value}
+          <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
-              onChange={() => {
+          <p>Drag & Drop Files or Browse</p>
-                //@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>
-          </div>
-        ) : null}
-
-        <div className="w-full space-y-3 max-h-48 overflow-y-auto">
-          {getFiles().map((file) => (
-            <UploadFileItem
-              key={file.id}
-              file={file}
-              onRemove={(id) => {
-                removeFile(id);
-              }}
-              failedState={getFailedState(file.id)}
-            />
-          ))}
         </div>
+      ) : null}
 
-        <ErrorList
+      <div className="w-full space-y-3 max-h-48 overflow-y-auto">
-          errors={[
+        {getFiles().map((file) => (
-            ...(fields.uppyFiles.errors ?? []),
+          <UploadFileItem
-            ...(hasErrored ? ["An error occurred"] : []),
+            key={file.id}
-          ]}
+            file={file}
-        />
+            onRemove={(id) => {
+              removeFile(id);
+            }}
+            failedState={getFailedState(file.id)}
+          />
+        ))}
+      </div>
 
-        {hasStarted && !hasErrored ? (
+      {hasErrored ? (
-          <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
+        <div className="text-red-500">
-            <CloudCheckIcon className="w-32 h-32" />
+          <p>An error occurred</p>
-            {isCompleted
+        </div>
-              ? "Upload completed"
+      ) : null}
-              : `${getFiles().length} files being uploaded`}
-          </div>
-        ) : null}
 
-        {isUploading ? (
+      {hasStarted && !hasErrored ? (
-          <DialogClose asChild onClick={cancelAll}>
+        <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
-            <Button type="button" size={"lg"} className="mt-6">
+          <CloudCheckIcon className="w-32 h-32" />
-              Cancel
+          {isCompleted
-            </Button>
+            ? "Upload completed"
-          </DialogClose>
+            : `${getFiles().length} files being uploaded`}
-        ) : null}
+        </div>
+      ) : null}
 
-        {isCompleted ? (
+      {isUploading ? (
-          <DialogClose asChild>
+        <DialogClose asChild onClick={cancelAll}>
-            <Button type="button" size={"lg"} className="mt-6">
+          <Button size={"lg"} className="mt-6">
-              Close
+            Cancel
-            </Button>
-          </DialogClose>
-        ) : null}
-
-        {!hasStarted && !isCompleted && !isUploading ? (
-          <Button
-            type="submit"
-            size={"lg"}
-            className="mt-6"
-            disabled={!isValid}>
-            Upload
           </Button>
-        ) : null}
+        </DialogClose>
-      </Form>
+      ) : null}
+
+      {isCompleted ? (
+        <DialogClose asChild>
+          <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}>
+          Upload
+        </Button>
+      ) : null}
     </>
   );
 };

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"}>
+        <Button type="submit" className="w-full">
-          {pinStatus === "pending" ? "Processing..." : "Pin Content"}
+          Pin Content
         </Button>
       </form>
     </>