i think i finally fixed the state management awfulness

This commit is contained in:
ari melody 2024-07-01 03:41:02 +01:00
parent 6953b49563
commit 40be540527
Signed by: ari
GPG key ID: CF99829C92678188
18 changed files with 402 additions and 417 deletions

View file

@ -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>

View file

@ -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
};
}

View file

@ -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;

View file

@ -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
};
}

View 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>

View file

@ -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
};
}

View file

@ -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 {