fix: state and rendering

app/components/dashboard-layout.tsx

@@ -54,7 +54,17 @@ export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
           <p>Privacy</p>
           <p>Ownership</p>
         </span>
-        <UploadFileModal />
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
+              <CloudUploadIcon className="w-6 h-6 -ml-3 mr-4" />
+              Upload Files
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <UploadFileForm />
+          </DialogContent>
+        </Dialog>
       </header>
 
       {children}
@@ -89,34 +99,28 @@ export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
   )
 }
 
-const UploadFileModal = () => {
+const UploadFileForm = () => {
-  const { getRootProps, getInputProps, files, upload, removeFile, cancelAll } =
+  const {
-    useUppy({
+    getRootProps,
+    getInputProps,
+    getFiles,
+    upload,
+    state,
+    removeFile,
+    cancelAll
+  } = useUppy({
     uploader: "tus",
     endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT
   })
 
-  const isUploading =
+  console.log({ state, files: getFiles() })
-    files.length > 0
+
-      ? files.map((file) => file.progress?.uploadStarted != null).includes(true)
+  const isUploading = state === "uploading"
-      : false
+  const isCompleted = state === "completed"
-  const isCompleted =
+  const hasStarted = state !== "idle" && state !== "initializing"
-    files.length > 0
-      ? files
-          .map((file) => file.progress?.uploadComplete)
-          .reduce((acc, cur) => acc && cur, true)
-      : false
-  const hasStarted = isUploading || isCompleted
 
   return (
-    <Dialog>
+    <>
-      <DialogTrigger asChild>
-        <Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
-          <CloudUploadIcon className="w-6 h-6 -ml-3 mr-4" />
-          Upload Files
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
       <DialogHeader className="mb-6">
         <DialogTitle>Upload Files</DialogTitle>
       </DialogHeader>
@@ -139,7 +143,7 @@ const UploadFileModal = () => {
       ) : null}
 
       <div className="w-full space-y-3 max-h-48 overflow-y-auto">
-          {files.map((file) => (
+        {getFiles().map((file) => (
           <UploadFileItem
             key={file.id}
             file={file}
@@ -155,31 +159,32 @@ const UploadFileModal = () => {
           <CloudCheckIcon className="w-32 h-32" />
           {isCompleted
             ? "Upload completed"
-              : `${files.length} being uploaded`}
+            : `${getFiles().length} files being uploaded`}
         </div>
       ) : null}
 
-        {hasStarted ? (
+      {isUploading ? (
         <DialogClose asChild onClick={cancelAll}>
           <Button size={"lg"} className="mt-6">
             Cancel
           </Button>
         </DialogClose>
-        ) : (
+      ) : null}
-          <Button size={"lg"} className="mt-6" onClick={upload}>
-            Upload
-          </Button>
-        )}
 
-        {hasStarted && isCompleted ? (
+      {isCompleted ? (
         <DialogClose asChild>
           <Button size={"lg"} className="mt-6">
             Close
           </Button>
         </DialogClose>
       ) : null}
-      </DialogContent>
+
-    </Dialog>
+      {!hasStarted && !isCompleted && !isUploading ? (
+        <Button size={"lg"} className="mt-6" onClick={upload}>
+          Upload
+        </Button>
+      ) : null}
+    </>
   )
 }
 

app/components/lib/uppy.ts

@@ -36,7 +36,10 @@ export function useUppy({
     (element: HTMLElement | null) => _setTargetRef(element),
     []
   )
-  const [state, setState] = useState<State>()
+  const [uppyState, setUppyState] = useState<State>()
+  const [state, setState] = useState<
+    "completed" | "idle" | "initializing" | "error" | "uploading"
+  >("initializing")
 
   const [inputProps, setInputProps] = useState<
     | {
@@ -71,7 +74,7 @@ export function useUppy({
     [targetRef, uppyInstance]
   )
   const cancelAll = useCallback(
-    () => uppyInstance.current?.cancelAll(),
+    () => uppyInstance.current?.cancelAll({ reason: "user" }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [targetRef, uppyInstance]
   )
@@ -116,36 +119,53 @@ export function useUppy({
     uppy.on("complete", (result) => {
       if (result.failed.length === 0) {
         console.log("Upload successful üòÄ")
+        setState("completed")
       } else {
         console.warn("Upload failed üòû")
+        setState("error")
       }
       console.log("successful files:", result.successful)
       console.log("failed files:", result.failed)
     })
 
-    const setStateCb = () => {
+    const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
-      setState(uppy.getState())
+      switch (event) {
+        case "upload":
+          setState("uploading")
+          break
+        case "upload-error":
+          setState("error")
+          break
+        default:
+          break
+      }
+      setUppyState(uppy.getState())
     }
 
     for (const event of LISTENING_EVENTS) {
-      uppy.on(event, setStateCb)
+      uppy.on(event, function cb() {
+        setStateCb(event)
+      })
     }
+    setState("idle")
 
     return () => {
-      for (const event of ["complete", ...LISTENING_EVENTS]) {
+      // for (const event of ["complete", ...LISTENING_EVENTS]) {
-        uppyInstance.current?.off(
+      //   uppyInstance.current?.off(
-          event as "complete" & keyof typeof LISTENING_EVENTS,
+      //     event as "complete" & keyof typeof LISTENING_EVENTS,
-          //@ts-expect-error -- huh? typescript wtf
+      //     //@ts-expect-error -- huh? typescript wtf
-          setStateCb
+      //     setStateCb
-        )
+      //   )
-      }
+      // }
-      uppyInstance.current?.close()
+      // uppyInstance.current?.cancelAll({ reason: "unmount" })
-      uppyInstance.current = undefined
+      // uppyInstance.current?.logout()
+      // uppyInstance.current?.close()
+      // uppyInstance.current = undefined
     }
   }, [targetRef, endpoint, uploader])
 
   return {
-    files: uppyInstance.current?.getFiles() ?? [],
+    getFiles: () => uppyInstance.current?.getFiles() ?? [],
     error: uppyInstance.current?.getState,
     state,
     upload: () =>
@@ -154,6 +174,6 @@ export function useUppy({
     getInputProps: () => inputProps,
     getRootProps,
     removeFile,
-    cancelAll,
+    cancelAll
   }
 }