address comment: abstract region filtering for selection options.

src/lib/helpers/regions.ts

@@ -0,0 +1,27 @@
+import { getFlagUrl } from '$lib/helpers/flag';
+import type { Models } from '@appwrite.io/console';
+
+type RegionOption = {
+    label: string;
+    value: string;
+    disabled: boolean;
+    leadingHtml: string;
+};
+
+export function filterRegions(regions: Models.ConsoleRegion[]): RegionOption[] {
+    if (!regions.length) return [];
+
+    return regions
+        .filter((region) => region.$id !== 'default')
+        .sort((a, b) => {
+            if (a.disabled && !b.disabled) return 1;
+            if (!a.disabled && b.disabled) return -1;
+            return a.name.localeCompare(b.name);
+        })
+        .map((region) => ({
+            label: region.name,
+            value: region.$id,
+            disabled: region.disabled || !region.available,
+            leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`
+        }));
+}

src/lib/layout/createProject.svelte

@@ -5,6 +5,7 @@
     import { getFlagUrl } from '$lib/helpers/flag';
     import { isCloud } from '$lib/system.js';
     import type { Models } from '@appwrite.io/console';
+    import { filterRegions } from '$lib/helpers/regions';
 
     export let projectName: string;
     export let id: string;
@@ -13,25 +14,6 @@
     export let showTitle = true;
 
     let showCustomId = false;
-
-    function getRegions() {
-        return regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled || !region.available
-                };
-            });
-    }
 </script>
 
 <svelte:head>
@@ -69,7 +51,7 @@
                         <Input.Select
                             bind:value={region}
                             placeholder="Select a region"
-                            options={getRegions()}
+                            options={filterRegions(regions)}
                             label="Region" />
                         <Typography.Text>Region cannot be changed after creation</Typography.Text>
                     </Layout.Stack>

src/routes/(console)/(migration-wizard)/wizard.svelte

@@ -21,9 +21,8 @@
     } from '@appwrite.io/pink-svelte';
     import { isCloud } from '$lib/system';
     import { regions } from '$lib/stores/organization';
-    import { getFlagUrl } from '$lib/helpers/flag';
     import { addNotification } from '$lib/stores/notifications';
-    import { goto, invalidate, invalidateAll } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { migrationFormToResources } from '$lib/stores/migration';
     import { EyebrowHeading } from '$lib/components';
@@ -32,10 +31,10 @@
         IconCog,
         IconCurrencyDollar,
         IconExclamation,
-        IconGithub,
         IconTrendingUp
     } from '@appwrite.io/pink-icons-svelte';
     import { Dependencies } from '$lib/constants';
+    import { filterRegions } from '$lib/helpers/regions';
 
     const onExit = () => {
         formData.reset();
@@ -79,11 +78,7 @@
     }
 
     function getProjectName(): string {
-        return isExisting ? getSelectedProject().name : newProjName || 'Appwrite project';
-    }
-
-    function getSelectedProject() {
-        return projects.find((project) => project.$id === $selectedProject);
+        return isExisting ? currentSelectedProject.name : newProjName || 'Appwrite project';
     }
 
     async function createNewProject() {
@@ -108,25 +103,6 @@
         }
     }
 
-    function getRegions() {
-        return $regions.regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled || !region.available
-                };
-            });
-    }
-
     const onFinish = async () => {
         if ($provider.provider !== 'appwrite') return;
 
@@ -141,16 +117,15 @@
                 $provider.apiKey
             );
 
-            const project = getSelectedProject();
-
             addNotification({
                 type: 'success',
                 message: 'Migration started'
             });
-
             onExit();
             await invalidate(Dependencies.PROJECTS);
-            await goto(`${base}/project-${project.region}-${project.$id}/settings/migrations`);
+            await goto(
+                `${base}/project-${currentSelectedProject.region}-${currentSelectedProject.$id}/settings/migrations`
+            );
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -163,11 +138,15 @@
 
     $: getProjects(selectedOrg);
 
+    $: currentSelectedProject = projects.find((project) => project.$id === $selectedProject);
+
     $: isExisting = projectType === 'existing';
 
     $: if (isExisting && $selectedProject) {
-        const project = getSelectedProject();
-        projectSdkInstance = sdk.forProject(project.region, project.$id);
+        projectSdkInstance = sdk.forProject(
+            currentSelectedProject.region,
+            currentSelectedProject.$id
+        );
     }
 
     $: disableNextButton = isExisting
@@ -258,7 +237,7 @@
                                         <Input.Select
                                             required
                                             label="Region"
-                                            options={getRegions()}
+                                            options={filterRegions($regions.regions)}
                                             bind:value={$selectedRegion}
                                             placeholder="Select a region" />
                                         <Typography.Text

src/routes/(public)/template-[template]/+page.svelte

@@ -4,7 +4,6 @@
     import CustomId from '$lib/components/customId.svelte';
     import { SvgIcon } from '$lib/components/index.js';
     import { Button, Form, InputSelect } from '$lib/elements/forms';
-    import { getFlagUrl } from '$lib/helpers/flag.js';
     import type { AllowedRegions } from '$lib/sdk/billing.js';
     import { app } from '$lib/stores/app';
     import { addNotification } from '$lib/stores/notifications';
@@ -23,6 +22,7 @@
         Tag,
         Typography
     } from '@appwrite.io/pink-svelte';
+    import { filterRegions } from '$lib/helpers/regions';
 
     let { data } = $props();
 
@@ -37,25 +37,6 @@
     let regions = $state<Array<Models.ConsoleRegion>>([]);
     let id = $state<string>();
 
-    function getRegions() {
-        return regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled
-                };
-            });
-    }
-
     function isSiteTemplate(
         template: Models.TemplateFunction | Models.TemplateSite,
         product: 'site' | 'function'
@@ -243,7 +224,7 @@
                                             required
                                             bind:value={region}
                                             placeholder="Select a region"
-                                            options={getRegions()}
+                                            options={filterRegions(regions)}
                                             label="Region" />
                                         <Typography.Text>
                                             Region cannot be changed after creation