Merge pull request #1911 from appwrite/fix-projects-data-loading

Refactor project type handling in sidebar and shell

src/lib/components/sidebar.svelte

@@ -39,11 +39,11 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
 
     import type { HTMLAttributes } from 'svelte/elements';
-    import type { NavbarProject } from '$lib/components/navbar.svelte';
+    import type { Models } from '@appwrite.io/console';
 
     type $$Props = HTMLAttributes<HTMLElement> & {
         state?: 'closed' | 'open' | 'icons';
-        project: NavbarProject | undefined;
+        project: Models.Project | undefined;
         avatar: string;
         progressCard?: {
             title: string;
@@ -84,7 +84,7 @@
 </script>
 
 <div
-    class:only-mobile-tablet={project === undefined}
+    class:only-mobile-tablet={!project}
     style:--overlay-on-neutral={$app.themeInUse === 'dark'
         ? 'var(--neutral-750)'
         : 'var(--neutral-100)'}>

src/lib/layout/shell.svelte

@@ -11,21 +11,20 @@
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { tierToPlan } from '$lib/stores/billing';
-    import { type Models } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import SideNavigation from '$lib/layout/navigation.svelte';
     import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
     import { isSidebarOpen } from '$lib/stores/sidebar';
     import { BillingPlan } from '$lib/constants';
     import { page } from '$app/stores';
+    import type { Models } from '@appwrite.io/console';
 
     export let showSideNavigation = false;
     export let showHeader = true;
     export let showFooter = true;
     export let loadedProjects: Array<NavbarProject> = [];
-    export let projects: Array<Models.Project> = [];
+    export let selectedProject: Models.Project | null = null;
 
-    $: selectedProject = loadedProjects.find((project) => project.isSelected);
     let yOnMenuOpen: number;
     let showContentTransition = false;
     let timeoutId: ReturnType<typeof setTimeout>;
@@ -120,11 +119,9 @@
 
     const progressCard = function getProgressCard() {
         if (selectedProject && !hasOnboardingDismissed(selectedProject.$id)) {
-            const currentProject = projects.find((project) => project.$id === selectedProject.$id);
-
             return {
                 title: 'Get started',
-                percentage: currentProject && currentProject.platforms.length ? 100 : 33
+                percentage: selectedProject && selectedProject.platforms.length ? 100 : 33
             };
         }
 

src/routes/(console)/+layout.svelte

@@ -52,6 +52,7 @@
         IconSparkles,
         IconSwitchHorizontal
     } from '@appwrite.io/pink-icons-svelte';
+    import type { LayoutData } from './$types';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -62,7 +63,8 @@
 
     const isAssistantEnabled = $consoleVariables?._APP_ASSISTANT_ENABLED === true;
 
-    export let data;
+    export let data: LayoutData;
+
     $: loadedProjects = data.projects.map((project) => {
         return {
             name: project?.name,
@@ -340,8 +342,8 @@
         !page.url.pathname.includes('/console/onboarding')}
     showHeader={!page.url.pathname.includes('/console/onboarding')}
     showFooter={!page.url.pathname.includes('/console/onboarding')}
-    bind:loadedProjects
-    bind:projects={data.projects}>
+    {loadedProjects}
+    selectedProject={page.data?.project}>
     <!--    <Header slot="header" />-->
     <slot />
     <Footer slot="footer" />

src/routes/(console)/+layout.ts

@@ -4,7 +4,7 @@ import type { Tier } from '$lib/stores/billing';
 import { sdk } from '$lib/stores/sdk';
 import { isCloud } from '$lib/system';
 import type { LayoutLoad } from './$types';
-import { Query } from '@appwrite.io/console';
+import { Query, type Models } from '@appwrite.io/console';
 
 export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
     await parent();
@@ -38,7 +38,7 @@ export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
         ? await sdk.forConsole.teams.list()
         : await sdk.forConsole.billing.listOrganization();
 
-    let projects = [];
+    let projects: Models.Project[] = [];
     let currentOrgId = params.organization ? params.organization : prefs.organization;
 
     if (!currentOrgId && organizations.teams.length > 0) {
@@ -47,7 +47,7 @@ export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
     if (currentOrgId) {
         const orgProjects = await sdk.forConsole.projects.list([
             Query.equal('teamId', currentOrgId),
-            Query.limit(100),
+            Query.limit(5),
             Query.orderDesc('$updatedAt')
         ]);
         projects = orgProjects.projects.length > 0 ? orgProjects.projects : [];