List projects

src/components/Nav.svelte

@@ -3,6 +3,7 @@
   import { goto, stores } from "@sapper/app";
   import { post } from "auth.js";
   import Sidebar from './UI/Sidebar.svelte';
+  import { accountStore } from "../store/accountStore";
   const { page, session } = stores();
 
   export let segment;
@@ -11,8 +12,8 @@
 
   async function logout() {
     await post(`auth/logout`);
-	// $session.user = null;
 	session.set({ token: null, user: null })
+	accountStore.set([]);
     goto("/");
   }
 

src/components/UI/Sidebar.svelte

@@ -1,68 +1,62 @@
 <script>
-import * as api from 'api.js'
-import { onMount, afterUpdate, onDestroy } from 'svelte';
-import { goto, stores } from "@sapper/app";
-import { fade, fly, slide, scale } from 'svelte/transition';
-import Button from './Button.svelte';
-const { session } = stores();
+  import * as api from "api.js";
+  import { onMount, afterUpdate, onDestroy } from "svelte";
+  import { goto, stores } from "@sapper/app";
+  import { fade, fly, slide, scale } from "svelte/transition";
+  import Button from "./Button.svelte";
+  const { session } = stores();
+  import { accountStore } from "../../store/accountStore";
 
-export let toggle = true;
-let data = [];
-
-onMount(async () => {
-		({ data } = await api.get(`accounts/`, $session.token, $session.user._id))
-    });
-
-afterUpdate(() => {
-    data = data;
-})
-
-onDestroy(() => {
-    data = [];
-})
-
-//$: console.log('Sidebar accountData:', data);
+  export let toggle = true;
 
 </script>
 
