fixed boosts not displaying properly; among

2024-06-29 23:10:29 +01:00 · 2024-06-29 23:10:29 +01:00 · f2c96d5968
parent 5db825d97e
commit f2c96d5968
12 changed files with 70 additions and 74 deletions
--- a/src/lib/client/api.js
+++ b/src/lib/client/api.js
@ -256,7 +256,7 @@ export async function parsePost(data, ancestor_count, with_context) {
    post.reply_count = data.replies_count;
    post.favourite_count = data.favourites_count;
    post.favourited = data.favourited;
-    post.boosted = data.boosted;
+    post.boosted = data.reblogged;
    post.mentions = data.mentions;
    post.files = data.media_attachments;
    post.url = data.url;
@ -302,7 +302,7 @@ export async function parseUser(data) {
    if (data.acct.includes('@'))
        user.host = data.acct.split('@')[1];
    else
-        user.host = get(Client.get()).instance.host;
+        user.host = client.instance.host;

    user.emojis = [];
    data.emojis.forEach(emoji_data => {
@ -312,7 +312,7 @@ export async function parseUser(data) {
        user.emojis.push(parseEmoji(emoji_data));
    });

-    get(Client.get()).putCacheUser(user);
+    client.putCacheUser(user);
    return user;
 }

--- a/src/lib/client/client.js
+++ b/src/lib/client/client.js
@ -23,10 +23,9 @@ export class Client {
    }

    static get() {
-        if (get(client)) return client;
+        let current = get(client);
+        if (current && current.app) return client;
        let new_client = new Client();
-        if (typeof window !== typeof undefined)
-            window.peekie = new_client;
        new_client.load();
        client.set(new_client);
        return client;
@ -45,13 +44,13 @@ export class Client {
        if (this.instance.type == server_types.UNSUPPORTED) {
            console.warn(`Server ${host} is unsupported - ${data.version}`);
            if (!confirm(
-		`This app does not officially support ${host}. ` +
-		`Things may break, or otherwise not work as epxected! ` +
-		`Are you sure you wish to continue?`
-	    )) return false;
+                `This app does not officially support ${host}. ` +
+                `Things may break, or otherwise not work as epxected! ` +
+                `Are you sure you wish to continue?`
+            )) return false;
        } 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);

@ -86,13 +85,20 @@ export class Client {
    }

    async verifyCredentials() {
+        if (this.user) return this.user;
+        if (!this.app || !this.app.token) {
+            this.user = false;
+            return false;
+        }
        const data = await api.verifyCredentials();
        if (!data) {
            this.user = false;
            return false;
        }
-        this.user = await api.parseUser(data);
-        client.set(this);
+        await client.update(async c => {
+            c.user = await api.parseUser(data);
+            console.log(`Logged in as @${c.user.username}@${c.user.host}`);
+        });
        return this.user;
    }

--- a/src/lib/timeline.js
+++ b/src/lib/timeline.js
@ -4,13 +4,14 @@ import { parsePost } from '$lib/client/api.js';

 export let posts = writable([]);

-let client = get(Client.get());
 let loading = false;

 export async function getTimeline(clean) {
    if (loading) return; // no spamming!!
    loading = true;

+    let client = get(Client.get());
+
    let timeline_data;
    if (clean || get(posts).length === 0) timeline_data = await client.getTimeline()
    else timeline_data = await client.getTimeline(get(posts)[get(posts).length - 1].id);
--- a/src/lib/ui/Navigation.svelte
+++ b/src/lib/ui/Navigation.svelte
@ -7,6 +7,7 @@
    import { play_sound } from '$lib/sound.js';
    import { getTimeline } from '$lib/timeline.js';
    import { goto } from '$app/navigation';
+    import { get } from 'svelte/store';

    const VERSION = APP_VERSION;
    
@ -30,11 +31,10 @@
        goto("/");
    }

-    function log_out() {
+    async function log_out() {
        if (!confirm("This will log you out. Are you sure?")) return;
-        client.logout().then(() => {
-            location = "/";
-        });
+        await get(Client.get()).logout();
+        goto("/");
    }
 </script>

@ -51,7 +51,7 @@
    {/if}

    <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>
            🔔 Notifications
            {#if notification_count}
--- a/src/lib/ui/post/Post.svelte
+++ b/src/lib/ui/post/Post.svelte
@ -42,8 +42,8 @@
            console.error(`Failed to boost post ${post.id}`);
            return;
        }
-        post.boosted = data.boosted;
-        post.boost_count = data.reblogs_count;
+        post.boosted = data.reblog ? data.reblog.reblogged : data.boosted;
+        post.boost_count = data.reblog ? data.reblog.reblogs_count : data.reblogs_count;
    }

    async function toggleFavourite() {
@ -88,8 +88,6 @@
    });

    let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
-
-    if (post.reply && post.reply.id === undefined) console.log(post);
 </script>

 <div class="post-container">
@ -128,8 +126,8 @@
            </div>
            <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="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="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="react" label="React" disabled>😃</ActionButton>
                <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
                <ActionButton type="more" label="More" disabled>🛠️</ActionButton>
--- a/src/lib/ui/post/ReplyContext.svelte
+++ b/src/lib/ui/post/ReplyContext.svelte
@ -108,8 +108,8 @@
            </div>
            <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="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="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="react" label="React" disabled>😃</ActionButton>
                <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
                <ActionButton type="more" label="More" disabled>🛠️</ActionButton>
--- a/src/routes/+page.js
+++ b/src/routes/+page.js
@ -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 ssr = false;
+
+export async function load() {
+    let client = get(Client.get());
+    await client.verifyCredentials();
+    return { 
+        client: client
+    };
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,28 +1,19 @@
 <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 { 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';

-    let client = get(Client.get());
-    let logged_in;
+    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;

-    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) {
        event.preventDefault();
        instance_url_error = false;
@ -49,11 +40,18 @@
    }
 </script>

-{#if logged_in === undefined}
-    <div class="loading throb">
-        <span>just a moment...</span>
-    </div>
-{:else if logged_in === false}
+{#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>
+
+    <Feed />
+{:else}
    <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 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>
    </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}

 <style>
--- a/src/routes/callback/+layout.svelte
+++ b/src/routes/callback/+layout.svelte
@ -1 +0,0 @@
-<slot/>
--- a/src/routes/callback/+page.js
+++ b/src/routes/callback/+page.js
@ -11,7 +11,7 @@ export async function load({ params, url }) {
    if (auth_code) {
        client.getToken(auth_code).then(() => {
            client.save();
-            goto(url.origin);
+            goto("/");
        });
    }
    error(400, {
--- a/src/routes/callback/+page.svelte
+++ b/src/routes/callback/+page.svelte
--- a/src/routes/post/[id]/+page.js
+++ b/src/routes/post/[id]/+page.js
@ -3,19 +3,11 @@ import { Client } from '$lib/client/client.js';
 import { parsePost } from '$lib/client/api.js';
 import { get } from 'svelte/store';

+export const ssr = false;
+
 export async function load({ params }) {
    let client = get(Client.get());
-    if (client.app && client.app.token) {
-        // 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;
-    }
+    await client.verifyCredentials();

    const post_id = params.id;