forked from blisstown/campfire
i think i finally fixed the state management awfulness
This commit is contained in:
parent
6953b49563
commit
40be540527
GPG key ID:
CF99829C92678188
18 changed files with 402 additions and 417 deletions
|
|
@ -2,10 +2,26 @@
|
|||
import '$lib/app.css';
|
||||
import Navigation from '$lib/ui/Navigation.svelte';
|
||||
import Widgets from '$lib/ui/Widgets.svelte';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
import { client, Client } from '$lib/client/client.js';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
let client = get(Client.get());
|
||||
let ready = new Promise(resolve => {
|
||||
if (get(client)) {
|
||||
return resolve();
|
||||
}
|
||||
let new_client = new Client();
|
||||
new_client.load();
|
||||
|
||||
return new_client.getUser().then(user => {
|
||||
if (!user) {
|
||||
client.set(new_client);
|
||||
return resolve();
|
||||
}
|
||||
new_client.user = user;
|
||||
client.set(new_client);
|
||||
return resolve();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="app">
|
||||
|
|
@ -15,7 +31,7 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
{#await client.verifyCredentials()}
|
||||
{#await ready}
|
||||
<div class="loading throb">
|
||||
<span>just a moment...</span>
|
||||
</div>
|
||||
|
|
@ -29,3 +45,15 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,2 @@
|
|||
import Feed from '$lib/ui/Feed.svelte';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
import Button from '$lib/ui/Button.svelte';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
|
||||
export async function load() {
|
||||
let client = get(Client.get());
|
||||
await client.verifyCredentials();
|
||||
return {
|
||||
client: client
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,92 +1,19 @@
|
|||
<script>
|
||||
import Logo from '$lib/../img/campfire-logo.svg';
|
||||
import { client } from '$lib/client/client.js';
|
||||
|
||||
import LoginForm from '$lib/ui/LoginForm.svelte';
|
||||
import Feed from '$lib/ui/Feed.svelte';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
import User from '$lib/user/user.js';
|
||||
import Button from '$lib/ui/Button.svelte';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
export let data;
|
||||
|
||||
let client = data.client;
|
||||
let logged_in = client.user && client.user.constructor === User;
|
||||
let instance_url_error = false;
|
||||
let logging_in = false;
|
||||
|
||||
function log_in(event) {
|
||||
event.preventDefault();
|
||||
instance_url_error = false;
|
||||
|
||||
logging_in = true;
|
||||
const host = event.target.host.value;
|
||||
|
||||
if (!host || host === "") {
|
||||
instance_url_error = "Please enter an instance domain.";
|
||||
logging_in = false;
|
||||
return;
|
||||
}
|
||||
|
||||
client.init(host).then(res => {
|
||||
logging_in = false;
|
||||
if (!res) return;
|
||||
if (res.constructor === String) {
|
||||
instance_url_error = res;
|
||||
return;
|
||||
};
|
||||
let oauth_url = client.getOAuthUrl();
|
||||
location = oauth_url;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if logged_in}
|
||||
<header>
|
||||
<h1>Home</h1>
|
||||
<nav>
|
||||
<Button centered active>Home</Button>
|
||||
<Button centered disabled>Local</Button>
|
||||
<Button centered disabled>Federated</Button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{#if $client.user}
|
||||
<Feed />
|
||||
{:else}
|
||||
<form on:submit={log_in} id="login-form">
|
||||
<div class="app-logo">
|
||||
<Logo />
|
||||
</div>
|
||||
<p>Welcome, fediverse user!</p>
|
||||
<p>Please enter your instance domain to log in.</p>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
|
||||
{#if instance_url_error}
|
||||
<p class="error">{instance_url_error}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<br>
|
||||
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
|
||||
<p><small>
|
||||
Please note this is
|
||||
<strong><em>extremely experimental software</em></strong>;
|
||||
things are likely to break!
|
||||
<br>
|
||||
If that's all cool with you, welcome aboard!
|
||||
</small></p>
|
||||
|
||||
<p class="form-footer">made with ❤ by <a href="https://bliss.town">bliss town</a>, 2024</p>
|
||||
</form>
|
||||
<LoginForm />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
form#login-form {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
|
@ -96,106 +23,6 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--accent);
|
||||
background-color: var(--bg-800);
|
||||
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
font-size: inherit;
|
||||
color: var(--text);
|
||||
|
||||
transition: box-shadow .2s;
|
||||
}
|
||||
|
||||
input[type=text]::placeholder {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 25%);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 6px;
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
color: red;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
button#login {
|
||||
margin: 8px auto;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
|
||||
border-radius: 8px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
|
||||
background-color: var(--bg-700);
|
||||
color: var(--text);
|
||||
border-color: transparent;
|
||||
|
||||
transition-property: border-color, background-color, color;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: .1s;
|
||||
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button#login:hover {
|
||||
background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
|
||||
border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
|
||||
}
|
||||
|
||||
button#login:active {
|
||||
background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
|
||||
border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
|
||||
}
|
||||
|
||||
button#login.disabled {
|
||||
opacity: .5;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
margin: 16px 0 8px 0;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,5 @@
|
|||
import { Client } from '$lib/client/client.js';
|
||||
import { goto } from '$app/navigation';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
export const ssr = false;
|
||||
|
||||
export async function load({ params, url }) {
|
||||
const client = get(Client.get());
|
||||
let auth_code = url.searchParams.get("code");
|
||||
if (auth_code) {
|
||||
client.getToken(auth_code).then(() => {
|
||||
client.save();
|
||||
goto("/");
|
||||
});
|
||||
}
|
||||
error(400, {
|
||||
message: "Bad request"
|
||||
});
|
||||
export async function load({ url }) {
|
||||
return {
|
||||
code: url.searchParams.get("code") || false
|
||||
};
|
||||
}
|
||||
|
|
|
|||
35
src/routes/callback/+page.svelte
Normal file
35
src/routes/callback/+page.svelte
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
import { client } from '$lib/client/client.js';
|
||||
import { goto } from '$app/navigation';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
export let data;
|
||||
|
||||
let auth_code = data.code;
|
||||
|
||||
if (!auth_code) {
|
||||
error(400, { message: "Bad request" });
|
||||
} else {
|
||||
get(client).getToken(auth_code).then(token => {
|
||||
if (!token) {
|
||||
error(400, { message: "Invalid auth code provided" });
|
||||
return;
|
||||
}
|
||||
|
||||
client.update(c => {
|
||||
c.app.token = token;
|
||||
c.save();
|
||||
return c;
|
||||
});
|
||||
|
||||
get(client).getUser().then(user => {
|
||||
if (user) client.update(client => {
|
||||
client.user = user
|
||||
return client;
|
||||
});
|
||||
goto("/");
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,39 +1,5 @@
|
|||
import Post from '$lib/ui/post/Post.svelte';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
import { parsePost } from '$lib/client/api.js';
|
||||
import { get } from 'svelte/store';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export const ssr = false;
|
||||
|
||||
export async function load({ params }) {
|
||||
let client = get(Client.get());
|
||||
|
||||
if (!client.instance || !client.user) {
|
||||
goto("/");
|
||||
}
|
||||
|
||||
const post_id = params.id;
|
||||
|
||||
const post_data = await client.getPost(post_id);
|
||||
if (!post_data) {
|
||||
console.error(`Failed to retrieve post ${post_id}.`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const post = await parsePost(post_data, 10, true);
|
||||
let posts = [post];
|
||||
for (let i in post.replies) {
|
||||
const reply = post.replies[i];
|
||||
// if (i > 1 && reply.reply_id === post.replies[i - 1].id) {
|
||||
// let reply_head = posts.pop();
|
||||
// reply.reply = reply_head;
|
||||
// }
|
||||
posts.push(reply);
|
||||
// console.log(reply);
|
||||
}
|
||||
|
||||
return {
|
||||
posts: posts
|
||||
post_id: params.id
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,80 @@
|
|||
<script>
|
||||
import '$lib/app.css';
|
||||
import { client } from '$lib/client/client.js';
|
||||
import * as api from '$lib/client/api.js';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import Post from '$lib/ui/post/Post.svelte';
|
||||
import Button from '$lib/ui/Button.svelte';
|
||||
|
||||
export let data;
|
||||
$: main_post = data.posts[0];
|
||||
$: replies = data.posts.slice(1);
|
||||
let error = false;
|
||||
|
||||
if (!get(client).instance || !get(client).user) {
|
||||
goto("/");
|
||||
}
|
||||
|
||||
$: post = (async resolve => {
|
||||
const post_data = await get(client).getPost(data.post_id, 0, false);
|
||||
if (!post_data) {
|
||||
error = `Failed to retrieve post <code>${data.post_id}</code>.`;
|
||||
console.error(`Failed to retrieve post ${data.post_id}.`);
|
||||
return;
|
||||
}
|
||||
let post = await api.parsePost(post_data, 0, false);
|
||||
|
||||
const post_context = await get(client).getPostContext(data.post_id);
|
||||
|
||||
if (!post_context || !post_context.ancestors || !post_context.descendants)
|
||||
return post;
|
||||
|
||||
// handle ancestors (above post)
|
||||
let thread_top = post;
|
||||
while (post_context.ancestors.length > 0) {
|
||||
thread_top.reply = await api.parsePost(post_context.ancestors.pop(), 0, false);
|
||||
thread_top = thread_top.reply;
|
||||
}
|
||||
|
||||
// handle descendants (below post)
|
||||
post.replies = [];
|
||||
for (let i in post_context.descendants) {
|
||||
post.replies.push(
|
||||
api.parsePost(post_context.descendants[i], 0, false)
|
||||
);
|
||||
}
|
||||
|
||||
console.log(post);
|
||||
return post;
|
||||
})();
|
||||
</script>
|
||||
|
||||
{#if !error}
|
||||
<header>
|
||||
<h1>Home</h1>
|
||||
{#await post then post}
|
||||
<h1>Post by {@html post.user.rich_name}</h1>
|
||||
{/await}
|
||||
<nav>
|
||||
<Button centered active>Home</Button>
|
||||
<Button centered disabled>Local</Button>
|
||||
<Button centered disabled>Federated</Button>
|
||||
<Button centered>Back</Button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="feed" role="feed">
|
||||
{#if data.posts.length <= 0}
|
||||
{#await post}
|
||||
<div class="throb">
|
||||
<span>just a moment...</span>
|
||||
<span>loading post...</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#key data}
|
||||
<Post post_data={main_post} focused />
|
||||
{:then post}
|
||||
<Post post_data={post} focused />
|
||||
<br>
|
||||
{#each replies as post}
|
||||
<Post post_data={post} />
|
||||
{#each post.replies as reply}
|
||||
{#await reply then reply}
|
||||
<Post post_data={reply} />
|
||||
{/await}
|
||||
{/each}
|
||||
{/key}
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
{:else}
|
||||
<p>{@html error}</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
header {
|
||||
|
|
@ -42,7 +85,11 @@
|
|||
}
|
||||
|
||||
header h1 {
|
||||
margin: auto auto auto 8px;
|
||||
font-size: 1.5em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
header nav {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue