LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

fix: state and rendering

This commit is contained in:
Juan Di Toro 2024-03-12 15:32:00 +01:00
parent b0809c65f3
commit 94406b7f13
2 changed files with 125 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
app/components/dashboard-layout.tsx
View File

@ -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 { getRootProps, getInputProps, files, upload, removeFile, cancelAll } =
useUppy({
const UploadFileForm = () => {
const {
getRootProps,
getInputProps,
getFiles,
upload,
state,
removeFile,
cancelAll
} = useUppy({
uploader: "tus",
endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT
})
const isUploading =
files.length > 0
? files.map((file) => file.progress?.uploadStarted != null).includes(true)
: false
const isCompleted =
files.length > 0
? files
.map((file) => file.progress?.uploadComplete)
.reduce((acc, cur) => acc && cur, true)
: false
const hasStarted = isUploading || isCompleted
console.log({ state, files: getFiles() })
const isUploading = state === "uploading"
const isCompleted = state === "completed"
const hasStarted = state !== "idle" && state !== "initializing"
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>
) : (
<Button size={"lg"} className="mt-6" onClick={upload}>
Upload
</Button>
)}
) : null}
{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}
</>
)
}

52
app/components/lib/uppy.ts
View File

@ -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 = () => {
setState(uppy.getState())
const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
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]) {
uppyInstance.current?.off(
event as "complete" & keyof typeof LISTENING_EVENTS,
//@ts-expect-error -- huh? typescript wtf
setStateCb
)
}
uppyInstance.current?.close()
uppyInstance.current = undefined
// for (const event of ["complete", ...LISTENING_EVENTS]) {
// uppyInstance.current?.off(
// event as "complete" & keyof typeof LISTENING_EVENTS,
// //@ts-expect-error -- huh? typescript wtf
// setStateCb
// )
// }
// uppyInstance.current?.cancelAll({ reason: "unmount" })
// 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
}
}