-<aside class="absolute bg-white top-0 left-0 h-full w-327px md:w-350px overflow-auto z-50 {toggle ? 'hidden' : ''}">
-    <div class="flex flex-col">
-        <div class="flex bg-gray-800 text-white p-4 md:hidden">
-            <i class="material-icons-outlined">keyboard_arrow_left</i>
-            <h3 class="text-base">Menu</h3>
-        </div>
-        <div class="text-gray-700">
-            <div class="bg-gray-100 pl-6 py-3">
-                <h2 class="text-lg">Account Name</h2>
-                <p class="text-gray-600 text-xs">Account ID</p>
-            </div>
-            <div class="pt-6 mx-4">
-                <h4 class="text-gray-600 pl-2 text-xs pb-4">PROJECTS</h4>
-                {#if $session.user}
-                     {#each data as account}
-                            <div class="flex py-2 hover:bg-blue-100 hover:text-blue-500">
-                            <i class="material-icons-outlined my-auto pl-2 pr-4">corporate_fare</i>
-                            <a class="flex flex-col" href="account/{account._id}" on:click="{() => toggle = !toggle}">
-                                <h3 class="text-base">{account.accountName}</h3>
-                                <p class="text-xs">{account._id}</p>
-                            </a>
-                        </div>
-                    {/each}
-                {:else}
-                     <div>Nothing to see here</div>
-                {/if}
+<aside
+  class="absolute bg-white top-0 left-0 h-full w-327px md:w-350px overflow-auto
+  z-50 {toggle ? 'hidden' : ''}">
+  <div class="flex flex-col">
+    <div class="flex bg-gray-800 text-white p-4 md:hidden">
+      <i class="material-icons-outlined">keyboard_arrow_left</i>
+      <h3 class="text-base">Menu</h3>
+    </div>
+    <div class="text-gray-700">
+      <div class="bg-gray-100 pl-6 py-3">
+        <h2 class="text-lg">Account Name</h2>
+        <p class="text-gray-600 text-xs">Account ID</p>
+      </div>
+      <div class="pt-6 mx-4">
+        <h4 class="text-gray-600 pl-2 text-xs pb-4">PROJECTS</h4>
+        {#if $session.user && $accountStore.length > 0}
+          {#each $accountStore as account}
+            <div class="flex py-2 hover:bg-blue-100 hover:text-blue-500">
+              <i class="material-icons-outlined my-auto pl-2 pr-4">
+                corporate_fare
+              </i>
+              <a
+                class="flex flex-col"
+                href="account/{account._id}"
+                on:click={() => (toggle = !toggle)}>
+                <h3 class="text-base">{account.accountName}</h3>
+                <p class="text-xs">{account._id}</p>
+              </a>
             </div>
-        </div>
-        <div class="pt-6 pl-6">
-            <Button 
-            mode="link"
-            classes="text-blue-500 text-sm"
-            href="/forgot"
-            >CREATE PROJECT</Button>
-        </div>
+          {/each}
+        {:else}
+          <div>Nothing to see here</div>
+        {/if}
+      </div>
+    </div>
+    <div class="pt-6 pl-6">
+      <Button mode="link" classes="text-blue-500 text-sm" href="/forgot">
+        CREATE PROJECT
+      </Button>
     </div>
+  </div>
 </aside>
-<div on:click="{() => toggle = !toggle}" class="fixed top-0 left-0 w-full h-full z-40 bg-black bg-opacity-75 cursor-pointer {toggle ? 'hidden' : ''}"></div>
+<div
+  on:click={() => (toggle = !toggle)}
+  class="fixed top-0 left-0 w-full h-full z-40 bg-black bg-opacity-75
+  cursor-pointer {toggle ? 'hidden' : ''}" />
 
 <!-- <aside class="absolute bg-white top-0 left-0 h-full w-327px md:w-350px overflow-auto z-50 {toggle ? 'hidden' : ''}">
     <div class="flex flex-col">
@@ -87,11 +81,11 @@ onDestroy(() => {
             </div>
         </div>
         <div class="pt-6 pl-6">
-            <Button 
+            <Button
             mode="link"
             classes="text-blue-500 text-sm"
             href="/forgot"
             >CREATE PROJECT</Button>
         </div>
     </div>
-</aside> -->
+</aside> -->

src/routes/_layout.svelte

@@ -1,11 +1,11 @@
 <script context="module">
   export async function preload(page, session) {
-	const { user , token } = session;
-	const { path } = page;
+    const { user , token } = session;
+    const { path } = page;
 
-	// Protected Routes
-	const loginRoutes = ["/dashboard", "/settings", "/accounts" , "/account"];
-	// Public Routes
+    // Protected Routes
+    const loginRoutes = ["/dashboard", "/settings", "/accounts" , "/account"];
+    // Public Routes
     const logoutRoutes = ["/login", "/register", "/forgot"];
 
     if (user && logoutRoutes.includes(path)) {
@@ -16,11 +16,31 @@
 
     return { user, token };
   }
+
 </script>
 <script>
-	import Nav from '../components/Nav.svelte';
+  import * as api from "api.js";
+  import { stores } from '@sapper/app';
+  import { accountStore } from '../store/accountStore';
+  import Nav from '../components/Nav.svelte';
+  const { session } = stores();
+
+  export let segment;
+
+  if($session.token && $session.user) {
+    updateStore($session.token, $session.user._id);
+  }
+
+  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 😭')
+      }
 
-	export let segment;
+      return accountStore.set(accountData);
+  }
 </script>
 
 <Nav {segment}/>

src/routes/account/[_id].svelte

@@ -1,49 +1,56 @@
 <script context="module">
-	import * as api from "api.js";
-
-	export async function preload(page, session)  {
-		//console.log('page', page);
-		//console.log('session', session);
-		const { _id } = page.params;
-
-		const res = await api.get(`accounts/${_id}`, session.token, session.user._id)
-		const accountData = res.data;
-
-		return { accountData }
-	}
+  import * as api from "api.js";
+
+  export async function preload(page, session) {
+    //console.log('page', page);
+    //console.log('session', session);
+    const { _id } = page.params;
+
+    const res = await api.get(
+      `accounts/${_id}`,
+      session.token,
+      session.user._id
+    );
+    const accountData = res.data;
+
+    console.log("server _id", accountData);
+
+    return { accountData };
+  }
 </script>
 
 <script>
-	export let accountData;
-	//console.log(accountData.projects)
-
-	const projects = accountData.projects;
-	JSON.stringify(projects)
+  export let accountData;
+  console.log("client _id", accountData);
 
-	console.log(accountData)
+  $: projects = accountData.projects;
 
-	if(accountData) {
-		//activeName = accountData.accountName;
-	}
+  if (accountData) {
+    //activeName = accountData.accountName;
+  }
 </script>
 
 <svelte:head>
-	<title>{accountData.accountName}</title>
+  <title>{accountData.accountName}</title>
 </svelte:head>
 
-
 <h1>{accountData.accountName}</h1>
 
 <ul>
-{#if projects}
-	 {#each projects as project}
-	<li>
-		<a class="hover:underline text-blue-500" href="/project/{project._id}" id="{project._id}">{project.projectName}</a>
-	</li>
-{:else}
-	<li>
-		<p>No projects found or call has not been made</p>
-	</li>
-{/each}
-{/if}
-</ul>
+  {#if projects}
+    {#each projects as project}
+      <li>
+        <a
+          class="hover:underline text-blue-500"
+          href="/project/{project._id}"
+          id={project._id}>
+          {project.projectName}
+        </a>
+      </li>
+    {:else}
+      <li>
+        <p>No projects found or call has not been made</p>
+      </li>
+    {/each}
+  {/if}
+</ul>

src/routes/accounts.svelte

@@ -1,32 +1,23 @@
-<script context="module">
-    import * as api from "api.js";
-
-	export async function preload(page, session)  {
-		//console.log('page', page);
-		//console.log('session', session);
-		const { _id } = page.params;
-
-		const res = await api.get(`accounts/`, session.token, session.user._id)
-		const accountData = res.data;
-
-		return { accountData }
-	}
-</script>
-
 <script>
-	export let accountData;	
+  import { accountStore } from "../store/accountStore";
+
 </script>
 
 <ul>
-{#if accountData}
-	 {#each accountData as account}
-        <li>
-            <a class="hover:underline text-blue-500" href="/account/{account._id}" id="{account._id}">{account.accountName}</a>
-        </li>
+  {#if $accountStore.length > 0}
+    {#each $accountStore as account}
+      <li>
+        <a
+          class="hover:underline text-blue-500"
+          href="/account/{account._id}"
+          id={account._id}>
+          {account.accountName}
+        </a>
+      </li>
     {:else}
-        <li>
-            <p>No Accounts found or call has not been made</p>
-        </li>
+      <li>
+        <p>No Accounts found or call has not been made</p>
+      </li>
     {/each}
-{/if}
-</ul>
+  {/if}
+</ul>

src/routes/login.svelte

@@ -1,10 +1,10 @@
 <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 accountData from '../helpers/accountData';
 
     const { session } = stores();
 
@@ -15,19 +15,20 @@
 
     async function submit() {
         const response = await post(`auth/login`, { email, password });
-        // TODO handle network errors
-        // errors = response.errors;
-        if(errors) {
-
+
+        if(!response.success) {
+            return console.log('Something went wrong logging in...')
         }
 
         if (response.user) {
             $session.user = response.user;
             $session.token = response.token;
-                goto("/accounts");
+            goto("/accounts");
         }
     }
 
+    //$: console.log('$', $accountStore);
+
 </script>
 
 <svelte:head>

src/store/accountStore.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const accountStore = writable([]);