refactor: timeline into its own component
fix: bug with last_post not clearing when changing
This commit is contained in:
parent
389f8dcaff
commit
cd5dc461f6
3 changed files with 85 additions and 46 deletions
|
@ -71,3 +71,8 @@ export async function getTimeline(timelineType = "home", clean, localOnly = fals
|
|||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
export function clearTimeline() {
|
||||
timeline.set([]);
|
||||
last_post = false;
|
||||
}
|
78
src/lib/ui/timeline/Timeline.svelte
Normal file
78
src/lib/ui/timeline/Timeline.svelte
Normal 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>
|
|
@ -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%;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue