src/pages/Home.svelte (view raw)
1<script lang="ts">
2 import {
3 getDefaultSession,
4 handleIncomingRedirect,
5 fetch,
6 } from "@inrupt/solid-client-authn-browser";
7 import { onMount } from "svelte";
8 import TasksFeed from "../lib/components/TasksFeed.svelte";
9 import NewTask from "../lib/components/NewTask.svelte";
10 import tasksStore from "../lib/store/tasksStore";
11 import filterStore from "../lib/store/filterStore";
12 import podInfo from "../lib/store/podInfoStore";
13 import {
14 getPodUrlAll,
15 getSolidDataset,
16 getThingAll,
17 } from "@inrupt/solid-client";
18 import Profile from "../lib/components/Profile.svelte";
19 import { thingToTask } from "../lib/models/task";
20 import Search from "../lib/components/Search.svelte";
21
22 let { navigate }: PageProps = $props();
23 let sessionInfo = $state(getDefaultSession()?.info);
24 let filteredTasks = $derived(
25 $tasksStore.filter(task =>
26 $filterStore.search
27 ? task.name?.toLowerCase().includes($filterStore.search)
28 : true
29 )
30 );
31
32 onMount(async () => {
33 const info = await handleIncomingRedirect({
34 restorePreviousSession: true,
35 });
36 if (!info?.isLoggedIn) navigate("/login");
37 else if (!info?.webId)
38 console.error(`Invalid info received from Pod. No WebId found.`);
39 else {
40 sessionInfo = info;
41
42 // Load pod info
43 const pods = await getPodUrlAll(sessionInfo?.webId, { fetch: fetch });
44 const firstPod = pods?.[0];
45 if (firstPod) $podInfo.podUrl = firstPod;
46
47 // Load tasks dataset from pod
48 const tasksDataset = await getSolidDataset(`${firstPod}/tasks/default`, {
49 fetch: fetch,
50 });
51 $podInfo.tasksDataset = tasksDataset;
52
53 // Init tasks store
54 const things = getThingAll(tasksDataset);
55 const tasks = things.map(thingToTask);
56 tasksStore.set(tasks);
57 }
58 });
59</script>
60
61<main class="w-3xl max-w-full mx-auto p-4 pb-15">
62 <div class="flex justify-between">
63 <h1 class="text-2xl mb-4">kōi</h1>
64 <Profile />
65 </div>
66 <Search />
67 <TasksFeed tasks={filteredTasks} />
68</main>
69
70<div class="fixed bottom-0 left-0 right-0 p-4">
71 <div class="w-3xl max-w-full mx-auto bg-white">
72 <NewTask />
73 </div>
74</div>