Skip to content

Dev #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 24, 2020
Merged

Dev #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
45681ab
store created to share data
silvestrevivo Jun 16, 2020
b357d20
$: projects = accountData.projects; on line 26 to make projects reactive
silvestrevivo Jun 17, 2020
25279f5
accountStore created and used globally
mike-diff Jun 18, 2020
e6b7905
refactoring code
silvestrevivo Jun 22, 2020
68f4e1a
adding rel=prefetch
silvestrevivo Jun 22, 2020
a628819
Merge pull request #11 from 3daddict/silvestre/refactoring
mike-diff Jun 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 82 additions & 59 deletions src/components/Nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,102 @@
<script>
import { onMount } from 'svelte';
import { onMount } from "svelte";
import { goto, stores } from "@sapper/app";
import { post } from "auth.js";
import Sidebar from './UI/Sidebar.svelte';
import Sidebar from "./UI/Sidebar.svelte";
import { accounts } from "../store/accounts";
const { page, session } = stores();

export let segment;
export let activeName;
let active = true;

async function logout() {
await post(`auth/logout`);
// $session.user = null;
session.set({ token: null, user: null })
session.set({ token: null, user: null });
accounts.setupAccounts([]);
goto("/");
}

</script>

<style>

</style>

<nav class="bg-gray-800 text-white md:py-3">

{#if $session.user}
<div class="md:hidden flex align-middle items-center justify-between px-6 py-2">
<div>
<div class="cursor-pointer" on:click="{() => active = !active}"><i class="material-icons-outlined align-middle">menu</i></div>
</div>
<div on:click={logout}>
<p class="pl-2">Logout</p>
</div>
</div>
{:else}
<div class="md:hidden flex flex-row-reverse align-middle items-center justify-between px-6 py-2">
<div>
<a class="flex align-middle items-center" href="/login" aria-current='{segment === "login" ? "page" : undefined}' >
<span class="pl-2">Login</span>
</a>
</div>
<div on:click={logout}>
<p class="pl-2">Logout</p>
</div>
</div>
{/if}


<div class="hidden md:flex flex-row align-middle items-center justify-between">
<div class="flex align-middle items-center">
<a href="/" aria-current='{segment === undefined ? "page" : undefined}' on:click={logout}>
<p class="pl-2">Logout</p>
</a>
<span class="h-10 w-px bg-gray-900 align-middle mx-6"></span>
{#if $session.user && $page.path.includes('/account/')}
<div class="cursor-pointer" on:click="{() => active = !active}">{activeName ? activeName : "DEBUG"}<i class="material-icons-outlined align-middle pl-3">menu</i></div>
{/if}
{#if $session.user}
<div class="cursor-pointer" on:click="{() => active = !active}">Account Name<i class="material-icons-outlined align-middle pl-3">menu</i></div>
{/if}
</div>
{#if $session.user}
<div>
<a class="flex align-middle items-center pr-6" href=".">
<img class="w-6 rounded-full" src="{$session.user.image}" alt="profile avatar" />
<span class="pl-2">{$session.user.name}</span>
</a>
</div>
{:else}
<div>
<a class="flex align-middle items-center pr-6" href="/login" aria-current='{segment === "login" ? "page" : undefined}' >
<span class="pl-2">Login</span>
</a>
</div>
{/if}
</div>

{#if $session.user}
<div
class="md:hidden flex align-middle items-center justify-between px-6 py-2">
<div>
<div class="cursor-pointer" on:click={() => (active = !active)}>
<i class="material-icons-outlined align-middle">menu</i>
</div>
</div>
<div on:click={logout}>
<p class="pl-2">Logout</p>
</div>
</div>
{:else}
<div
class="md:hidden flex flex-row-reverse align-middle items-center
justify-between px-6 py-2">
<div>
<a
class="flex align-middle items-center"
href="/login"
aria-current={segment === 'login' ? 'page' : undefined}>
<span class="pl-2">Login</span>
</a>
</div>
<div on:click={logout}>
<p class="pl-2">Logout</p>
</div>
</div>
{/if}

<div
class="hidden md:flex flex-row align-middle items-center justify-between">
<div class="flex align-middle items-center">
<a
href="/"
aria-current={segment === undefined ? 'page' : undefined}
on:click={logout}>
<p class="pl-2">Logout</p>
</a>
<span class="h-10 w-px bg-gray-900 align-middle mx-6" />
{#if $session.user && $page.path.includes('/account/')}
<div class="cursor-pointer" on:click={() => (active = !active)}>
{activeName ? activeName : 'DEBUG'}
<i class="material-icons-outlined align-middle pl-3">menu</i>
</div>
{/if}
{#if $session.user}
<div class="cursor-pointer" on:click={() => (active = !active)}>
Account Name
<i class="material-icons-outlined align-middle pl-3">menu</i>
</div>
{/if}
</div>
{#if $session.user}
<div>
<a class="flex align-middle items-center pr-6" href=".">
<img
class="w-6 rounded-full"
src={$session.user.image}
alt="profile avatar" />
<span class="pl-2">{$session.user.name}</span>
</a>
</div>
{:else}
<div>
<a
class="flex align-middle items-center pr-6"
href="/login"
aria-current={segment === 'login' ? 'page' : undefined}>
<span class="pl-2">Login</span>
</a>
</div>
{/if}
</div>
</nav>
<Sidebar bind:toggle={active} />
<Sidebar bind:toggle={active} />
114 changes: 54 additions & 60 deletions src/components/UI/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

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);
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 { accounts } from "../../store/accounts";

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 && $accounts.length > 0}
{#each $accounts 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}"
rel="prefetch"
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">
Expand All @@ -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> -->
7 changes: 0 additions & 7 deletions src/helpers/accountData.js
View file
Open in desktop

This file was deleted.

42 changes: 29 additions & 13 deletions src/routes/_layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,46 @@
<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)) {
return this.redirect(302, "accounts");
} else if (!user && loginRoutes.includes(path)) {
return this.redirect(302, "login");
}

return { user, token };
}
</script>

<script>
import Nav from '../components/Nav.svelte';
import { onMount, afterUpdate, beforeUpdate } from "svelte";
import * as api from "api.js";
import { stores } from "@sapper/app";
import { accounts } from "../store/accounts";
import Nav from "../components/Nav.svelte";

export let segment;
</script>
const { session } = stores();

<Nav {segment}/>
export let segment;

afterUpdate(async () => {
if ($session.user._id && $accounts.length === 0) {
console.log("this is only once done to avoid persisting data");
const res = await api.get(`accounts/`, $session.token, $session.user._id);
const accountData = await res.data;
if (!accountData) {
return console.log("No Account Data Returned 😭");
}
accounts.setupAccounts(accountData);
}
});
</script>

<Nav {segment} />
<main class="h-nav-mobile w-screen md:h-nav-desktop">
<slot></slot>
</main>
<slot />
</main>
Loading