From dc968d1a0088607e355d588248a2c31bf9f2c412 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 11:01:16 +0200
Subject: [PATCH] feat: create sibling route for organizations

---
 src/lib/components/dropListLink.svelte        |  2 +-
 src/lib/layout/header.svelte                  | 20 +++--
 src/lib/layout/shell.svelte                   | 13 ++-
 src/{routes/console => lib/stores}/store.ts   |  0
 .../console/{$me@intro.svelte => $me.svelte}  |  0
 src/routes/console/[project]/__layout.svelte  |  2 +-
 src/routes/console/__layout-intro.svelte      | 83 ------------------
 src/routes/console/__layout.svelte            | 48 +++++++++--
 src/routes/console/_createOrganization.svelte |  2 +-
 src/routes/console/index.svelte               |  1 +
 .../__layout.svelte                           | 64 ++++++++++++++
 .../_createMember.svelte                      |  0
 .../_createProject.svelte                     |  0
 .../_deleteMember.svelte                      |  0
 .../_deleteOrganization.svelte                |  0
 .../index.svelte}                             | 25 ++----
 .../members.svelte}                           |  0
 .../settings.svelte}                          |  0
 .../organization-[organization]/store.ts      | 84 +++++++++++++++++++
 19 files changed, 222 insertions(+), 122 deletions(-)
 rename src/{routes/console => lib/stores}/store.ts (100%)
 rename src/routes/console/{$me@intro.svelte => $me.svelte} (100%)
 delete mode 100644 src/routes/console/__layout-intro.svelte
 create mode 100644 src/routes/console/index.svelte
 create mode 100644 src/routes/console/organization-[organization]/__layout.svelte
 rename src/routes/console/{ => organization-[organization]}/_createMember.svelte (100%)
 rename src/routes/console/{ => organization-[organization]}/_createProject.svelte (100%)
 rename src/routes/console/{ => organization-[organization]}/_deleteMember.svelte (100%)
 rename src/routes/console/{ => organization-[organization]}/_deleteOrganization.svelte (100%)
 rename src/routes/console/{index@intro.svelte => organization-[organization]/index.svelte} (86%)
 rename src/routes/console/{members@intro.svelte => organization-[organization]/members.svelte} (100%)
 rename src/routes/console/{settings@intro.svelte => organization-[organization]/settings.svelte} (100%)
 create mode 100644 src/routes/console/organization-[organization]/store.ts

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 671809aa1..cfd60e79a 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -3,7 +3,7 @@
     export let icon: string = null;
 </script>
 
-<li class="drop-list-item">
+<li class="drop-list-item" on:click>
     <a {href} class="drop-button">
         <span class="text"><slot /></span>
         {#if icon}
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 499f45c30..87ff9867a 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { onMount } from 'svelte';
     import { Breadcrumbs } from '.';
     import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
@@ -9,9 +10,11 @@
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
-    import { organizationList, organization, newOrgModal } from '../../routes/console/store';
-    import { onMount } from 'svelte';
-    import { goto } from '$app/navigation';
+    import {
+        organizationList,
+        organization,
+        newOrgModal
+    } from '../../routes/console/organization-[organization]/store';
 
     let showDropdown = false;
 
@@ -23,7 +26,9 @@
     });
 </script>
 
-<a class="logo" href={`${base}/console`}>
+<a
+    class="logo"
+    href={$organization ? `${base}/console/organization-${$organization.$id}` : `${base}/console`}>
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
 
@@ -67,12 +72,11 @@
                 </button>
                 <svelte:fragment slot="list">
                     {#each $organizationList.teams as org}
-                        <DropListItem
+                        <DropListLink
+                            href={`${base}/console/organization-${org.$id}`}
                             on:click={() => {
                                 showDropdown = false;
-                                goto(`/console`);
-                                organization.set(org);
-                            }}>{org.name}</DropListItem>
+                            }}>{org.name}</DropListLink>
                     {/each}
                 </svelte:fragment>
                 <svelte:fragment slot="other">
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index d3c7ded97..4660021cf 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -2,7 +2,7 @@
     import { navigating, page } from '$app/stores';
     import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
     import { Cover } from '.';
-    import { Copy, DropList, DropListItem, AvatarGroup } from '$lib/components';
+    import { Copy, DropList, DropListItem, DropListLink, AvatarGroup } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
@@ -10,8 +10,9 @@
         memberList,
         newOrgModal,
         newMemberModal
