Projects

src/routes/_layout.svelte

@@ -8,6 +8,7 @@
     // Public Routes
     const logoutRoutes = ["/login", "/register", "/forgot"];
 
+    // redirect if logged in and redirect if logged out
     if (user && logoutRoutes.includes(path)) {
       return this.redirect(302, "accounts");
     } else if (!user && loginRoutes.includes(path)) {
@@ -17,25 +18,31 @@
 </script>
 
 <script>
-  import { onMount, afterUpdate, beforeUpdate } from "svelte";
-  import * as api from "api.js";
+  import { afterUpdate } from "svelte";
   import { stores } from "@sapper/app";
   import { accounts } from "../store/accounts";
+  import * as api from "api.js";
   import Nav from "../components/Nav.svelte";
 
   const { session } = stores();
 
   export let segment;
 
+  // populate the accounts store
+  // afterUpdate is used here to avoid persisting data
   afterUpdate(async () => {
+    // check for session user and that store is empty
     if ($session.user._id && $accounts.length === 0) {
-      console.log("this is only once done to avoid persisting data");
+      // call api for users store data
       const res = await api.get(`accounts/`, $session.token, $session.user._id);
       const accountData = await res.data;
+      // handle api data error
       if (!accountData) {
-        return console.log("No Account Data Returned 😭");
+        return console.log("Could not fetch data from api...");
       }
+      // set store data from api response
       accounts.setupAccounts(accountData);
+      console.log("Store Data Retrieved and Set...");
     }
   });
 </script>

src/routes/account/[_id].svelte

@@ -1,33 +1,25 @@
 <script context="module">
   import * as api from "api.js";
-
+  // preload account data by id
   export async function preload(page, session) {
-    console.log("page in [_id.svelte]", page);
-    console.log("session in [_id.svelte]", session);
-    const { _id } = page.params;
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
 
-    const res = await api.get(
-      `accounts/${_id}`,
-      session.token,
-      session.user._id
-    );
+    // _id variable from page params
+    const { _id } = page.params;
+    // call api for account data by id
+    const res = await api.get(`accounts/${_id}`,session.token,session.user._id);
     const accountData = res.data;
-
-    console.log("individual acount _id", accountData);
-
+    // console log for prefetch verication comment out for production
+    console.log(accountData.accountName + " Loaded...");
     return { accountData };
   }
 </script>
 
 <script>
   export let accountData;
-  // console.log("client _id", accountData);
-
+  // assign dynamic variable to project data
   $: projects = accountData.projects;
-
-  if (accountData) {
-    //activeName = accountData.accountName;
-  }
 </script>
 
 <svelte:head>
@@ -40,17 +32,18 @@
   {#if projects}
     {#each projects as project}
       <li>
+        <!-- Prefetch the data on link hover rel="prefetch" -->
         <a
           class="hover:underline text-blue-500"
-          href="project/{project._id}"
+          href="account/{accountData._id}/project/{project._id}"
           rel="prefetch"
           id={project._id}>
           {project.projectName}
         </a>
       </li>
     {:else}
       <li>
-        <p>No projects found or call has not been made</p>
+        <p>No projects found or not logged in...</p>
       </li>
     {/each}
   {/if}

src/routes/account/project/[_id].svelte

@@ -0,0 +1,35 @@
+<script context="module">
+  import * as api from "api.js";
+  // preload account data by id
+  export async function preload(page, session) {
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
+    console.log({
+      host: page.host, 
+      path: page.path, 
+      params: page.params, 
+      query: page.query
+    })
+
+    // _id variable from page params
+    //const { _id } = page.params;
+    // call api for account data by id
+    //const res = await api.get(`projects/${_id}`,session.token,session.user._id);
+    //const projectData = res.data;
+    // console log for prefetch verication comment out for production
+    //console.log(projectData.projectName + " Loaded...");
+    //return { projectData };
+  }
+</script>
+
+<script>
+  export let projectData;
+  // assign dynamic variable to project data
+  $: projects = projectData;
+</script>
+
+<!-- <svelte:head>
+  <title>{projectData.projectName}</title>
+</svelte:head> -->
+
+<div>Project Data Will go here...</div>

src/routes/accounts.svelte

@@ -1,27 +1,41 @@
-<script>
-  import { accounts } from "../store/accounts";
-  import { goto, stores } from "@sapper/app";
-  const { session } = stores();
+<script context="module">
+  import * as api from "api.js";
+  // preload account data
+  export async function preload(page, session) {
+    // call api for account data
+    const res = await api.get(`accounts/`,session.token,session.user._id);
+    const accountData = res.data;
+    return { accountData };
+  }
+</script>
 
-  $: console.log("$ession in account", $session);
+<script>
+  export let accountData;
+  // assign dynamic variable to project data
+  $: accounts = accountData;
 </script>
 
+<svelte:head>
+  <title>Accounts</title>
+</svelte:head>
+
 <ul>
-  {#if $accounts.length > 0}
-    {#each $accounts as account}
+  {#if accounts}
+    {#each accounts as account}
       <li>
+        <!-- Prefetch the data on link hover rel="prefetch"" -->
         <a
           class="hover:underline text-blue-500"
-          href="/account/{account._id}"
+          href="account/{account._id}"
           rel="prefetch"
           id={account._id}>
           {account.accountName}
         </a>
       </li>
     {:else}
       <li>
-        <p>No Accounts found or call has not been made</p>
+        <p>No projects found or not logged in...</p>
       </li>
     {/each}
   {/if}
-</ul>
+</ul>

src/routes/login.svelte

@@ -1,11 +1,9 @@
 <script>
-  import * as api from "api.js";
   import { onMount, onDestroy } from "svelte";
   import { goto, stores } from "@sapper/app";
   import { post } from "auth.js";
   import TextInput from "../components/UI/TextInput.svelte";
   import Button from "../components/UI/Button.svelte";
-  //   import { accountStore } from "../store/accountStore";
 
   const { session } = stores();
 
@@ -15,32 +13,19 @@
   let user = [];
 
   async function submit() {
+    // call api to login user
     const response = await post(`auth/login`, { email, password });
-
+    // handle api data error
     if (!response.success) {
       return console.log("Something went wrong logging in...");
     }
-
+    // update the session data of user and route
     if (response.user) {
       $session.user = response.user;
       $session.token = response.token;
-      //   updateStore($session.token, $session.user._id);
-      goto("/accounts");
+      return goto("/accounts");
     }
   }
-
-  // async function updateStore(token, userID) {
-  //     const res = await api.get(`accounts/`, token, userID);
-  //     const accountData = await res.data;
-
-  //     if (!accountData) {
-  //         return console.log('No Account Data Returned 😭')
-  //     }
-
-  //     return accountStore.set(accountData);
-  // }
-
-  //$: console.log('$', $accountStore);
 </script>
 
 <svelte:head>

src/routes/project/[_id].svelte

@@ -0,0 +1,35 @@
+<script context="module">
+  import * as api from "api.js";
+  // preload account data by id
+  export async function preload(page, session) {
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
+    console.log({
+      host: page.host, 
+      path: page.path, 
+      params: page.params, 
+      query: page.query
+    })
+
+    // _id variable from page params
+    //const { _id } = page.params;
+    // call api for account data by id
+    //const res = await api.get(`projects/${_id}`,session.token,session.user._id);
+    //const projectData = res.data;
+    // console log for prefetch verication comment out for production
+    //console.log(projectData.projectName + " Loaded...");
+    //return { projectData };
+  }
+</script>
+
+<script>
+  export let projectData;
+  // assign dynamic variable to project data
+  $: projects = projectData;
+</script>
+
+<!-- <svelte:head>
+  <title>{projectData.projectName}</title>
+</svelte:head> -->
+
+<div>Project Data Will go here...</div>