From 9bdee5dfb771c43369200da897bf5e160dbb5b5d Mon Sep 17 00:00:00 2001
From: 3daddict <print@3daddict.com>
Date: Fri, 26 Jun 2020 19:00:27 -0700
Subject: [PATCH 1/3] example of routing idea

---
 src/routes/account/{[_id].svelte => [slug].svelte}       | 5 +++--
 src/routes/project/{[...slug].svelte => [..._id].svelte} | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)
 rename src/routes/account/{[_id].svelte => [slug].svelte} (86%)
 rename src/routes/project/{[...slug].svelte => [..._id].svelte} (90%)

diff --git a/src/routes/account/[_id].svelte b/src/routes/account/[slug].svelte
similarity index 86%
rename from src/routes/account/[_id].svelte
rename to src/routes/account/[slug].svelte
index 28f22ed..8a0e9ed 100644
--- a/src/routes/account/[_id].svelte
+++ b/src/routes/account/[slug].svelte
@@ -4,7 +4,7 @@
   export async function preload(page, session) {
     console.log("page in [_id.svelte]", page);
     console.log("session in [_id.svelte]", session);
-    const { _id } = page.params;
+    const { _id, slug } = page.params;
 
     const res = await api.get(
       `accounts/${_id}`,
@@ -40,9 +40,10 @@
   {#if projects}
     {#each projects as project}
       <li>
+      <!-- Account url will be slug param from api response object -->
         <a
           class="hover:underline text-blue-500"
-          href="project/{accountData._id}/{project._id}"
+          href="account/{accountData.slug}/project/{project._id}"
           rel="prefetch"
           id={project._id}>
           {project.projectName}
diff --git a/src/routes/project/[...slug].svelte b/src/routes/project/[..._id].svelte
similarity index 90%
rename from src/routes/project/[...slug].svelte
rename to src/routes/project/[..._id].svelte
index 5e4fdec..1890ddc 100644
--- a/src/routes/project/[...slug].svelte
+++ b/src/routes/project/[..._id].svelte
@@ -1,7 +1,7 @@
 <script context="module">
   export async function preload({ params }) {
     console.log("params in project", { params });
-    let [account, project] = params.slug;
+    let [account, project] = params._id;
 
     return { account, project };
   }

From 796b118a7129e87c3a5261e6c7cf9efbdd98c3a0 Mon Sep 17 00:00:00 2001
From: silvestrevivo <silvestrevivomillan@gmail.com>
Date: Sun, 28 Jun 2020 14:32:49 +0200
Subject: [PATCH 2/3] nesting routes to get parameters

---
 src/routes/account/[slug].svelte                     | 10 +++++-----
 .../project/[...id].svelte}                          | 12 ++++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)
 rename src/routes/{project/[..._id].svelte => account/project/[...id].svelte} (57%)

diff --git a/src/routes/account/[slug].svelte b/src/routes/account/[slug].svelte
index 8a0e9ed..5a1d947 100644
--- a/src/routes/account/[slug].svelte
+++ b/src/routes/account/[slug].svelte
@@ -4,10 +4,10 @@
   export async function preload(page, session) {
     console.log("page in [_id.svelte]", page);
     console.log("session in [_id.svelte]", session);
-    const { _id, slug } = page.params;
+    const { slug } = page.params;
 
     const res = await api.get(
-      `accounts/${_id}`,
+      `accounts/${slug}`,
       session.token,
       session.user._id
     );
@@ -21,7 +21,7 @@
 
 <script>
   export let accountData;
-  console.log("client _id", accountData);
+  console.log("accountData", accountData);
 
   $: projects = accountData.projects;
 
@@ -40,10 +40,10 @@
   {#if projects}
     {#each projects as project}
       <li>
-      <!-- Account url will be slug param from api response object -->
+        <!-- Account url will be slug param from api response object -->
         <a
           class="hover:underline text-blue-500"
-          href="account/{accountData.slug}/project/{project._id}"
+          href={`account/project/${accountData._id}/${project._id}`}
           rel="prefetch"
           id={project._id}>
           {project.projectName}
diff --git a/src/routes/project/[..._id].svelte b/src/routes/account/project/[...id].svelte
similarity index 57%
rename from src/routes/project/[..._id].svelte
rename to src/routes/account/project/[...id].svelte
index 1890ddc..8c18763 100644
--- a/src/routes/project/[..._id].svelte
+++ b/src/routes/account/project/[...id].svelte
@@ -1,21 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
     console.log("params in project", { params });
-    let [account, project] = params._id;
+    let [account, project] = params.id;
 
     return { account, project };
   }
 </script>
 
 <script>
+  import { onMount } from "svelte";
+
   export let account, project;
+  onMount(() => {
+    // here you can call the API passing the account and project parameters
+  });
 </script>
 
-<!-- src/routes/blog/[...slug].svelte -->
 <svelte:head>
   <title>Individual project</title>
 </svelte:head>
 <h1>Individual project</h1>
 
-<p>account id => {account}</p>
-<p>project id => {project}</p>
+<p>account id: {account}</p>
+<p>project id: {project}</p>

From 8227cd017e95c2f17aedb1f350ca0499aff4a57b Mon Sep 17 00:00:00 2001
From: 3daddict <print@3daddict.com>
Date: Mon, 29 Jun 2020 22:42:50 -0700
Subject: [PATCH 3/3] nested route completed

---
 src/components/UI/Sidebar.svelte               |  2 +-
 .../account/{project => }/[...id].svelte       |  0
 src/routes/account/[slug].svelte               | 18 +++++++-----------
 src/routes/accounts.svelte                     |  2 +-
 4 files changed, 9 insertions(+), 13 deletions(-)
 rename src/routes/account/{project => }/[...id].svelte (100%)

diff --git a/src/components/UI/Sidebar.svelte b/src/components/UI/Sidebar.svelte
index 50d49f7..3303095 100644
--- a/src/components/UI/Sidebar.svelte
+++ b/src/components/UI/Sidebar.svelte
@@ -33,7 +33,7 @@
               </i>
               <a
                 class="flex flex-col"
-                href="account/{account._id}"
+                href="account/{account.slug}"
                 rel="prefetch"
                 on:click={() => (toggle = !toggle)}>
                 <h3 class="text-base">{account.accountName}</h3>
diff --git a/src/routes/account/project/[...id].svelte b/src/routes/account/[...id].svelte
similarity index 100%
rename from src/routes/account/project/[...id].svelte
rename to src/routes/account/[...id].svelte
diff --git a/src/routes/account/[slug].svelte b/src/routes/account/[slug].svelte
index 5a1d947..0113281 100644
--- a/src/routes/account/[slug].svelte
+++ b/src/routes/account/[slug].svelte
@@ -2,18 +2,14 @@
   import * as api from "api.js";
 
   export async function preload(page, session) {
-    console.log("page in [_id.svelte]", page);
-    console.log("session in [_id.svelte]", session);
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
     const { slug } = page.params;
 
-    const res = await api.get(
-      `accounts/${slug}`,
-      session.token,
-      session.user._id
-    );
-    const accountData = res.data;
+    const res = await api.get(`accounts/${slug}`, session.token, session.user._id);
+    const accountData = res.data[0];
 
-    console.log("individual acount _id", accountData);
+    console.log("server account data:", accountData);
 
     return { accountData };
   }
@@ -21,7 +17,7 @@
 
 <script>
   export let accountData;
-  console.log("accountData", accountData);
+  console.log("client accountData:", accountData);
 
   $: projects = accountData.projects;
 
@@ -43,7 +39,7 @@
         <!-- Account url will be slug param from api response object -->
         <a
           class="hover:underline text-blue-500"
-          href={`account/project/${accountData._id}/${project._id}`}
+          href={`account/${accountData.slug}/${project._id}`}
           rel="prefetch"
           id={project._id}>
           {project.projectName}
diff --git a/src/routes/accounts.svelte b/src/routes/accounts.svelte
index 8e18e6a..0f814ee 100644
--- a/src/routes/accounts.svelte
+++ b/src/routes/accounts.svelte
@@ -12,7 +12,7 @@
       <li>
         <a
           class="hover:underline text-blue-500"
-          href="/account/{account._id}"
+          href="/account/{account.slug}"
           rel="prefetch"
           id={account._id}>
           {account.accountName}