refactor: max file size default unit

src/lib/helpers/sizeConvertion.ts

@@ -1,6 +1,7 @@
 import prettyBytes from 'pretty-bytes';
 
-const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] as const;
+export type Size = (typeof sizes)[number];
 
 export function calculateSize(bytes: number, decimals = 1) {
     if (bytes === 0) return '0 Bytes';
@@ -13,18 +14,19 @@ export function calculateSize(bytes: number, decimals = 1) {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
-export function sizeToBytes(value: number, unit: string) {
+export function sizeToBytes(value: number, unit: Size) {
     const index = sizes.indexOf(unit);
     return value * Math.pow(1024, index);
 }
-export function bytesToSize(value: number, unit: string) {
+
+export function bytesToSize(value: number, unit: Size) {
     const index = sizes.indexOf(unit);
     return value / Math.pow(1024, index);
 }
 
 export function humanFileSize(bytes: number): {
     value: string;
-    unit: string;
+    unit: Size;
 } {
     const value = prettyBytes(bytes, {
         locale: 'en'
@@ -32,6 +34,6 @@ export function humanFileSize(bytes: number): {
 
     return {
         value: value[0],
-        unit: value[1]
+        unit: value[1] as Size
     };
 }

src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte

@@ -1,83 +1,4 @@
-<script lang="ts">
-    import { Pill } from '$lib/elements';
-    import { CardGrid, Box, Heading } from '$lib/components';
-    import { Container } from '$lib/layout';
-    import {
-        Form,
-        Button,
-        InputText,
-        InputTags,
-        InputNumber,
-        InputSelect,
-        InputSwitch,
-        FormList
-    } from '$lib/elements/forms';
-    import { bucket } from '../store';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { sizeToBytes } from '$lib/helpers/sizeConvertion';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
-    import { symmetricDifference } from '$lib/helpers/array';
-    import { Permissions } from '$lib/components/permissions';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import Delete from '../deleteBucket.svelte';
-    import { trackEvent } from '$lib/actions/analytics';
-    import { writable } from 'svelte/store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let showDelete = false;
-
-    let enabled: boolean = null,
-        bucketName: string = null,
-        bucketFileSecurity: boolean = null,
-        bucketPermissions: string[] = null,
-        arePermsDisabled = true,
-        encryption: boolean = null,
-        antivirus: boolean = null,
-        maxSize: number,
-        compression: string = null;
-    let byteUnit = writable('MB');
-    let sizeInBytes: number = null;
-    const options = [
-        { label: 'Bytes', value: 'Bytes' },
-        { label: 'Kilobytes', value: 'KB' },
-        { label: 'Megabytes', value: 'MB' },
-        { label: 'Gigabytes', value: 'GB' }
-    ];
-    const compressionOptions = [
-        { label: 'None', value: 'none' },
-        { label: 'Gzip', value: 'gzip' },
-        { label: 'Zstd', value: 'zstd' }
-    ];
-    let suggestedExtensions = ['jpg', 'png', 'svg', 'gif', 'html', 'pdf', 'mp4'];
-    let extensions = $bucket.allowedFileExtensions;
-    let isExtensionsDisabled = true;
-
-    onMount(async () => {
-        enabled ??= $bucket.enabled;
-        bucketName ??= $bucket.name;
-        bucketName ??= $bucket.name;
-        bucketFileSecurity ??= $bucket.fileSecurity;
-        bucketPermissions ??= $bucket.$permissions;
-        encryption ??= $bucket.encryption;
-        antivirus ??= $bucket.antivirus;
-        maxSize = $bucket.maximumFileSize / 1024 / 1024;
-        compression ??= $bucket.compression;
-    });
-
-    $: if (bucketPermissions) {
-        if (symmetricDifference(bucketPermissions, $bucket.$permissions).length) {
-            arePermsDisabled = false;
-        } else arePermsDisabled = true;
-    }
-    $: if (extensions) {
-        if (JSON.stringify(extensions) !== JSON.stringify($bucket.allowedFileExtensions)) {
-            isExtensionsDisabled = false;
-        } else isExtensionsDisabled = true;
-    }
-
+<script lang="ts" context="module">
     type TUpdateBucketMisc = {
         successMessage?: string;
         trackEventName: string;
@@ -85,8 +6,11 @@
         arePermsDisabled?: boolean;
     };
 
-    async function updateBucket(updates: Partial<Models.Bucket>, misc: TUpdateBucketMisc) {
-        const values = { ...$bucket, ...updates };
+    let arePermsDisabled = writable(true);
+
+    export async function updateBucket(updates: Partial<Models.Bucket>, misc: TUpdateBucketMisc) {
+        const bucketData = get(bucket);
+        const values = { ...bucketData, ...updates };
 
         try {
             await sdkForProject.storage.updateBucket(
@@ -105,11 +29,11 @@
             invalidate(Dependencies.BUCKET);
 
             if (misc.arePermsDisabled !== undefined) {
-                arePermsDisabled = misc.arePermsDisabled;
+                arePermsDisabled.set(misc.arePermsDisabled);
             }
 
             addNotification({
-                message: misc.successMessage ?? `${$bucket.name} has been updated`,
+                message: misc.successMessage ?? `${bucketData.name} has been updated`,
                 type: 'success'
             });
 
@@ -123,6 +47,78 @@
             });
         }
     }
+</script>
+
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Permissions } from '$lib/components/permissions';
+    import { Dependencies } from '$lib/constants';
+    import { Pill } from '$lib/elements';
+    import {
+        Button,
+        Form,
+        FormList,
+        InputSelect,
+        InputSwitch,
+        InputTags,
+        InputText
+    } from '$lib/elements/forms';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { onMount } from 'svelte';
+    import { get, writable } from 'svelte/store';
+    import Delete from '../deleteBucket.svelte';
+    import { bucket } from '../store';
+    import UpdateMaxFileSize from './updateMaxFileSize.svelte';
+
+    let showDelete = false;
+
+    let enabled: boolean = null;
+    let bucketName: string = null;
+    let bucketFileSecurity: boolean = null;
+    let bucketPermissions: string[] = null;
+    let encryption: boolean = null;
+    let antivirus: boolean = null;
+    let compression: string = null;
+
+    const compressionOptions = [
+        { label: 'None', value: 'none' },
+        { label: 'Gzip', value: 'gzip' },
+        { label: 'Zstd', value: 'zstd' }
+    ];
+    let suggestedExtensions = ['jpg', 'png', 'svg', 'gif', 'html', 'pdf', 'mp4'];
+    let extensions = $bucket.allowedFileExtensions;
+    let isExtensionsDisabled = true;
+
+    onMount(async () => {
+        enabled ??= $bucket.enabled;
+        bucketName ??= $bucket.name;
+        bucketName ??= $bucket.name;
+        bucketFileSecurity ??= $bucket.fileSecurity;
+        bucketPermissions ??= $bucket.$permissions;
+        encryption ??= $bucket.encryption;
+        antivirus ??= $bucket.antivirus;
+
+        compression ??= $bucket.compression;
+    });
+
+    $: if (bucketPermissions) {
+        if (symmetricDifference(bucketPermissions, $bucket.$permissions).length) {
+            $arePermsDisabled = false;
+        } else $arePermsDisabled = true;
+    }
+
+    $: if (extensions) {
+        if (JSON.stringify(extensions) !== JSON.stringify($bucket.allowedFileExtensions)) {
+            isExtensionsDisabled = false;
+        } else isExtensionsDisabled = true;
+    }
 
     function toggleBucket() {
         updateBucket(
@@ -188,18 +184,6 @@
         );
     }
 
-    function updateMaxSize() {
-        const size = sizeToBytes(maxSize, $byteUnit);
-        updateBucket(
-            {
-                maximumFileSize: size
-            },
-            {
-                trackEventName: 'submit_bucket_update_size'
-            }
-        );
-    }
-
     function updateCompression() {
         updateBucket(
             {
@@ -221,22 +205,6 @@
             }
         );
     }
-
-    byteUnit.subscribe((b) => {
-        if (b === 'Bytes') {
-            maxSize = sizeInBytes;
-        } else if (b === 'KB') {
-            maxSize = sizeInBytes / 1024;
-        } else if (b === 'MB') {
-            maxSize = sizeInBytes / 1024 / 1024;
-        } else if (b === 'GB') {
-            maxSize = sizeInBytes / 1024 / 1024 / 1024;
-        }
-    });
-
-    $: if (maxSize) {
-        sizeInBytes = sizeToBytes(maxSize, $byteUnit);
-    }
 </script>
 
 <Container>
@@ -305,7 +273,7 @@
                     {/if}
                 </svelte:fragment>
                 <svelte:fragment slot="actions">
-                    <Button disabled={arePermsDisabled} submit>Update</Button>
+                    <Button disabled={$arePermsDisabled} submit>Update</Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -432,28 +400,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateMaxSize}>
-            <CardGrid>
-                <Heading tag="h2" size="6">Update Maximum File Size</Heading>
-                <p class="text">Set the maximum file size allowed in the bucket.</p>
-                <svelte:fragment slot="aside">
-                    <ul class="u-flex u-gap-12">
-                        <InputNumber
-                            id="size"
-                            label="Size"
-                            placeholder={$bucket.maximumFileSize.toString()}
-                            bind:value={maxSize} />
-                        <InputSelect id="bytes" label="Bytes" {options} bind:value={$byteUnit} />
-                    </ul>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button disabled={sizeInBytes === $bucket.maximumFileSize} submit
-                        >Update
-                    </Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
+        <UpdateMaxFileSize />
 
         <Form on:submit={updateAllowedExtensions}>
             <CardGrid>

src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { sizeToBytes, type Size } from '$lib/helpers/sizeConvertion';
+    import { writable } from 'svelte/store';
+    import { bucket } from '../store';
+    import { updateBucket } from './+page.svelte';
+
+    const options: Array<{ label: string; value: Size }> = [
+        { label: 'Bytes', value: 'Bytes' },
+        { label: 'Kilobytes', value: 'KB' },
+        { label: 'Megabytes', value: 'MB' },
+        { label: 'Gigabytes', value: 'GB' }
+    ];
+
+    let byteUnit = writable<Size>('MB');
+
+    function getInitialMaxSize() {
+        const size = $bucket.maximumFileSize;
+
+        // GB
+        if (size > 1024 ** 3 && size % 1024 ** 3 === 0) {
+            byteUnit.set('GB');
+            return size / 1024 ** 3;
+        }
+
+        // MB
+        if (size > 1024 ** 2 && size % 1024 ** 2 === 0) {
+            byteUnit.set('MB');
+            return size / 1024 ** 2;
+        }
+
+        // KB
+        if (size > 1024 && size % 1024 === 0) {
+            byteUnit.set('KB');
+            return size / 1024;
+        }
+
+        // Bytes
+        byteUnit.set('Bytes');
+        return size;
+    }
+
+    let maxSize: number = getInitialMaxSize();
+    let sizeInBytes: number = maxSize ? sizeToBytes(maxSize, $byteUnit) : null;
+
+    function updateMaxSize() {
+        const size = sizeToBytes(maxSize, $byteUnit);
+        console.log(size, maxSize, $byteUnit);
+        updateBucket(
+            {
+                maximumFileSize: size
+            },
+            {
+                trackEventName: 'submit_bucket_update_size',
+                arePermsDisabled: false
+            }
+        );
+    }
+
+    byteUnit.subscribe((b) => {
+        if (b === 'Bytes') {
+            maxSize = sizeInBytes;
+        } else if (b === 'KB') {
+            maxSize = sizeInBytes / 1024;
+        } else if (b === 'MB') {
+            maxSize = sizeInBytes / 1024 / 1024;
+        } else if (b === 'GB') {
+            maxSize = sizeInBytes / 1024 / 1024 / 1024;
+        }
+    });
+
+    $: if (maxSize) {
+        sizeInBytes = sizeToBytes(maxSize, $byteUnit);
+    }
+</script>
+
+<Form on:submit={updateMaxSize}>
+    <CardGrid>
+        <Heading tag="h2" size="6">Update Maximum File Size</Heading>
+        <p class="text">Set the maximum file size allowed in the bucket.</p>
+        <svelte:fragment slot="aside">
+            <ul class="u-flex u-gap-12">
+                <InputNumber
+                    id="size"
+                    label="Size"
+                    placeholder={$bucket.maximumFileSize.toString()}
+                    bind:value={maxSize} />
+                <InputSelect id="bytes" label="Bytes" {options} bind:value={$byteUnit} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={sizeInBytes === $bucket.maximumFileSize} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>