@stoker-platform/web-app 0.5.182 → 0.5.184

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.184
+
+### Patch Changes
+
+- fix: perform bulk write in batches
+
+## 0.5.183
+
+### Patch Changes
+
+- fix: improve compact list metric transitions
+
 ## 0.5.182
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.182",
+    "version": "0.5.184",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Form.tsx

@@ -4323,49 +4323,58 @@ function RecordForm({
                     return
                 }
 
-                const updatePromises: Promise<StokerRecord>[] = []
+                const recordsToUpdate = rowSelection.filter((selectedRecord) => selectedRecord.id)
 
-                rowSelection.forEach((selectedRecord) => {
-                    if (selectedRecord.id) {
-                        setOptimisticUpdate(labels.collection, {
-                            ...selectedRecord,
-                            ...cloneDeep(recordToSave),
-                        } as StokerRecord)
-                    }
+                recordsToUpdate.forEach((selectedRecord) => {
+                    setOptimisticUpdate(labels.collection, {
+                        ...selectedRecord,
+                        ...cloneDeep(recordToSave),
+                    } as StokerRecord)
                 })
 
-                rowSelection.forEach((selectedRecord) => {
-                    if (!selectedRecord.id) return
-
-                    const serverWrite = isServerUpdate(collection, { ...recordToSave, id: selectedRecord.id })
-                    setGlobalLoading("+", selectedRecord.id, serverWrite, !(serverWrite || isServerReadOnly))
+                const BATCH_SIZE = 5
+                const runUpdates = async () => {
+                    for (let i = 0; i < recordsToUpdate.length; i += BATCH_SIZE) {
+                        const batch = recordsToUpdate.slice(i, i + BATCH_SIZE)
+                        const batchPromises = batch.map((selectedRecord) => {
+                            const serverWrite = isServerUpdate(collection, {
+                                ...recordToSave,
+                                id: selectedRecord.id,
+                            })
+                            setGlobalLoading("+", selectedRecord.id, serverWrite, !(serverWrite || isServerReadOnly))
 
-                    const updatePromise = updateRecord(path, selectedRecord.id, recordToSave, {
-                        originalRecord: selectedRecord,
-                    })
-                        .catch((error) => {
-                            console.error(`Failed to update record ${selectedRecord.id}:`, error)
-                            toast({
-                                // eslint-disable-next-line security/detect-object-injection
-                                description: `${recordTitle} ${recordTitleField ? selectedRecord[recordTitleField] : selectedRecord.id} failed to update.`,
-                                variant: "destructive",
+                            return updateRecord(path, selectedRecord.id, recordToSave, {
+                                originalRecord: selectedRecord,
                             })
+                                .catch((error) => {
+                                    console.error(`Failed to update record ${selectedRecord.id}:`, error)
+                                    toast({
+                                        // eslint-disable-next-line security/detect-object-injection
+                                        description: `${recordTitle} ${recordTitleField ? selectedRecord[recordTitleField] : selectedRecord.id} failed to update.`,
+                                        variant: "destructive",
+                                    })
+                                })
+                                .finally(() => {
+                                    removeOptimisticUpdate(labels.collection, selectedRecord.id)
+                                    setGlobalLoading(
+                                        "-",
+                                        selectedRecord.id,
+                                        undefined,
+                                        !(serverWrite || isServerReadOnly),
+                                    )
+                                    if (serverWrite || isServerReadOnly) {
+                                        if (onSaveRecord) onSaveRecord()
+                                    }
+                                })
                         })
-                        .finally(() => {
-                            removeOptimisticUpdate(labels.collection, selectedRecord.id)
-                            setGlobalLoading("-", selectedRecord.id, undefined, !(serverWrite || isServerReadOnly))
-                            if (serverWrite || isServerReadOnly) {
-                                if (onSaveRecord) onSaveRecord()
-                            }
-                        })
-
-                    updatePromises.push(updatePromise as Promise<StokerRecord>)
-                })
+                        await Promise.all(batchPromises)
+                    }
+                }
 
                 if (isServerReadOnly) {
-                    await Promise.all(updatePromises)
+                    await runUpdates()
                 } else {
-                    Promise.all(updatePromises)
+                    runUpdates()
                 }
 
                 rowSelection.forEach((selectedRecord) => {

package/src/List.tsx

@@ -1232,46 +1232,68 @@ export function List({
         const titles = await getCachedConfigValue(customization, ["collections", labels.collection, "admin", "titles"])
         const recordTitle = titles?.record || labels.record
 
-        selectedRecords.forEach((record) => {
+        const recordsToDelete = [...selectedRecords]
+
+        for (const record of recordsToDelete) {
             if (isGlobalLoading.get(record.id)?.server) {
                 alert(
                     `Record ${record.id} is currently being written to the server. Please wait for it to finish before deleting.`,
                 )
                 return
             }
-            const serverWrite = isServerDelete(collection, record)
+        }
 
+        recordsToDelete.forEach((record) => {
             setOptimisticDelete(labels.collection, record.id)
+        })
 
-            setGlobalLoading("+", record.id, serverWrite, !(serverWrite || isServerReadOnly))
+        const BATCH_SIZE = 5
+        const runDeletes = async () => {
+            for (let i = 0; i < recordsToDelete.length; i += BATCH_SIZE) {
+                const batch = recordsToDelete.slice(i, i + BATCH_SIZE)
+                const batchPromises = batch.map((record) => {
+                    const serverWrite = isServerDelete(collection, record)
 
-            deleteRecord(record.Collection_Path, record.id)
-                .then(() => {
-                    if (isServerReadOnly) {
-                        backToStart()
-                    }
-                })
-                .catch((error) => {
-                    console.error(error)
-                    toast({
-                        // eslint-disable-next-line security/detect-object-injection
-                        description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} failed to delete.`,
-                        variant: "destructive",
-                    })
-                })
-                .finally(() => {
-                    if (serverWrite || isServerReadOnly) {
+                    setGlobalLoading("+", record.id, serverWrite, !(serverWrite || isServerReadOnly))
+
+                    const deletePromise = deleteRecord(record.Collection_Path, record.id)
+                        .then(() => {
+                            if (isServerReadOnly) {
+                                backToStart()
+                            }
+                        })
+                        .catch((error) => {
+                            console.error(error)
+                            toast({
+                                // eslint-disable-next-line security/detect-object-injection
+                                description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} failed to delete.`,
+                                variant: "destructive",
+                            })
+                        })
+                        .finally(() => {
+                            if (serverWrite || isServerReadOnly) {
+                                removeOptimisticDelete(labels.collection, record.id)
+                            }
+                            setGlobalLoading("-", record.id, undefined, !(serverWrite || isServerReadOnly))
+                        })
+                    if (!serverWrite && !isServerReadOnly) {
                         removeOptimisticDelete(labels.collection, record.id)
                     }
-                    setGlobalLoading("-", record.id, undefined, !(serverWrite || isServerReadOnly))
+                    return deletePromise
                 })
-            if (!serverWrite && !isServerReadOnly) {
-                removeOptimisticDelete(labels.collection, record.id)
+                await Promise.all(batchPromises)
             }
-        })
+        }
+
+        if (isServerReadOnly) {
+            await runDeletes()
+        } else {
+            runDeletes()
+        }
+
         setRowSelection({})
         toast({
-            description: `Deleting ${selectedRecords.length} ${selectedRecords.length > 1 ? "records" : "record"}.`,
+            description: `Deleting ${recordsToDelete.length} ${recordsToDelete.length > 1 ? "records" : "record"}.`,
         })
     }, [
         collection,
@@ -1513,6 +1535,8 @@ export function List({
                                         ) {
                                             const metricTitle = metric.title || `Total ${collectionTitle}`
                                             if (metric.compact) {
+                                                // eslint-disable-next-line security/detect-object-injection
+                                                if (!metricsValues[index]) return null
                                                 return (
                                                     <div
                                                         key={`metric-${index}`}