fix: more explicit projectId handling

appwrite · Dec 12, 2024 · a1cabc8 · a1cabc8
1 parent e887b36
commit a1cabc8
Show file tree

Hide file tree

Showing 48 changed files with 149 additions and 144 deletions.
diff --git a/src/lib/components/avatarInitials.svelte b/src/lib/components/avatarInitials.svelte
@@ -7,7 +7,7 @@
     export let background: string | undefined = undefined;
     export let color = 'black';
 
-    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
+    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background);
 </script>
 
 <Avatar {name} {size} {src} {color} />
diff --git a/src/lib/components/cardContainer.svelte b/src/lib/components/cardContainer.svelte
@@ -16,7 +16,7 @@
 
     $: planLimit = getServiceLimit(serviceId) || Infinity;
 
-    $: limit = preferences.get($page.route)?.limit ?? CARD_LIMIT;
+    $: limit = preferences.get($page.params.project, $page.route)?.limit ?? CARD_LIMIT;
 </script>
 
 <ul

diff --git a/src/lib/components/creditCardBrandImage.svelte b/src/lib/components/creditCardBrandImage.svelte
@@ -9,7 +9,7 @@
 
     function getCreditCardImage(brand: string, width = 46, height = 32) {
         if (!isValueOfStringEnum(CreditCard, brand)) return '';
-        return sdk.forConsole.avatars.getCreditCard(brand, width, height).toString();
+        return sdk.forConsole.avatars.getCreditCard(brand, width, height);
     }
 </script>
 

diff --git a/src/lib/components/limit.svelte b/src/lib/components/limit.svelte
@@ -20,7 +20,7 @@
         const url = new URL($pageStore.url);
         const previousLimit = Number(url.searchParams.get('limit'));
         url.searchParams.set('limit', limit.toString());
