Read-it-later social network
remove /pub page, add publication pagination, update README
authored by
zeudev
and committed by
tangled.org
264bec42
b51c8f3e
+48
-82
+9
-12
README.md
+9
-12
README.md
···
2
2
3
3
Get started at [potatonet.app](https://potatonet.app) 🥔
4
4
5
-
- [ ] `/<handle>/bookmarks`: bookmarks per user
6
-
- [x] fetch bookmarks
7
-
- [x] filter by query term
8
-
- [x] refresh bookmarks
9
-
- [x] filter by tags
10
-
- [ ] pagination
11
-
- [ ] atproto auth
5
+
- [x] atproto auth
12
6
- [x] login/logout
13
-
- [ ] bookmark CRUD
14
-
- [x] explore
15
-
- [x] query all bookmarks
16
-
- [x] filter explore
17
-
- [ ] pagination
7
+
- [ ] site.standard.*
8
+
- [x] query all standard.site publications
18
9
- [ ] search bar `/search?q=<term>`
10
+
- [ ] community.lexicon.bookmarks
11
+
- [ ] publications
12
+
- [ ] documents
13
+
- [ ] community.lexicon.like
14
+
- [ ] publications
15
+
- [ ] documents
19
16
20
17
> Special thanks to [pilcrowonpaper](https://pilcrowonpaper.com) for `@oslojs/encoding` library and the
21
18
[encryption gist](https://gist.github.com/pilcrowonpaper/353318556029221c8e25f451b91e5f76) that the `encryption.ts` file is based on.
+39
-9
src/routes/+page.svelte
+39
-9
src/routes/+page.svelte
···
5
5
let { data } = $props();
6
6
let { atclient, user } = data;
7
7
8
+
let page = $state(0);
9
+
8
10
const publicationsQuery = createInfiniteQuery(() => ({
9
11
queryKey: ["publications"],
10
12
queryFn: async ({ pageParam }) => {
···
32
34
},
33
35
staleTime: 1000000,
34
36
initialPageParam: "",
35
-
getNextPageParam: (lastPage) => lastPage.siteStandardPublication.pageInfo.endCursor
37
+
getNextPageParam: (lastPage) => lastPage.siteStandardPublication.pageInfo.endCursor,
38
+
select: (data) => {
39
+
const items = data.pages.map((page) => page.siteStandardPublication.edges).flat();
40
+
const nodes = items.map((i) => i.node);
41
+
return nodes;
42
+
}
36
43
}));
44
+
45
+
let currentPage = $derived(publicationsQuery.data?.slice(page*20, (page*20) + 20));
37
46
</script>
38
47
48
+
<menu>
49
+
<button
50
+
onclick={() => {
51
+
if (page > 0) {
52
+
page--;
53
+
}
54
+
}}
55
+
class="border"
56
+
>
57
+
Prev Page
58
+
</button>
59
+
<number>{page + 1}</number>
60
+
{#if publicationsQuery.hasNextPage}
61
+
<button
62
+
onclick={() => {
63
+
page++;
64
+
if ((page * 20) + 20 > (publicationsQuery.data?.length || 0)) {
65
+
publicationsQuery.fetchNextPage();
66
+
}
67
+
}}
68
+
class="border"
69
+
>
70
+
Next Page
71
+
</button>
72
+
{/if}
73
+
</menu>
39
74
{#if publicationsQuery.isFetching}
40
75
<p>Fetching...</p>
41
76
{:else if publicationsQuery.isError}
42
77
<p>Error</p>
43
-
{:else if publicationsQuery.isSuccess}
44
-
{@const publications = publicationsQuery.data.pages.map((p) => p.siteStandardPublication.edges.map((edge) => edge.node)).flat()}
45
-
{#each publications as publication}
46
-
<a href={`/pub?uri=${publication.uri}`}>{publication.uri}</a>
47
-
<p>{publication.value.url}</p>
78
+
{:else}
79
+
{#each currentPage as publication (publication.uri)}
80
+
<a href={publication.value.url}>{publication.value.url}</a>
48
81
{/each}
49
-
{#if publicationsQuery.hasNextPage}
50
-
<button onclick={() => publicationsQuery.fetchNextPage()}>Next Page</button>
51
-
{/if}
52
82
{/if}
53
83
-61
src/routes/pub/+page.svelte
-61
src/routes/pub/+page.svelte
···
1
-
<script lang="ts">
2
-
import { page } from '$app/state';
3
-
import type { DocumentNode, PublicationNode } from '$lib/utils';
4
-
import { createInfiniteQuery, createQuery } from '@tanstack/svelte-query';
5
-
6
-
let { data } = $props();
7
-
let { atclient, user } = data;
8
-
9
-
let uri = $derived(page.url.searchParams.get("uri"));
10
-
$inspect(uri);
11
-
12
-
const documentsQuery = createQuery(() => ({
13
-
queryKey: ["documents", uri],
14
-
queryFn: async ({ pageParam }) => {
15
-
const query = `
16
-
query GetDocuments {
17
-
siteStandardDocument(where: {
18
-
site: {
19
-
eq: "${uri}"
20
-
}
21
-
}) {
22
-
edges {}
23
-
pageInfo {
24
-
hasNextPage
25
-
endCursor
26
-
}
27
-
}
28
-
}
29
-
`;
30
-
const data = await atclient.publicQuery(query);
31
-
console.log(data);
32
-
return data as {
33
-
siteStandardDocument: {
34
-
edges: { node: DocumentNode, cursor: string }[],
35
-
pageInfo: {
36
-
hasNextPage: boolean;
37
-
endCursor: string;
38
-
}
39
-
}
40
-
}
41
-
},
42
-
// @ts-ignore
43
-
select: (data) => data.siteStandardDocument.edges.map((edge) => edge.node)
44
-
}));
45
-
</script>
46
-
47
-
{#if documentsQuery.isFetching}
48
-
<p>Fetching...</p>
49
-
{:else if documentsQuery.isError}
50
-
<p>Error</p>
51
-
{:else if documentsQuery.isSuccess}
52
-
{@const documents = documentsQuery.data}
53
-
{#if documents.length === 0}
54
-
<p>No documents...</p>
55
-
{:else}
56
-
{#each documents as document}
57
-
<p>{document.value.title}</p>
58
-
{/each}
59
-
{/if}
60
-
{/if}
61
-