all repos — kōi @ main

Minimalist task manager

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>