refactor: timeline into its own component

fix: bug with last_post not clearing when changing
This commit is contained in:
mae taylor 2025-07-23 21:13:36 +01:00
parent 389f8dcaff
commit cd5dc461f6
Signed by: mae
GPG key ID: 3C80D76BA7A3B9BD
3 changed files with 85 additions and 46 deletions

View file

@ -71,3 +71,8 @@ export async function getTimeline(timelineType = "home", clean, localOnly = fals
}
loading = false;
}
export function clearTimeline() {
timeline.set([]);
last_post = false;
}

View file

@ -0,0 +1,78 @@
<script>
import { page } from '$app/stores';
import { account } from '$lib/stores/account.js';
import { timeline, getTimeline, clearTimeline } from '$lib/timeline.js';
import { app_name } from '$lib/config.js';
import Post from '$lib/ui/post/Post.svelte';
import Lang from '$lib/lang';
const lang = Lang();
// TODO: refactor to enum when moving to TS
export let timelineType;
$: {
// awful hack to update timeline fresh
// when timelineType is updated
//
// TODO: migrate to $effect when migrating to svelte 5
timelineType = timelineType
clearTimeline()
getCurrentTimeline()
}
function getCurrentTimeline(clean = false) {
switch(timelineType) {
case "home":
getTimeline("home", clean);
break;
case "local":
getTimeline("public", clean, true)
break;
case "federated":
getTimeline("public", clean, false, true)
break;
}
}
account.subscribe(account => {
if (account) getCurrentTimeline();
});
document.addEventListener('scroll', () => {
if ($account && $page.url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getCurrentTimeline();
}
});
</script>
<div id="feed" role="feed">
{#if $timeline.length <= 0}
<div class="loading throb">
<span>{lang.string('timeline.fetching')}</span>
</div>
{/if}
{#each $timeline as post}
<Post post_data={post} />
{/each}
</div>
<style>
#feed {
margin-bottom: 20vh;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>

View file

@ -9,6 +9,7 @@
import Button from '$lib/ui/Button.svelte';
import Post from '$lib/ui/post/Post.svelte';
import PageHeader from '../lib/ui/core/PageHeader.svelte';
import Timeline from '../lib/ui/timeline/Timeline.svelte';
const lang = Lang();
@ -24,40 +25,7 @@
// set in localStorage
localStorage.setItem(app_name + '_selected_timeline', timelineType);
// erase the timeline here so the ui reacts instantly
// mae: i could write an awesome undertale reference here
timeline.set([]);
getCurrentTimeline()
}
function getCurrentTimeline(clean = false) {
switch(timelineType) {
case "home":
getTimeline("home", clean);
break;
case "local":
getTimeline("public", clean, true)
break;
case "federated":
getTimeline("public", clean, false, true)
break;
}
}
account.subscribe(account => {
if (account) getCurrentTimeline();
});
document.addEventListener('scroll', () => {
if ($account && $page.url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getCurrentTimeline();
}
});
</script>
{#if $account}
@ -79,24 +47,12 @@
</Button>
</PageHeader>
<div id="feed" role="feed">
{#if $timeline.length <= 0}
<div class="loading throb">
<span>{lang.string('timeline.fetching')}</span>
</div>
{/if}
{#each $timeline as post}
<Post post_data={post} />
{/each}
</div>
<Timeline timelineType={timelineType}/>
{:else}
<LoginForm />
{/if}
<style>
#feed {
margin-bottom: 20vh;
}
.loading {
width: 100%;