4 files changed, 82 insertions, 25 deletions

diff --git a/src/client/northstar/utils/Extensions.ts b/src/client/northstar/utils/Extensions.ts
index ab9384f1f..720f4a062 100644
--- a/src/client/northstar/utils/Extensions.ts
+++ b/src/client/northstar/utils/Extensions.ts
@@ -5,6 +5,8 @@ interface String {
     hasNewline(): boolean;
 }
 
+const extensions = require(".././/.//../util/UtilExtensions");
+
 String.prototype.ReplaceAll = function (toReplace: string, replacement: string): string {
     var target = this;
     return target.split(toReplace).join(replacement);
@@ -18,6 +20,31 @@ String.prototype.Truncate = function (length: number, replacement: string): Stri
     return target;
 };
 
+interface Action<T> {
+    handler: (batch: T[]) => any;
+    interval?: number;
+}
+
+interface BatchParameters<T> {
+    size: number;
+    action?: Action<T>;
+}
+
+interface Array<T> {
+    batch(parameters: BatchParameters<T>): Promise<T[][]>;
+    lastElement(): T;
+}
+
+Array.prototype.batch = extensions.Batch;
+
+Array.prototype.lastElement = function <T>() {
+    if (!this.length) {
+        return undefined;
+    }
+    const last: T = this[this.length - 1];
+    return last;
+};
+
 interface Math {
     log10(val: number): number;
 }
diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx
index 260c6a629..5915f3412 100644
--- a/src/client/util/Import & Export/DirectoryImportBox.tsx
+++ b/src/client/util/Import & Export/DirectoryImportBox.tsx
@@ -92,29 +92,28 @@ export default class DirectoryImportBox extends React.Component<FieldViewProps>
             this.completed = 0;
         });
 
-        let sizes = [];
-        let modifiedDates = [];
+        let sizes: number[] = [];
+        let modifiedDates: number[] = [];
 
-        let i = 0;
         const uploads: FileResponse[] = [];
-        const batchSize = 15;
 
-        while (i < validated.length) {
-            const cap = Math.min(validated.length, i + batchSize);
-            let formData = new FormData();
-            const batch = validated.slice(i, cap);
+        await validated.batch({
+            size: 15,
+            action: {
+                handler: async (batch: File[]) => {
+                    sizes.push(...batch.map(file => file.size));
+                    modifiedDates.push(...batch.map(file => file.lastModified));
 
-            sizes.push(...batch.map(file => file.size));
-            modifiedDates.push(...batch.map(file => file.lastModified));
+                    let formData = new FormData();
+                    batch.forEach(file => formData.append(Utils.GenerateGuid(), file));
+                    const parameters = { method: 'POST', body: formData };
 
-            batch.forEach(file => formData.append(Utils.GenerateGuid(), file));
-            const parameters = { method: 'POST', body: formData };
-            uploads.push(...(await (await fetch(Utils.prepend(RouteStore.upload), parameters)).json()));
-
-            runInAction(() => this.completed += batch.length);
-            i = cap;
-        }
+                    uploads.push(...(await (await fetch(Utils.prepend(RouteStore.upload), parameters)).json()));
 
+                    runInAction(() => this.completed += batch.length);
+                }
+            }
+        });
 
         await Promise.all(uploads.map(async upload => {
             const type = upload.type;
diff --git a/src/client/util/UtilExtensions.ts b/src/client/util/UtilExtensions.ts
new file mode 100644
index 000000000..1e277b242
--- /dev/null
+++ b/src/client/util/UtilExtensions.ts
@@ -0,0 +1,39 @@
+module.exports.Batch = async function <T>(parameters: BatchParameters<T>) {
+    const { size, action } = parameters;
+    const batches: T[][] = [];
+    let i = 0;
+    while (i < this.length) {
+        const cap = Math.min(i + size, this.length);
+        batches.push(this.slice(i, cap));
+        i = cap;
+    }
+    console.log(`Beginning action on ${this.length} elements, split into ${batches.length} groups => ${batches.map(batch => batch.length).join(", ")}`);
+    if (action) {
+        const { handler, interval } = action;
+        if (!interval || batches.length === 1) {
+            for (let batch of batches) {
+                await handler(batch);
+            }
+        } else {
+            return new Promise<T[][]>(resolve => {
+                const iterator = batches[Symbol.iterator]();
+                const quota = batches.length;
+                let completed = 0;
+                const tag = setInterval(async () => {
+                    const next = iterator.next();
+                    if (next.done) {
+                        clearInterval(tag);
+                        return;
+                    }
+                    const batch = next.value;
+                    console.log(`Handling next batch with ${batch.length} elements`);
+                    await handler(batch);
+                    if (++completed === quota) {
+                        resolve(batches);
+                    }
+                }, interval);
+            });
+        }
+    }
+    return batches;
+};
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b623cab4e..aa002cee9 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -20,14 +20,6 @@ String.prototype.hasNewline = function () {
     return this.endsWith("\n");
 };
 
-(Array.prototype as any).lastElement = function (this: any[]) {
-    if (!this.length) {
-        return undefined;
-    }
-    return this[this.length - 1];
-};
-
-
 let swapDocs = async () => {
     let oldDoc = await Cast(CurrentUserUtils.UserDocument.linkManagerDoc, Doc);
     // Docs.Prototypes.MainLinkDocument().allLinks = new List<Doc>();