Compress screenshot files

web/src/app/volumes/volume-list.tsx

@@ -1,4 +1,8 @@
-import Loading from "@/components/widgets/loading"
+import { useState } from "react"
+import { useParams } from "react-router-dom"
+import useVolumes from "@/hooks/useVolumes"
+import useNodeHead from "@/hooks/useNodeHead"
+import { IVolume } from "@/lib/api-models"
 import {
   Breadcrumb,
   BreadcrumbCurrent,
@@ -13,15 +17,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { IVolume } from "@/lib/api-models"
-import { useState } from "react"
+import Loading from "@/components/widgets/loading"
 import MainArea from "@/components/widgets/main-area"
 import TopBar from "@/components/widgets/top-bar"
 import TopBarActions from "@/components/widgets/top-bar-actions"
 import MainContent from "@/components/widgets/main-content"
-import useVolumes from "@/hooks/useVolumes"
-import { useParams } from "react-router-dom"
-import useNodeHead from "@/hooks/useNodeHead"
 import TableButtonDelete from "@/components/widgets/table-button-delete"
 import { TableNoData } from "@/components/widgets/table-no-data"
 import DeleteDialog from "@/components/delete-dialog"
@@ -33,17 +33,15 @@ export default function VolumeList() {
   const { nodeHead } = useNodeHead(nodeId!)
   const { isLoading, volumes, mutateVolumes } = useVolumes(nodeId!)
 
-  const [volume, setVolume] = useState<IVolume | null>(null)
-  const [deleteVolumeOpenConfirmation, setDeleteVolumeOpenConfirmation] =
+  const [volumeToDelete, setVolumeToDelete] = useState<IVolume | null>(null)
+  const [isDeleteConfirmationOpen, setDeleteConfirmationOpen] =
     useState(false)
-  const [deleteInProgress, setDeleteInProgress] = useState(false)
-  const [pruneInProgress, setPruneInProgress] = useState(false)
-
-  if (isLoading) return <Loading />
+  const [isDeleteInProgress, setDeleteInProgress] = useState(false)
+  const [isPruneInProgress, setPruneInProgress] = useState(false)
 
-  const handleDeleteVolumeConfirmation = (volume: IVolume) => {
-    setVolume({ ...volume })
-    setDeleteVolumeOpenConfirmation(true)
+  const handleDeleteConfirmation = (volume: IVolume) => {
+    setVolumeToDelete(volume)
+    setDeleteConfirmationOpen(true)
   }
 
   const handleDelete = async () => {
@@ -53,17 +51,17 @@ export default function VolumeList() {
       {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name: volume?.name }),
+        body: JSON.stringify({ name: volumeToDelete?.name }),
       }
     )
     if (!response.ok) {
-      const r = await response.json()
-      setDeleteVolumeOpenConfirmation(false)
-      toastFailed(r.errors?.body)
+      const responseData = await response.json()
+      setDeleteConfirmationOpen(false)
+      toastFailed(responseData.errors?.body)
     } else {
       mutateVolumes()
       setTimeout(() => {
-        setDeleteVolumeOpenConfirmation(false)
+        setDeleteConfirmationOpen(false)
         toastSuccess("Volume deleted.")
       }, 500)
     }
@@ -81,20 +79,20 @@ export default function VolumeList() {
       }
     )
     if (!response.ok) {
-      const r = await response.json()
-      toastFailed(r.errors?.body)
+      const responseData = await response.json()
+      toastFailed(responseData.errors?.body)
     } else {
       mutateVolumes()
-      const r = await response.json()
+      const responseData = await response.json()
       let description = "Nothing found to delete"
-      if (r.volumesDeleted?.length > 0) {
+      if (responseData.volumesDeleted?.length > 0) {
         description = `${
-          r.volumesDeleted.length
+          responseData.volumesDeleted.length
         } unused volumes deleted. Space reclaimed: ${convertByteToMb(
-          r.spaceReclaimed
+          responseData.spaceReclaimed
         )}`
       }
-      setTimeout(async () => {
+      setTimeout(() => {
         toastSuccess(description)
       }, 500)
     }