fixed boosts not displaying properly; among

This commit is contained in:
ari melody 2024-06-29 23:10:29 +01:00
parent 5db825d97e
commit f2c96d5968
Signed by: ari
GPG key ID: CF99829C92678188
12 changed files with 70 additions and 74 deletions

View file

@ -256,7 +256,7 @@ export async function parsePost(data, ancestor_count, with_context) {
post.reply_count = data.replies_count; post.reply_count = data.replies_count;
post.favourite_count = data.favourites_count; post.favourite_count = data.favourites_count;
post.favourited = data.favourited; post.favourited = data.favourited;
post.boosted = data.boosted; post.boosted = data.reblogged;
post.mentions = data.mentions; post.mentions = data.mentions;
post.files = data.media_attachments; post.files = data.media_attachments;
post.url = data.url; post.url = data.url;
@ -302,7 +302,7 @@ export async function parseUser(data) {
if (data.acct.includes('@')) if (data.acct.includes('@'))
user.host = data.acct.split('@')[1]; user.host = data.acct.split('@')[1];
else else
user.host = get(Client.get()).instance.host; user.host = client.instance.host;
user.emojis = []; user.emojis = [];
data.emojis.forEach(emoji_data => { data.emojis.forEach(emoji_data => {
@ -312,7 +312,7 @@ export async function parseUser(data) {
user.emojis.push(parseEmoji(emoji_data)); user.emojis.push(parseEmoji(emoji_data));
}); });
get(Client.get()).putCacheUser(user); client.putCacheUser(user);
return user; return user;
} }

View file

@ -23,10 +23,9 @@ export class Client {
} }
static get() { static get() {
if (get(client)) return client; let current = get(client);
if (current && current.app) return client;
let new_client = new Client(); let new_client = new Client();
if (typeof window !== typeof undefined)
window.peekie = new_client;
new_client.load(); new_client.load();
client.set(new_client); client.set(new_client);
return client; return client;
@ -45,13 +44,13 @@ export class Client {
if (this.instance.type == server_types.UNSUPPORTED) { if (this.instance.type == server_types.UNSUPPORTED) {
console.warn(`Server ${host} is unsupported - ${data.version}`); console.warn(`Server ${host} is unsupported - ${data.version}`);
if (!confirm( if (!confirm(
`This app does not officially support ${host}. ` + `This app does not officially support ${host}. ` +
`Things may break, or otherwise not work as epxected! ` + `Things may break, or otherwise not work as epxected! ` +
`Are you sure you wish to continue?` `Are you sure you wish to continue?`
)) return false; )) return false;
} else { } else {
console.log(`Server is "${this.instance.type}" (or compatible) with capabilities: [${this.instance.capabilities}].`); console.log(`Server is "${this.instance.type}" (or compatible) with capabilities: [${this.instance.capabilities}].`);
} }
this.app = await api.createApp(host); this.app = await api.createApp(host);
@ -86,13 +85,20 @@ export class Client {
} }
async verifyCredentials() { async verifyCredentials() {
if (this.user) return this.user;
if (!this.app || !this.app.token) {
this.user = false;
return false;
}
const data = await api.verifyCredentials(); const data = await api.verifyCredentials();
if (!data) { if (!data) {
this.user = false; this.user = false;
return false; return false;
} }
this.user = await api.parseUser(data); await client.update(async c => {
client.set(this); c.user = await api.parseUser(data);
console.log(`Logged in as @${c.user.username}@${c.user.host}`);
});
return this.user; return this.user;
} }

View file

@ -4,13 +4,14 @@ import { parsePost } from '$lib/client/api.js';
export let posts = writable([]); export let posts = writable([]);
let client = get(Client.get());
let loading = false; let loading = false;
export async function getTimeline(clean) { export async function getTimeline(clean) {
if (loading) return; // no spamming!! if (loading) return; // no spamming!!
loading = true; loading = true;
let client = get(Client.get());
let timeline_data; let timeline_data;
if (clean || get(posts).length === 0) timeline_data = await client.getTimeline() if (clean || get(posts).length === 0) timeline_data = await client.getTimeline()
else timeline_data = await client.getTimeline(get(posts)[get(posts).length - 1].id); else timeline_data = await client.getTimeline(get(posts)[get(posts).length - 1].id);

View file

@ -7,9 +7,10 @@
import { play_sound } from '$lib/sound.js'; import { play_sound } from '$lib/sound.js';
import { getTimeline } from '$lib/timeline.js'; import { getTimeline } from '$lib/timeline.js';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { get } from 'svelte/store';
const VERSION = APP_VERSION; const VERSION = APP_VERSION;
let client = false; let client = false;
Client.get().subscribe(c => { Client.get().subscribe(c => {
client = c; client = c;
@ -30,11 +31,10 @@
goto("/"); goto("/");
} }
function log_out() { async function log_out() {
if (!confirm("This will log you out. Are you sure?")) return; if (!confirm("This will log you out. Are you sure?")) return;
client.logout().then(() => { await get(Client.get()).logout();
location = "/"; goto("/");
});
} }
</script> </script>
@ -51,7 +51,7 @@
{/if} {/if}
<div id="nav-items"> <div id="nav-items">
<Button label="Timeline" on:click={() => goTimeline()} active>🖼️ Timeline</Button> <Button label="Timeline" on:click={() => goTimeline()} active={client.user}>🖼️ Timeline</Button>
<Button label="Notifications" disabled> <Button label="Notifications" disabled>
🔔 Notifications 🔔 Notifications
{#if notification_count} {#if notification_count}

View file

@ -42,8 +42,8 @@
console.error(`Failed to boost post ${post.id}`); console.error(`Failed to boost post ${post.id}`);
return; return;
} }
post.boosted = data.boosted; post.boosted = data.reblog ? data.reblog.reblogged : data.boosted;
post.boost_count = data.reblogs_count; post.boost_count = data.reblog ? data.reblog.reblogs_count : data.reblogs_count;
} }
async function toggleFavourite() { async function toggleFavourite() {
@ -88,8 +88,6 @@
}); });
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at; let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
if (post.reply && post.reply.id === undefined) console.log(post);
</script> </script>
<div class="post-container"> <div class="post-container">
@ -128,8 +126,8 @@
</div> </div>
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation> <div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton> <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton> <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton> <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
<ActionButton type="react" label="React" disabled>😃</ActionButton> <ActionButton type="react" label="React" disabled>😃</ActionButton>
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton> <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
<ActionButton type="more" label="More" disabled>🛠️</ActionButton> <ActionButton type="more" label="More" disabled>🛠️</ActionButton>

View file

@ -108,8 +108,8 @@
</div> </div>
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation> <div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton> <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton> <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton> <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
<ActionButton type="react" label="React" disabled>😃</ActionButton> <ActionButton type="react" label="React" disabled>😃</ActionButton>
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton> <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
<ActionButton type="more" label="More" disabled>🛠️</ActionButton> <ActionButton type="more" label="More" disabled>🛠️</ActionButton>

View file

@ -1,2 +1,15 @@
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 prerender = true;
export const ssr = false; export const ssr = false;
export async function load() {
let client = get(Client.get());
await client.verifyCredentials();
return {
client: client
};
}

View file

@ -1,28 +1,19 @@
<script> <script>
import LogoLight from '$lib/../img/spacesocial-logo-light.svg';
import LogoDark from '$lib/../img/spacesocial-logo-dark.svg';
import Feed from '$lib/ui/Feed.svelte'; import Feed from '$lib/ui/Feed.svelte';
import { Client } from '$lib/client/client.js'; import { Client } from '$lib/client/client.js';
import User from '$lib/user/user.js';
import Button from '$lib/ui/Button.svelte'; import Button from '$lib/ui/Button.svelte';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
let client = get(Client.get()); export let data;
let logged_in;
let client = data.client;
let logged_in = client.user && client.user.constructor === User;
let instance_url_error = false; let instance_url_error = false;
let logging_in = false; let logging_in = false;
if (client.app && client.app.token) {
// this triggers the client actually getting the authenticated user's data.
client.verifyCredentials().then(user => {
if (user) {
console.log(`Logged in as @${user.username}@${user.host}`);
logged_in = true;
} else {
logged_in = false;
}
});
} else {
logged_in = false;
}
function log_in(event) { function log_in(event) {
event.preventDefault(); event.preventDefault();
instance_url_error = false; instance_url_error = false;
@ -49,11 +40,18 @@
} }
</script> </script>
{#if logged_in === undefined} {#if logged_in}
<div class="loading throb"> <header>
<span>just a moment...</span> <h1>Home</h1>
</div> <nav>
{:else if logged_in === false} <Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<Feed />
{:else}
<form on:submit={log_in} id="login-form"> <form on:submit={log_in} id="login-form">
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/> <img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/> <img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
@ -77,17 +75,6 @@
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p> <p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form> </form>
{:else}
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<Feed />
{/if} {/if}
<style> <style>

View file

@ -1 +0,0 @@
<slot/>

View file

@ -11,7 +11,7 @@ export async function load({ params, url }) {
if (auth_code) { if (auth_code) {
client.getToken(auth_code).then(() => { client.getToken(auth_code).then(() => {
client.save(); client.save();
goto(url.origin); goto("/");
}); });
} }
error(400, { error(400, {

View file

@ -3,19 +3,11 @@ import { Client } from '$lib/client/client.js';
import { parsePost } from '$lib/client/api.js'; import { parsePost } from '$lib/client/api.js';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
export const ssr = false;
export async function load({ params }) { export async function load({ params }) {
let client = get(Client.get()); let client = get(Client.get());
if (client.app && client.app.token) { await client.verifyCredentials();
// this triggers the client actually getting the authenticated user's data.
const res = await client.verifyCredentials()
if (res) {
console.log(`Logged in as @${client.user.username}@${client.user.host}`);
} else {
return null;
}
} else {
return null;
}
const post_id = params.id; const post_id = params.id;