feat: syncs: sort transfers

FilenCloudDienste · Jul 31, 2024 · 815de81 · 815de81
1 parent 01f3a41
commit 815de81
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/components/syncs/content/transfers/index.tsx b/src/components/syncs/content/transfers/index.tsx
@@ -9,6 +9,7 @@ import { type RemoteTreeIgnoredReason } from "@filen/sync/dist/lib/filesystems/r
 import { DESKTOP_TOPBAR_HEIGHT } from "@/constants"
 import { ArrowDownUp } from "lucide-react"
 import { useTranslation } from "react-i18next"
+import { transferStateSortingPriority } from "@/components/transfers"
 
 export type IgnoreType = {
 	localPath: string
@@ -27,10 +28,15 @@ export const Transfers = memo(({ sync }: { sync: SyncPair }) => {
 	}, [windowSize.height])
 
 	const transfers = useMemo(() => {
-		return syncTransfers[sync.uuid] ? syncTransfers[sync.uuid]! : []
+		return syncTransfers[sync.uuid]
+			? syncTransfers[sync.uuid]!.sort((a, b) => transferStateSortingPriority[a.state] - transferStateSortingPriority[b.state])
+			: []
 	}, [sync.uuid, syncTransfers])
 
-	const getItemKey = useCallback((_: number, transfer: TransferType) => `${transfer.localPath}:${transfer.relativePath}`, [])
+	const getItemKey = useCallback(
+		(_: number, transfer: TransferType) => `${transfer.type}:${transfer.name}:${transfer.localPath}:${transfer.relativePath}`,
+		[]
+	)
 
 	const itemContent = useCallback((_: number, transfer: TransferType) => {
 		return <Transfer transfer={transfer} />

diff --git a/src/components/syncs/content/transfers/transfer.tsx b/src/components/syncs/content/transfers/transfer.tsx
@@ -36,7 +36,11 @@ export const Transfer = memo(({ transfer }: { transfer: TransferType }) => {
 								</TooltipContent>
 							</Tooltip>
 						</TooltipProvider>
-						<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">{formatBytes(transfer.size)}</p>
+						{transfer.size > 0 && (
+							<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">
+								{formatBytes(transfer.size)}
+							</p>
+						)}
 					</div>
 				</div>
 			</div>

diff --git a/src/components/transfers/transfer.tsx b/src/components/transfers/transfer.tsx
@@ -100,9 +100,11 @@ export const Transfer = memo(
 						</div>
 						<div className="flex flex-col">
 							<p className="line-clamp-1 text-ellipsis break-all">{transfer.name}</p>
-							<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">
-								{formatBytes(transfer.size)}
-							</p>
+							{transfer.size > 0 && (
+								<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">
+									{formatBytes(transfer.size)}
+								</p>
+							)}
 						</div>
 					</div>
 					<div className="flex flex-row gap-1 shrink-0">