From cae834e4d7f59249eb7396bec6edc0730919942e Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 23 Feb 2024 13:57:47 -0500
Subject: [PATCH] feat: renterd warn active uploads

---
 .changeset/friendly-nails-marry.md            |  5 ++++
 .../renterd/contexts/filesManager/uploads.tsx |  4 +++
 .../useWarnActiveUploadsOnClose.tsx           | 30 +++++++++++++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 .changeset/friendly-nails-marry.md
 create mode 100644 apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx

diff --git a/.changeset/friendly-nails-marry.md b/.changeset/friendly-nails-marry.md
new file mode 100644
index 000000000..2ae29f342
--- /dev/null
+++ b/.changeset/friendly-nails-marry.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The browser now warns the user if they have active uploads and try to close the tab.
diff --git a/apps/renterd/contexts/filesManager/uploads.tsx b/apps/renterd/contexts/filesManager/uploads.tsx
index 953c136fa..95a0454c5 100644
--- a/apps/renterd/contexts/filesManager/uploads.tsx
+++ b/apps/renterd/contexts/filesManager/uploads.tsx
@@ -23,6 +23,7 @@ import { MultipartUpload } from '../../lib/multipartUpload'
 import { MiBToBytes } from '@siafoundation/units'
 import { useMutate } from '@siafoundation/react-core'
 import { useRedundancySettings } from '../../hooks/useRedundancySettings'
+import { useWarnActiveUploadsOnClose } from './useWarnActiveUploadsOnClose'
 
 const maxConcurrentUploads = 5
 const maxConcurrentPartsPerUpload = 5
@@ -280,6 +281,9 @@ export function useUploads({ activeDirectoryPath }: Props) {
     [uploadsMap]
   )
 
+  // Abort local uploads when the browser tab is closed
+  useWarnActiveUploadsOnClose({ uploadsMap })
+
   return {
     uploadFiles,
     uploadsMap,
diff --git a/apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx b/apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx
new file mode 100644
index 000000000..ce7a0241a
--- /dev/null
+++ b/apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx
@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { UploadsMap } from './types'
+
+export function useWarnActiveUploadsOnClose({
+  uploadsMap,
+}: {
+  uploadsMap: UploadsMap
+}) {
+  useEffect(() => {
+    const activeUploads = Object.values(uploadsMap).filter(
+      (upload) => upload.uploadStatus === 'uploading'
+    )
+
+    const warnUserAboutActiveUploads = (event: BeforeUnloadEvent) => {
+      if (activeUploads.length > 0) {
+        const message = `Warning, closing the tab will abort all ${activeUploads.length} active uploads.`
+        event.returnValue = message // Legacy method for cross browser support
+        return message // Chrome requires returnValue to be set
+      }
+    }
+
+    if (activeUploads.length > 0) {
+      window.addEventListener('beforeunload', warnUserAboutActiveUploads)
+    }
+
+    return () => {
+      window.removeEventListener('beforeunload', warnUserAboutActiveUploads)
+    }
+  }, [uploadsMap])
+}