msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

show list of apps belonging to user

Browse Source
pull/3424/head
Richard Harris 5 years ago
parent 90ecf90963
commit bd5f69ded4
8 changed files with 179 additions and 80 deletions
Show Stats Download Patch File Download Diff File

25
site/src/routes/_layout.svelte
Unescape View File

@ -1,11 +1,32 @@
<script>
import { setContext } from 'svelte';
import { stores } from '@sapper/app';
import { Icon, Icons, Nav, NavItem } from '@sveltejs/site-kit';
import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
const { page, preloading } = stores();
export let segment;
const { page, preloading, session } = stores();
setContext('app', {
login: () => {
const login_window = window.open(`${window.location.origin}/auth/login`, 'login', 'width=600,height=400');
window.addEventListener('message', function handler(event) {
login_window.close();
window.removeEventListener('message', handler);
$session.user = event.data.user;
});
},
logout: async () => {
const r = await fetch(`/auth/logout`, {
credentials: 'include'
});
if (r.ok) $session.user = null;
}
});
</script>
<Icons/>

20
site/src/routes/apps/index.json.js
Unescape View File

@ -0,0 +1,20 @@
import send from '@polka/send';
import { query } from '../../utils/db';
export async function get(req, res) {
if (req.user) {
const offset = req.params.offset || 0;
const rows = await query(`
select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
from gists g
where g.user_id = $1
order by updated_at desc
limit 100
offset $2
`, [req.user.id, offset]);
send(res, 200, rows);
} else {
send(res, 401);
}
}

130
site/src/routes/apps/index.svelte
Unescape View File

@ -0,0 +1,130 @@
<script context="module">
export async function preload(page, { user }) {
let apps;
if (user) {
const r = await this.fetch('apps.json', {
credentials: 'include'
});
if (!r.ok) return this.error(r.status, await r.text());
apps = await r.json();
}
return { user, apps };
}
</script>
<script>
import { getContext } from 'svelte';
export let user;
export let apps;
const { login, logout } = getContext('app');
const formatter = new Intl.DateTimeFormat(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit'
});
const format = str => formatter.format(new Date(str));
</script>
<svelte:head>
<title>Your apps • Svelte</title>
</svelte:head>
<div class="apps">
{#if user}
<header>
<h1>Your apps</h1>
<div class="user">
<img class="avatar" alt="{user.name} avatar" src="{user.avatar}">
<span>
{user.name}
(<a on:click|preventDefault={logout} href="auth/logout">log out</a>)
</span>
</div>
</header>
<ul>
{#each apps as app}
<li>
<a href="repl/{app.uid}">
<h2>{app.name}</h2>
<span>updated {format(app.updated_at)}</span>
</a>
</li>
{/each}
</ul>
{:else}
<p>Please <a on:click|preventDefault={login} href="auth/login">log in</a> to see your saved apps.</p>
{/if}
</div>
<style>
.apps {
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
max-width: var(--main-width);
margin: 0 auto;
}
header {
margin: 0 0 1em 0;
}
h1 {
font-size: 4rem;
font-weight: 400;
}
.user {
display: flex;
padding: 0 0 0 3.2rem;
position: relative;
margin: 1rem 0 5rem 0;
color: var(--text);
}
.avatar {
position: absolute;
left: 0;
top: 0.1rem;
width: 2.4rem;
height: 2.4rem;
border: 1px solid rgba(0,0,0,0.3);
border-radius: 0.2rem;
}
ul {
list-style: none;
}
li {
margin: 0 0 1em 0;
}
h2 {
color: var(--text);
font-size: var(--h3);
font-weight: 400;
}
li a {
border: none;
}
li a:hover h2 {
color: var(--flash);
}
li span {
font-size: 14px;
color: #999;
}
</style>

11
site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
Unescape View File

@ -1,14 +1,9 @@
<script>
import { getContext } from 'svelte';
import { stores } from '@sapper/app';
const { session } = stores();
const logout = async () => {
const r = await fetch(`/auth/logout`, {
credentials: 'include'
});
if (r.ok) $session.user = null;
}
const { logout } = getContext('app');
let showMenu = false;
let name;
@ -22,7 +17,7 @@
{#if showMenu}
<div class="menu">
<a href="repls/saved">Your saved REPLs</a>
<a href="apps">Your saved apps</a>
<button on:click={logout}>Log out</button>
</div>
{/if}

18
site/src/routes/repl/[id]/_components/AppControls/index.svelte
Unescape View File

@ -1,5 +1,5 @@
<script>
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, getContext } from 'svelte';
import { stores } from '@sapper/app';
import UserMenu from './UserMenu.svelte';
import { Icon } from '@sveltejs/site-kit';
@ -10,6 +10,7 @@
const dispatch = createEventDispatcher();
const { session } = stores();
const { login } = getContext('app');
export let repl;
export let gist;
@ -35,19 +36,6 @@
}
}
function login(event) {
event.preventDefault();
const loginWindow = window.open(`${window.location.origin}/auth/login`, 'login', 'width=600,height=400');
const handleLogin = event => {
loginWindow.close();
$session.user = event.data.user;
window.removeEventListener('message', handleLogin);
};
window.addEventListener('message', handleLogin);
}
async function fork(intentWasSave) {
saving = true;
@ -218,7 +206,7 @@ export default app;` });
{#if $session.user}
<UserMenu/>
{:else}
<button class="icon" on:click={login}>
<button class="icon" on:click|preventDefault={login}>
<Icon name="log-in" />
<span>&nbsp;Log in to save</span>
</button>

20
site/src/routes/repl/archive.json.js
Unescape View File

@ -1,20 +0,0 @@
import send from '@polka/send';
import { query } from '../../utils/db';
import { isUser } from '../../backend/auth';
export async function get(req, res) {
const user = await isUser(req, res);
if (!user) return; // response already sent
const offset = req.params.offset || 0;
const rows = await query(`
select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
from gists g
where g.user_id = $1
order by g.updated_at desc, g.created_at desc
limit 100
offset $2
`, [user.id, offset]);
send(res, 200, rows);
}

20
site/src/routes/repls/index.json.js
Unescape View File

@ -1,20 +0,0 @@
import send from '@polka/send';
import { query } from '../../utils/db';
import { isUser } from '../../backend/auth';
export async function get(req, res) {
const user = await isUser(req, res);
if (!user) return; // response already sent
const offset = req.params.offset || 0;
const rows = await query(`
select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
from gists g
where g.user_id = $1
order by g.updated_at desc, g.created_at desc
limit 100
offset $2
`, [user.id, offset]);
send(res, 200, rows);
}

15
site/src/routes/repls/index.svelte
Unescape View File

@ -1,15 +0,0 @@
<!-- TODO we need to be able to fetch the data in preload -->
<script context="module">
export async function preload() {
const r = await this.fetch('repls.json');
return {
list: await r.json()
};
}
</script>
<script>
export let list;
</script>
Write Preview
Loading…
Cancel
Save