reduce: calls to countries, locale api.

src/routes/(console)/account/payments/+page.svelte

@@ -6,6 +6,9 @@
     import { page } from '$app/state';
     import { confirmPayment } from '$lib/stores/stripe';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
     let showPayment = false;
 
@@ -21,5 +24,5 @@
 <Container>
     <Typography.Title size="s">Payment details</Typography.Title>
     <PaymentMethods bind:showPayment />
-    <BillingAddress />
+    <BillingAddress countryList={data.countryList} locale={data.locale} />
 </Container>

src/routes/(console)/account/payments/+page.ts

@@ -6,12 +6,17 @@ export const load: PageLoad = async ({ depends }) => {
     depends(Dependencies.PAYMENT_METHODS);
     depends(Dependencies.ADDRESS);
 
-    const [paymentMethods, addressList] = await Promise.all([
+    const [paymentMethods, addressList, countryList, locale] = await Promise.all([
         sdk.forConsole.billing.listPaymentMethods(),
-        sdk.forConsole.billing.listAddresses()
+        sdk.forConsole.billing.listAddresses(),
+        sdk.forConsole.locale.listCountries(),
+        sdk.forConsole.locale.get()
     ]);
+
     return {
         paymentMethods,
-        addressList
+        addressList,
+        countryList,
+        locale
     };
 };

src/routes/(console)/account/payments/addressModal.svelte

@@ -8,9 +8,12 @@
     import type { Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import type { Models } from '@appwrite.io/console';
 
     export let show = false;
+    export let locale: Models.Locale;
     export let organization: string = null;
+    export let countryList: Models.CountryList;
 
     let country: string;
     let address: string;
@@ -27,8 +30,6 @@
     let error: string = null;
 
     onMount(async () => {
-        const countryList = await sdk.forConsole.locale.listCountries();
-        const locale = await sdk.forConsole.locale.get();
         if (locale.countryCode) {
             country = locale.countryCode;
         }

src/routes/(console)/account/payments/billingAddress.svelte

@@ -2,8 +2,6 @@
     import { CardGrid, Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addressList } from '$lib/stores/billing';
-    import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
     import AddressModal from './addressModal.svelte';
     import type { Models } from '@appwrite.io/console';
     import DeleteAddress from './deleteAddressModal.svelte';
@@ -29,16 +27,14 @@
         Typography
     } from '@appwrite.io/pink-svelte';
 
+    export let locale: Models.Locale;
+    export let countryList: Models.CountryList;
+
     let show = false;
     let showEdit = false;
     let selectedAddress: Address;
     let selectedLinkedOrgs: Organization[] = [];
     let showDelete = false;
-    let countryList: Models.CountryList;
-
-    onMount(async () => {
-        countryList = await sdk.forConsole.locale.listCountries();
-    });
 
     $: orgList = $organizationList.teams as unknown as Organization[];
 </script>
@@ -144,6 +140,6 @@
     </svelte:fragment>
 </CardGrid>
 
-<AddressModal bind:show />
-<EditAddressModal bind:show={showEdit} {selectedAddress} />
+<AddressModal {locale} {countryList} bind:show />
+<EditAddressModal bind:show={showEdit} {selectedAddress} {locale} {countryList} />
 <DeleteAddress bind:showDelete {selectedAddress} linkedOrgs={selectedLinkedOrgs} />

src/routes/(console)/account/payments/editAddressModal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { page } from '$app/state';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
@@ -9,9 +8,12 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import type { Models } from '@appwrite.io/console';
 
     export let show = false;
     export let selectedAddress: Address;
+    export let locale: Models.Locale;
+    export let countryList: Models.CountryList;
 
     let error: string = null;
     let options = [
@@ -22,7 +24,6 @@
     ];
 
     onMount(async () => {
-        const countryList = await sdk.forConsole.locale.listCountries();
         options = countryList.countries.map((country) => {
             return {
                 value: country.code,
@@ -63,13 +64,15 @@
      * which really shouldn't happen, but here we are, playing it safe!
      */
     $: if (show && !selectedAddress.country) {
-        sdk.forProject(page.params.region, page.params.project)
-            .locale.get()
-            .then((locale) => {
+        if (locale) {
+            selectedAddress.country = locale.countryCode;
+        } else {
+            sdk.forConsole.locale.get().then((locale) => {
                 if (locale.countryCode) {
                     selectedAddress.country = locale.countryCode;
                 }
             });
+        }
     }
 </script>