-        preferences.setLimit(limit);
+        preferences.setLimit($pageStore.params.project, $pageStore.route, limit);
 
         if (url.searchParams.has('page')) {
             const page = Number(url.searchParams.get('page'));

diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
@@ -23,15 +23,18 @@
 
     onMount(async () => {
         if (isCustomCollection) {
-            const prefs = preferences.getCustomCollectionColumns($page.params.collection);
+            const prefs = preferences.getCustomCollectionColumns(
+                $page.params.project,
+                $page.params.collection
+            );
             columns.set(
                 $columns.map((column) => {
                     column.show = prefs?.includes(column.id) ?? true;
                     return column;
                 })
             );
         } else {
-            const prefs = preferences.get($page.route);
+            const prefs = preferences.get($page.params.project, $page.route);
 
             // Override the shown columns only if a preference was set
             if (prefs?.columns) {
@@ -48,9 +51,9 @@
             const columns = ctx.filter((n) => n.show).map((n) => n.id);
 
             if (isCustomCollection) {
-                preferences.setCustomCollectionColumns(columns);
+                preferences.setCustomCollectionColumns($page.params.project, $page.route, columns);
             } else {
-                preferences.setColumns(columns);
+                preferences.setColumns($page.params.project, $page.route, columns);
             }
         });
     });
@@ -62,7 +65,7 @@
     }
 
     function updateViewPreferences(view: View) {
-        preferences.setView(view);
+        preferences.setView($page.params.project, $page.route, view);
     }
 
     $: selectedColumnsNumber = $columns.reduce((acc, column) => {

diff --git a/src/lib/elements/flag.svelte b/src/lib/elements/flag.svelte
@@ -14,14 +14,10 @@
 
     export function getFlag(country: string, width: number, height: number, quality: number) {
         if (!isValueOfStringEnum(Flag, country)) return '';
-        let flag = sdk
-            .forProject($page.params.region, $page.params.project)
-            .avatars.getFlag(country, width * 2, height * 2, quality)
-            ?.toString();
-        flag?.includes('&project=')
-            ? (flag = flag.replace('&project=', '&mode=admin'))
-            : flag + '&mode=admin';
-        return flag;
+
+        return sdk
+            .forProject($page.params.region, 'console')
+            .avatars.getFlag(country, width * 2, height * 2, quality);
     }
 </script>
 

diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
@@ -9,23 +9,30 @@ export function getPage(url: URL): number {
     return Number(url.searchParams.get('page'));
 }
 
-export function getLimit(url: URL, route: Page['route'], fallback: number): number {
-    return Number(url.searchParams.get('limit') ?? preferences.get(route).limit ?? fallback);
+export function getLimit(
+    projectId: string,
+    url: URL,
+    route: Page['route'],
+    fallback: number
+): number {
+    return Number(
+        url.searchParams.get('limit') ?? preferences.get(projectId, route).limit ?? fallback
+    );
 }
 
 export enum View {
     Table = 'table',
     Grid = 'grid'
 }
 
-export function getView(url: URL, route: Page['route'], fallback: View): View {
-    return (url.searchParams.get('view') ?? preferences.get(route).view) === View.Grid
+export function getView(projectId: string, url: URL, route: Page['route'], fallback: View): View {
+    return (url.searchParams.get('view') ?? preferences.get(projectId, route).view) === View.Grid
         ? View.Grid
         : (View.Table ?? fallback);
 }
 
-export function getColumns(route: Page['route'], fallback: string[]): string[] {
-    return preferences.get(route).columns ?? fallback;
+export function getColumns(projectId: string, route: Page['route'], fallback: string[]): string[] {
+    return preferences.get(projectId, route).columns ?? fallback;
 }
 
 export function getSearch(url: URL): string | undefined {

diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
@@ -1,5 +1,4 @@
 import { browser } from '$app/environment';
-import { page } from '$app/stores';
 import type { View } from '$lib/helpers/load';
 import type { Page } from '@sveltejs/kit';
 import { get, writable } from 'svelte/store';
@@ -48,81 +47,62 @@ function createPreferences() {
         subscribe,
         set,
         update,
-        get: (route?: Page['route']): Preferences => {
-            const $page = get(page);
-            const projectId = $page.params.project;
-            const routeId = route?.id ?? $page.route.id;
-
-            return (
-                preferences[projectId]?.[routeId] ?? {
-                    limit: null,
-                    view: null,
-                    columns: null
-                }
-            );
-        },
-
-        getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => {
-            const $page = get(page);
-            const projectId = $page.params.project;
-
-            return preferences[projectId]?.collections?.[collectionId] ?? null;
-        },
-        setLimit: (limit: Preferences['limit']) =>
+        get: (projectId: string, route: Page['route']): Preferences =>
+            preferences[projectId]?.[route.id] ?? {
+                limit: null,
+                view: null,
+                columns: null
+            },
+
+        getCustomCollectionColumns: (
+            projectId: string,
+            collectionId: string
+        ): Preferences['columns'] => preferences[projectId]?.collections?.[collectionId] ?? null,
+        setLimit: (projectId: string, route: Page['route'], limit: Preferences['limit']) =>
             update((n) => {
-                const $page = get(page);
-                const path = $page.route.id;
-                const project = $page.params.project;
-
-                if (!n[project]?.[path]) {
-                    n[project] ??= {};
-                    n[project][path] ??= {};
+                if (!n[projectId]?.[route.id]) {
+                    n[projectId] ??= {};
+                    n[projectId][route.id] ??= {};
                 }
 
-                n[project][path].limit = limit;
+                n[projectId][route.id].limit = limit;
 
                 return n;
             }),
-        setView: (view: Preferences['view']) =>
+        setView: (projectId: string, route: Page['route'], view: Preferences['view']) =>
             update((n) => {
-                const $page = get(page);
-                const path = $page.route.id;
-                const project = $page.params.project;
-                if (!n[project]?.[path]) {
-                    n[project] ??= {};
-                    n[project][path] ??= {};
+                if (!n[projectId]?.[route.id]) {
+                    n[projectId] ??= {};
+                    n[projectId][route.id] ??= {};
                 }
 
-                n[project][path].view = view;
+                n[projectId][route.id].view = view;
 
                 return n;
             }),
-        setColumns: (columns: Preferences['columns']) =>
+        setColumns: (projectId: string, route: Page['route'], columns: Preferences['columns']) =>
             update((n) => {
-                const $page = get(page);
-                const path = $page.route.id;
-                const project = $page.params.project;
-                if (!n[project]?.[path]) {
-                    n[project] ??= {};
-                    n[project][path] ??= {};
+                if (!n[projectId]?.[route.id]) {
+                    n[projectId] ??= {};
+                    n[projectId][route.id] ??= {};
                 }
 
-                n[project][path].columns = columns;
+                n[projectId][route.id].columns = columns;
 
                 return n;
             }),
-        setCustomCollectionColumns: (columns: Preferences['columns']) =>
+        setCustomCollectionColumns: (
+            projectId: string,
+            route: Page['route'],
+            columns: Preferences['columns']
+        ) =>
             update((n) => {
-                const $page = get(page);
-                const project = $page.params.project;
-                const collection = $page.params.collection;
-
-                if (!n[project]?.collections?.[collection]) {
-                    n[project] ??= {};
-                    n[project].collections ??= {};
+                if (!n[projectId]?.collections?.[route.id]) {
+                    n[projectId] ??= {};
+                    n[projectId].collections ??= {};
                 }
 
-                n[project].collections[collection] = columns;
+                n[projectId].collections[route.id] = columns;
 
                 return n;
             }),

diff --git a/src/lib/stores/uploader.ts b/src/lib/stores/uploader.ts
@@ -1,6 +1,5 @@
 import { Client, type Models, Storage } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
-import { getProjectId } from '$lib/helpers/project';
 import { getApiEndpoint } from '$lib/stores/sdk';
 
 type UploaderFile = {
@@ -18,11 +17,10 @@ export type Uploader = {
     files: UploaderFile[];
 };
 
-const temporaryStorage = () => {
-    const clientProject = new Client()
-        .setEndpoint(getApiEndpoint())
-        .setMode('admin')
-        .setProject(getProjectId());
+const temporaryStorage = (region: string, projectId: string) => {
+    const clientProject = new Client().setMode('admin');
+    const endpoint = getApiEndpoint(region);
+    clientProject.setEndpoint(endpoint).setProject(projectId);
 
     return new Storage(clientProject);
 };
@@ -66,7 +64,14 @@ const createUploader = () => {
                 isCollapsed: false,
                 files: []
             }),
-        uploadFile: async (bucketId: string, id: string, file: File, permissions: string[]) => {
+        uploadFile: async (
+            region: string,
+            projectId: string,
+            bucketId: string,
+            id: string,
+            file: File,
+            permissions: string[]
+        ) => {
             const newFile: UploaderFile = {
                 $id: id,
                 bucketId: bucketId,
@@ -81,7 +86,7 @@ const createUploader = () => {
                 n.files.unshift(newFile);
                 return n;
             });
-            const uploadedFile = await temporaryStorage().createFile(
+            const uploadedFile = await temporaryStorage(region, projectId).createFile(
                 bucketId,
                 id ?? 'unique()',
                 file,

diff --git a/src/routes/(console)/(migration-wizard)/index.ts b/src/routes/(console)/(migration-wizard)/index.ts
@@ -3,7 +3,6 @@ import { wizard } from '$lib/stores/wizard';
 import { requestedMigration } from '$routes/store';
 import { get, writable } from 'svelte/store';
 import Wizard from './wizard.svelte';
-import type { Models } from '@appwrite.io/console';
 
 export const formData = createMigrationFormStore();
 

diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
@@ -272,9 +272,9 @@
     }
 
     database.subscribe(async (database) => {
-        if (!database) return;
+        if (!database || !$page.params.region || !$page.params.project) return;
         // the component checks `isCloud` internally.
-        await checkForDatabaseBackupPolicies(database);
+        await checkForDatabaseBackupPolicies($page.params.region, $page.params.project, database);
     });
 
     let currentOrganizationId = null;

diff --git a/src/routes/(console)/account/activity/+page.ts b/src/routes/(console)/account/activity/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(url, route, PAGE_LIMIT);
+    const limit = getLimit('console', url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {

diff --git a/src/routes/(console)/account/organizations/+page.ts b/src/routes/(console)/account/organizations/+page.ts
@@ -6,7 +6,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);
-    const limit = getLimit(url, route, CARD_LIMIT);
+    const limit = getLimit('console', url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {

diff --git a/src/routes/(console)/account/sessions/+page.svelte b/src/routes/(console)/account/sessions/+page.svelte
@@ -29,9 +29,8 @@
     function getBrowser(clientCode: string) {
         const code = clientCode.toLowerCase();
         if (!isValueOfStringEnum(Browser, code)) return '';
-        return sdk
-            .forProject($page.params.region, $page.params.project)
-            .avatars.getBrowser(code, 40, 40);
+
+        return sdk.forConsole.avatars.getBrowser(code, 40, 40);
     }
 
     function logoutSessionId(sessionId: string) {

diff --git a/src/routes/(console)/organization-[organization]/+page.ts b/src/routes/(console)/organization-[organization]/+page.ts
@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
     const { scopes } = await parent();
     depends(Dependencies.ORGANIZATION);
     const page = getPage(url);
-    const limit = getLimit(url, route, CARD_LIMIT);
+    const limit = getLimit('console', url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
     if (!scopes.includes('projects.read') && scopes.includes('billing.read')) {
         return redirect(301, `/console/organization-${params.organization}/billing`);

diff --git a/src/routes/(console)/organization-[organization]/members/+page.ts b/src/routes/(console)/organization-[organization]/members/+page.ts
@@ -8,7 +8,7 @@ export const load: PageLoad = async ({ url, params, route, depends }) => {
     depends(Dependencies.ORGANIZATION);
     depends(Dependencies.MEMBERS);
     const page = getPage(url);
-    const limit = getLimit(url, route, PAGE_LIMIT);
+    const limit = getLimit('console', url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {

diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -71,8 +71,8 @@
                             <TableCell title="Usage">{format(project.usage)}</TableCell>
                         </TableRow>
                     {:else}
-                        <TableRowLink
-                            href={getProjectUsageLink(project.region ?? 'fra1', project.projectId)}>
+                        <!-- TODO: hardcoded region -->
+                        <TableRowLink href={getProjectUsageLink('fra1', project.projectId)}>
                             <TableCell title="Project">
                                 {data.projectNames[project.projectId]?.name ?? 'Unknown'}
                             </TableCell>

diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.ts b/src/routes/(console)/project-[region]-[project]/auth/+page.ts
@@ -8,7 +8,7 @@ import { showCreateUser } from './+page.svelte';
 export const load: PageLoad = async ({ url, route, params }) => {
     const page = getPage(url);
     const search = getSearch(url);
-    const limit = getLimit(url, route, PAGE_LIMIT);
+    const limit = getLimit(params.project, url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     if (typeof url.searchParams.get('create') === 'string') {