-    } from '../../routes/console/store';
+    } from '../../routes/console/organization-[organization]/store';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { base } from '$app/paths';
 
     export let isOpen = false;
     export let showSideNavigation = false;
@@ -123,15 +124,13 @@
                         </button>
                         <svelte:fragment slot="list">
                             {#each $titleDropdown as org}
-                                <DropListItem
+                                <DropListLink
+                                    href={`${base}/console/organization-${org.$id}`}
                                     on:click={() => {
                                         showDropdown = false;
-                                        if (org.$id !== $organization.$id) {
-                                            organization.load(org.$id);
-                                        }
                                     }}>
                                     {org.name}
-                                </DropListItem>
+                                </DropListLink>
                             {/each}
                         </svelte:fragment>
                         <svelte:fragment slot="other">
diff --git a/src/routes/console/store.ts b/src/lib/stores/store.ts
similarity index 100%
rename from src/routes/console/store.ts
rename to src/lib/stores/store.ts
diff --git a/src/routes/console/$me@intro.svelte b/src/routes/console/$me.svelte
similarity index 100%
rename from src/routes/console/$me@intro.svelte
rename to src/routes/console/$me.svelte
diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index c6ba7b9ce..b9b5e8397 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -5,7 +5,7 @@
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
     import { project } from './store';
-    import { organization } from '../store';
+    import { organization } from '../organization-[organization]/store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
deleted file mode 100644
index 3f77101ba..000000000
--- a/src/routes/console/__layout-intro.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-    import Shell from '$lib/layout/shell.svelte';
-    import Header from '$lib/layout/header.svelte';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import {
-        organizationList,
-        organization,
-        memberList,
-        newOrgModal,
-        newMemberModal
-    } from './store';
-    import CreateMember from './_createMember.svelte';
-    import Create from './_createOrganization.svelte';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        await organizationList.load();
-        if ($organizationList?.total) {
-            if (!$organization) {
-                await organization.load($organizationList.teams[0].$id);
-                await memberList.load($organization.$id, '', 100, 0);
-            }
-            updateLayout({
-                navigate: event,
-                title: $organization?.name ?? `${$organizationList.teams[0].name}`,
-                titleDropdown: $organizationList.teams,
-                level: 0,
-                customBase: '',
-                breadcrumbs: {
-                    title: `${$organization.name}`,
-                    href: 'console'
-                },
-                tabs: [
-                    {
-                        href: 'console',
-                        title: 'Projects'
-                    },
-                    {
-                        href: 'console/members',
-                        title: 'Members'
-                    },
-                    {
-                        href: 'console/settings',
-                        title: 'Settings'
-                    }
-                ]
-            });
-        } else {
-            $newOrgModal = true;
-            closable = false;
-        }
-    }
-
-    let closable = true;
-
-    organization.subscribe((org) => {
-        handle();
-        if (org?.$id) {
-            memberList.load(org.$id, '', 100, 0);
-        }
-    });
-</script>
-
-<svelte:head>
-    <title>Appwrite - Console</title>
-</svelte:head>
-
-<Shell>
-    <svelte:fragment slot="header">
-        <Header />
-    </svelte:fragment>
-    {#if $organization}
-        <slot />
-    {/if}
-    <footer class="main-footer" />
-</Shell>
-
-<Create bind:show={$newOrgModal} {closable} />
-<CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index f0c1cf891..935bb997d 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,26 +3,64 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
-    import { organization, newOrgModal } from './store';
+    import {
+        organization,
+        organizationList,
+        newOrgModal
+    } from './organization-[organization]/store';
     import Create from './_createOrganization.svelte';
+    import { page } from '$app/stores';
+    import { afterNavigate, goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+
+    let closable = true;
 
     updateLayout({
-        title: $organization.name ?? 'Projects',
+        title: $organization?.name ?? 'Projects',
         level: 0
     });
+
+    onMount(async () => {
+        if ($page.url.pathname === '/console') {
+            await pageLoad();
+        }
+    });
+
+    afterNavigate(async () => {
+        if ($page.url.pathname === '/console') {
+            await pageLoad();
+        }
+    });
+
+    const pageLoad = async () => {
+        if (!$organization) {
+            await organizationList.load();
+            if ($organizationList?.total) {
+                await organization.load($organizationList.teams[0].$id);
+                await goto(`/console/organization-${$organization.$id}`);
+            } else {
+                closable = false;
+                newOrgModal.set(true);
+            }
+        } else {
+            await goto(`/console/organization-${$organization.$id}`);
+        }
+    };
 </script>
 
-<Shell showSideNavigation>
+<Shell showSideNavigation={!$page?.params.organization}>
     <svelte:fragment slot="header">
         <Header />
     </svelte:fragment>
     <svelte:fragment slot="side">
-        <SideNavigation />
+        {#if !$page?.params.organization}
+            <SideNavigation />
+        {/if}
     </svelte:fragment>
     <slot />
     <footer class="main-footer" />
 </Shell>
 
 {#if $newOrgModal}
-    <Create bind:show={$newOrgModal} />
+    <Create bind:show={$newOrgModal} {closable} />
 {/if}
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 6a28491cb..6550128e3 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -5,7 +5,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { organization, organizationList } from './store';
+    import { organization, organizationList } from './organization-[organization]/store';
     import { titleDropdown } from '$lib/stores/layout';
     import { goto } from '$app/navigation';
 
diff --git a/src/routes/console/index.svelte b/src/routes/console/index.svelte
new file mode 100644
index 000000000..700790d1c
--- /dev/null
+++ b/src/routes/console/index.svelte
@@ -0,0 +1 @@
+<p>loading</p>
diff --git a/src/routes/console/organization-[organization]/__layout.svelte b/src/routes/console/organization-[organization]/__layout.svelte
new file mode 100644
index 000000000..e79fd7c33
--- /dev/null
+++ b/src/routes/console/organization-[organization]/__layout.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { updateLayout } from '$lib/stores/layout';
+    import { onMount } from 'svelte';
+    import { afterNavigate } from '$app/navigation';
+    import {
+        organizationList,
+        organization,
+        memberList,
+        newOrgModal,
+        newMemberModal
+    } from './store';
+    import CreateMember from './_createMember.svelte';
+    import Create from '../_createOrganization.svelte';
+    import { page } from '$app/stores';
+
+    $: org = $page.params.organization;
+    $: path = `console/organization-${org}`;
+
+    onMount(handle);
+    afterNavigate(handle);
+
+    async function handle(event = null) {
+        if ($organization.$id !== org) {
+            await organization.load(org);
+            await memberList.load(org, '', 100, 0);
+        }
+        updateLayout({
+            navigate: event,
+            title: $organization?.name,
+            titleDropdown: $organizationList.teams,
+            level: 0,
+            customBase: '',
+            breadcrumbs: {
+                title: `${$organization.name}`,
+                href: path
+            },
+            tabs: [
+                {
+                    href: path,
+                    title: 'Projects'
+                },
+                {
+                    href: `${path}/members`,
+                    title: 'Members'
+                },
+                {
+                    href: `${path}/settings`,
+                    title: 'Settings'
+                }
+            ]
+        });
+    }
+</script>
+
+<svelte:head>
+    <title>Appwrite - Console</title>
+</svelte:head>
+
+{#if $organization}
+    <slot />
+{/if}
+
+<Create bind:show={$newOrgModal} />
+<CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/_createMember.svelte b/src/routes/console/organization-[organization]/_createMember.svelte
similarity index 100%
rename from src/routes/console/_createMember.svelte
rename to src/routes/console/organization-[organization]/_createMember.svelte
diff --git a/src/routes/console/_createProject.svelte b/src/routes/console/organization-[organization]/_createProject.svelte
similarity index 100%
rename from src/routes/console/_createProject.svelte
rename to src/routes/console/organization-[organization]/_createProject.svelte
diff --git a/src/routes/console/_deleteMember.svelte b/src/routes/console/organization-[organization]/_deleteMember.svelte
similarity index 100%
rename from src/routes/console/_deleteMember.svelte
rename to src/routes/console/organization-[organization]/_deleteMember.svelte
diff --git a/src/routes/console/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
similarity index 100%
rename from src/routes/console/_deleteOrganization.svelte
rename to src/routes/console/organization-[organization]/_deleteOrganization.svelte
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/organization-[organization]/index.svelte
similarity index 86%
rename from src/routes/console/index@intro.svelte
rename to src/routes/console/organization-[organization]/index.svelte
index a8f53270c..f4dcca448 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -6,22 +6,22 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@aw-labs/appwrite-console';
-    import CreateOrganization from './_createOrganization.svelte';
+    import CreateOrganization from '../_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
-    import { organization, projectList } from './store';
+    import { projectList } from './store';
     import { onMount } from 'svelte';
+    import { page } from '$app/stores';
 
     let projects: Models.Project[] = [];
+    $: org = $page.params.organization;
 
     onMount(async () => {
         await projectList.load();
-
-        projects = $projectList.projects.filter((n) => n.teamId === $organization.$id);
+        projects = $projectList?.projects.filter((n) => n.teamId === org);
     });
 
     let showCreate = false;
     let addOrganization = false;
-    let currentOrganization = $organization?.$id;
     let offset = 0;
     const limit = 5;
 
@@ -53,11 +53,7 @@
         return { name, icon };
     };
 
-    $: if (currentOrganization !== $organization?.$id) {
-        currentOrganization = $organization.$id;
-        projectList.load();
-        projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
-    }
+    $: projects = $projectList?.projects.filter((a) => a.teamId === org);
 </script>
 
 <Container>
@@ -136,15 +132,12 @@
             </div>
         </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} />
+            <p class="text">Total results: {projects?.length}</p>
+            <Pagination {limit} bind:offset sum={projects?.length} />
         </div>
     {/if}
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
 
-<CreateProject
-    bind:show={showCreate}
-    bind:teamId={currentOrganization}
-    on:created={projectCreated} />
+<CreateProject bind:show={showCreate} teamId={org} on:created={projectCreated} />
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/organization-[organization]/members.svelte
similarity index 100%
rename from src/routes/console/members@intro.svelte
rename to src/routes/console/organization-[organization]/members.svelte
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/organization-[organization]/settings.svelte
similarity index 100%
rename from src/routes/console/settings@intro.svelte
rename to src/routes/console/organization-[organization]/settings.svelte
diff --git a/src/routes/console/organization-[organization]/store.ts b/src/routes/console/organization-[organization]/store.ts
new file mode 100644
index 000000000..1bacf460f
--- /dev/null
+++ b/src/routes/console/organization-[organization]/store.ts
@@ -0,0 +1,84 @@
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+import { browser } from '$app/env';
+
+function createOrganizationList() {
+    const { subscribe, set } = writable<Models.TeamList>(
+        browser ? JSON.parse(sessionStorage.getItem('organizationList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async () => {
+            const response = await sdkForConsole.teams.list();
+            set(response);
+        }
+    };
+}
+function createOrganization() {
+    const { subscribe, set } = writable<Models.Team>(
+        browser ? JSON.parse(sessionStorage.getItem('organization')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string) => {
+            const response = await sdkForConsole.teams.get(teamId);
+            set(response);
+        }
+    };
+}
+
+function createProjectList() {
+    const { subscribe, set } = writable<Models.ProjectList>(
+        browser ? JSON.parse(sessionStorage.getItem('projectList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async () => {
+            const response = await sdkForConsole.projects.list();
+            set(response);
+        }
+    };
+}
+
+function createMemberList() {
+    const { subscribe, set } = writable<Models.MembershipList>(
+        browser ? JSON.parse(sessionStorage.getItem('memberList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string, search: string, limit: number, offset: number) => {
+            const response = await sdkForConsole.teams.getMemberships(
+                teamId,
+                search,
+                limit,
+                offset
+            );
+            set(response);
+        }
+    };
+}
+
+export const organizationList = createOrganizationList();
+export const organization = createOrganization();
+export const projectList = createProjectList();
+export const memberList = createMemberList();
+export const newOrgModal = writable<boolean>(false);
+export const newMemberModal = writable<boolean>(false);
+
+if (browser) {
+    organizationList.subscribe((n) =>
+        sessionStorage?.setItem('organizationList', JSON.stringify(n ?? ''))
+    );
+    organization.subscribe((n) => sessionStorage?.setItem('organization', JSON.stringify(n ?? '')));
+    projectList.subscribe((n) => sessionStorage?.setItem('projectList', JSON.stringify(n ?? '')));
+    memberList.subscribe((n) => sessionStorage?.setItem('memberList', JSON.stringify(n ?? '')));
+}