From 49ff69cdcfe9c1d608264a444a5f4f8d1fc15949 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Oct 2022 17:15:02 +0200
Subject: [PATCH] feat: replace hard coded limits with store limit

---
 src/lib/stores/layout.ts                             |  1 +
 .../console/account/organizations/+page.svelte       | 10 +++++-----
 .../organization-[organization]/+layout.svelte       |  4 ++--
 .../console/organization-[organization]/+page.svelte | 12 ++++++------
 .../authentication/teams/+page.svelte                |  8 ++++----
 .../user/[user]/memberships/+page.svelte             |  5 ++---
 .../console/project-[project]/databases/+page.svelte |  8 ++++----
 .../databases/database/[database]/+page.svelte       | 10 +++++-----
 .../[database]/collection/[collection]/+page.svelte  |  4 ++--
 .../collection/[collection]/indexes/+page.svelte     |  7 +++----
 10 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 04c054867..87cb2c946 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -75,3 +75,4 @@ export function updateLayout(args: updateLayoutArguments) {
 }
 
 export const pageLimit = readable(12); // default page limit
+export const cardLimit = readable(6); // default page limit
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 998111b0f..1c1d09aef 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -7,6 +7,7 @@
     import { organizationList } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { cardLimit } from '$lib/stores/layout';
 
     onMount(async () => {
         await organizationList.load();
@@ -28,7 +29,6 @@
 
     let addOrganization = false;
     let offset = 0;
-    const limit = 6;
 </script>
 
 <Container>
@@ -52,7 +52,7 @@
             };`}>
             {#each $organizationList.teams as organization, index}
                 {@const avatarList = getMemberships(organization.$id)}
-                {#if index >= offset && index < limit + offset}
+                {#if index >= offset && index < $cardLimit + offset}
                     <GridItem1 href={`${base}/console/organization-${organization.$id}`}>
                         <svelte:fragment slot="eyebrow"
                             >{organization?.total ? organization?.total : 'No'} projects</svelte:fragment>
@@ -67,7 +67,7 @@
                     </GridItem1>
                 {/if}
             {/each}
-            {#if $organizationList?.total < limit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
+            {#if $organizationList?.total < $cardLimit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
                 <Empty isButton on:click={() => (addOrganization = true)}>
                     <p>Create a new organization</p>
                 </Empty>
@@ -76,7 +76,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$organizationList?.total}</p>
-            <Pagination {limit} bind:offset sum={$organizationList?.total} />
+            <Pagination limit={$cardLimit} bind:offset sum={$organizationList?.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (addOrganization = true)}>
@@ -84,7 +84,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$organizationList?.total}</p>
-            <Pagination {limit} bind:offset sum={$organizationList?.total} />
+            <Pagination limit={$cardLimit} bind:offset sum={$organizationList?.total} />
         </div>
     {/if}
 </Container>
diff --git a/src/routes/console/organization-[organization]/+layout.svelte b/src/routes/console/organization-[organization]/+layout.svelte
index dbc5bb5c6..39b8a02c0 100644
--- a/src/routes/console/organization-[organization]/+layout.svelte
+++ b/src/routes/console/organization-[organization]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { updateLayout } from '$lib/stores/layout';
+    import { pageLimit, updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import {
@@ -24,7 +24,7 @@
         if ($organization?.$id !== organizationId) {
             await organization.load(organizationId);
         }
-        await memberList.load(organizationId, [Query.limit(12)]);
+        await memberList.load(organizationId, [Query.limit($pageLimit)]);
         updateLayout({
             navigate: event,
             title: $organization?.name,
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 45d858f95..3e7050bab 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -12,6 +12,7 @@
     import { page } from '$app/stores';
     import CreateOrganization from '../_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
+    import { cardLimit } from '$lib/stores/layout';
 
     let projects: Models.Project[] = [];
     $: organizationId = $page.params.organization;
@@ -22,7 +23,7 @@
     async function handle() {
         await projectList.load([
             Query.offset(offset),
-            Query.limit(limit),
+            Query.limit($cardLimit),
             Query.equal('teamId', organizationId)
         ]);
     }
@@ -30,7 +31,6 @@
     let showCreate = false;
     let addOrganization = false;
     let offset = 0;
-    const limit = 6;
 
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
         await project.load(event.detail.$id);
@@ -84,7 +84,7 @@
                 projects.length > 3 ? '22rem' : '25rem'
             };`}>
             {#each $projectList.projects as project, index}
-                {#if index >= offset && index < limit + offset}
+                {#if index >= offset && index < $cardLimit + offset}
                     <GridItem1 href={`${base}/console/project-${project.$id}`}>
                         <svelte:fragment slot="eyebrow">
                             {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
@@ -112,7 +112,7 @@
                     </GridItem1>
                 {/if}
             {/each}
-            {#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
+            {#if projects.length < $cardLimit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
                 <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Create a new project</p>
                 </Empty>
@@ -121,7 +121,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects.length}</p>
-            <Pagination {limit} bind:offset sum={projects.length} />
+            <Pagination limit={$cardLimit} bind:offset sum={projects.length} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
@@ -129,7 +129,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects?.length}</p>
-            <Pagination {limit} bind:offset sum={projects?.length} />
+            <Pagination limit={$cardLimit} bind:offset sum={projects?.length} />
         </div>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index ef22133bc..6d9f64663 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -20,12 +20,12 @@
     import { base } from '$app/paths';
     import { teamsList } from '../store';
     import { Query, type Models } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
     let search = '';
     let showCreate = false;
     let offset = 0;
 
-    const limit = 25;
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
@@ -34,7 +34,7 @@
 
     $: if (search) offset = 0;
     $: teamsList.load(
-        [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
         search
     );
 </script>
@@ -81,7 +81,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$teamsList.total}</p>
-            <Pagination {limit} bind:offset sum={$teamsList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
         </div>
     {:else if search}
         <Empty single>
@@ -97,7 +97,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$teamsList.total}</p>
-            <Pagination {limit} bind:offset sum={$teamsList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
index 52de8964c..0072d3e91 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
@@ -17,6 +17,7 @@
     import DeleteMembership from '../_deleteMembership.svelte';
     import DeleteAllMemberships from '../_deleteAllMemberships.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const deleted = () => (request = sdkForProject.users.listMemberships($page.params.user));
@@ -27,8 +28,6 @@
     let showDelete = false;
     let showDeleteAll = false;
 
-    const limit = 25;
-
     $: request = sdkForProject.users.listMemberships($page.params.user);
 </script>
 
@@ -97,7 +96,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index 98e51b371..940a2fcce 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -9,19 +9,19 @@
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { databaseList } from './store';
+    import { cardLimit } from '$lib/stores/layout';
 
     let showCreate = false;
     let search = '';
     let offset = 0;
 
-    const limit = 6;
     const project = $page.params.project;
     const handleCreate = async (event: CustomEvent<Models.Database>) => {
         showCreate = false;
         await goto(`${base}/console/project-${project}/databases/database/${event.detail.$id}`);
     };
 
-    $: databaseList.load([Query.limit(limit), Query.offset(offset)], search);
+    $: databaseList.load([Query.limit($cardLimit), Query.offset(offset)], search);
 </script>
 
 <Container>
@@ -48,7 +48,7 @@
                     </Copy>
                 </GridItem1>
             {/each}
-            {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
+            {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= $cardLimit}
                 <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Create a new database</p>
                 </Empty>
@@ -57,7 +57,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$databaseList.total}</p>
-            <Pagination {limit} bind:offset sum={$databaseList.total} />
+            <Pagination limit={$cardLimit} bind:offset sum={$databaseList.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index 7e10fbbb8..109598432 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -9,12 +9,12 @@
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { collections } from './store';
+    import { cardLimit } from '$lib/stores/layout';
 
     let showCreate = false;
     let search = '';
     let offset = 0;
 
-    const limit = 6;
     const project = $page.params.project;
     const databaseId = $page.params.database;
     const handleCreate = async (event: CustomEvent<Models.Collection>) => {
@@ -24,7 +24,7 @@
         );
     };
 
-    $: collections.load(databaseId, [Query.limit(limit), Query.offset(offset)], search);
+    $: collections.load(databaseId, [Query.limit($cardLimit), Query.offset(offset)], search);
     $: if (search) offset = 0;
 </script>
 
@@ -62,7 +62,7 @@
                     </Copy>
                 </GridItem1>
             {/each}
-            {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
+            {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= $cardLimit}
                 <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Create a new collection</p>
                 </Empty>
@@ -71,7 +71,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$collections.total}</p>
-            <Pagination {limit} bind:offset sum={$collections.total} />
+            <Pagination limit={$cardLimit} bind:offset sum={$collections.total} />
         </div>
     {:else if search}
         <Empty>
@@ -87,7 +87,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$collections?.total}</p>
-            <Pagination {limit} bind:offset sum={$collections?.total} />
+            <Pagination limit={$cardLimit} bind:offset sum={$collections?.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index df33d2a5e..1b5aab7c1 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -17,10 +17,10 @@
     import { wizard } from '$lib/stores/wizard';
     import Create from './createDocument.svelte';
     import { Query } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
 
-    const limit = 5;
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
 
@@ -79,7 +79,7 @@
 
         <div class="u-flex common-section u-main-space-between">
             <p class="text">Total results: {$documentList.total}</p>
-            <Pagination {limit} bind:offset sum={$documentList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$documentList.total} />
         </div>
     {:else}
         <Empty isButton single on:click={openWizard}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
index 33a3bf604..d538d15f2 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
@@ -19,6 +19,7 @@
     import Create from './createIndex.svelte';
     import Overview from './overviewIndex.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
     let showDropdown = [];
     let selectedIndex: Models.Index = null;
@@ -27,8 +28,6 @@
     let showDelete = false;
     let search = '';
     let offset: number = null;
-
-    const limit = 5;
     const collectionId = $page.params.collection;
     const databaseId = $page.params.database;
 
@@ -138,7 +137,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$indexList?.total}</p>
-            <Pagination {limit} bind:offset sum={$indexList?.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
         </div>
     {:else if search}
         <Empty>
@@ -154,7 +153,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$indexList?.total}</p>
-            <Pagination {limit} bind:offset sum={$indexList?.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
         </div>
     {:else if $collection.indexes?.length}
         <Empty isButton single on:click={() => (showCreateIndex = true)}>