diff options
author | buttercat1791 <mjjurkoic@gmail.com> | 2024-08-21 00:18:43 -0500 |
---|---|---|
committer | limina1 <liminal@duck.com> | 2024-08-27 08:22:01 -0400 |
commit | f0567c160e2b2b3448fbe41a1eabeb953dd3829f (patch) | |
tree | 1e1c536446b69abcd6d5f31fdd0af26750b43291 | |
parent | b4f5d22c1709588ba8843a6a6f68b097c1d13827 (diff) |
Add drop-down to select feed type
-rw-r--r-- | src/lib/consts.ts | 5 | ||||
-rw-r--r-- | src/lib/stores.ts | 4 | ||||
-rw-r--r-- | src/routes/+page.svelte | 73 |
3 files changed, 70 insertions, 12 deletions
diff --git a/src/lib/consts.ts b/src/lib/consts.ts index 93ec343..e9f766d 100644 --- a/src/lib/consts.ts +++ b/src/lib/consts.ts @@ -2,3 +2,8 @@ export const wikiKind = 30818; export const indexKind = 30040; export const zettelKind = 30041; export const standardRelays = [ "wss://thecitadel.nostr1.com" ]; + +export enum FeedType { + Relays, + Follows, +} diff --git a/src/lib/stores.ts b/src/lib/stores.ts index 6a36ea4..19a4857 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -1,8 +1,8 @@ import { readable, writable } from "svelte/store"; +import { FeedType } from "./consts"; export let idList = writable<string[]>([]); export let alexandriaKinds = readable<number[]>([30040, 30041]); -export const isLeftMenuMenuInUse = writable(false); -export const showLeftMenu = writable(false); +export let feedType = writable<FeedType>(FeedType.Relays); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7e0e6e6..243acd0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,10 @@ <script lang="ts"> import ArticleHeader from "$lib/ArticleHeader.svelte"; - import { indexKind } from "$lib/consts"; + import { FeedType, indexKind } from "$lib/consts"; import { ndk } from "$lib/ndk"; - import { NDKEvent, NDKRelayList, NDKRelaySet, type NDKUser } from "@nostr-dev-kit/ndk"; + import { NDKEvent, NDKRelayList, NDKRelaySet, NDKSubscriptionCacheUsage, type NDKUser } from "@nostr-dev-kit/ndk"; + import { Button, Dropdown, Radio } from "flowbite-svelte"; + import { ChevronDownOutline } from "flowbite-svelte-icons"; const getEvents = (): Promise<Set<NDKEvent>> => $ndk.fetchEvents( @@ -21,16 +23,44 @@ ); }; + const getEventsFromUserFollows = (follows: Set<NDKUser>, userRelays: NDKRelayList): Promise<Set<NDKEvent>> => { + const relaySet = NDKRelaySet.fromRelayUrls(userRelays?.readRelayUrls ?? [], $ndk); + const pubkeys = Array.from(follows ?? []).map(user => user.pubkey); + + return $ndk.fetchEvents( + { + authors: pubkeys, + // @ts-ignore + kinds: [indexKind] + }, + relaySet, + ); + }; + + const getFeedTypeFriendlyName = (feedType: FeedType): string => { + switch (feedType) { + case FeedType.Relays: + return 'Relays'; + case FeedType.Follows: + return 'Follows'; + default: + return ''; + } + }; + let user: NDKUser | null | undefined; let readRelays: NDKRelayList | null | undefined; + let userFollows: Set<NDKUser> | null | undefined; + let feedType: FeedType = FeedType.Relays; $: { user = $ndk.activeUser; user?.relayList().then(relays => readRelays = relays); + user?.follows().then(follows => userFollows = follows); } </script> -<div class='leather flex flex-col flex-grow-0 space-y-4 overflow-y-auto w-max'> +<div class='leather flex flex-col flex-grow-0 space-y-4 overflow-y-auto w-max p-2'> {#key user} {#if user == null || readRelays == null} {#await getEvents()} @@ -41,13 +71,36 @@ {/each} {/await} {:else} - {#await getEventsFromUserRelays(readRelays)} - <p>Loading...</p> - {:then events} - {#each Array.from(events) as event} - <ArticleHeader {event} /> - {/each} - {/await} + <div class='leather w-full flex justify-end'> + <Button> + {`Showing articles from: ${getFeedTypeFriendlyName(feedType)}`}<ChevronDownOutline class='w-6 h-6' /> + </Button> + <Dropdown class='w-fit p-2 space-y-2 text-sm'> + <li> + <Radio name='relays' bind:group={feedType} value={FeedType.Relays}>Relays</Radio> + </li> + <li> + <Radio name='follows' bind:group={feedType} value={FeedType.Follows}>Follows</Radio> + </li> + </Dropdown> + </div> + {#if feedType === FeedType.Relays && readRelays != null} + {#await getEventsFromUserRelays(readRelays)} + <p>Loading...</p> + {:then events} + {#each Array.from(events) as event} + <ArticleHeader {event} /> + {/each} + {/await} + {:else if feedType === FeedType.Follows && userFollows != null} + {#await getEventsFromUserFollows(userFollows, readRelays)} + <p>Loading...</p> + {:then events} + {#each Array.from(events) as event} + <ArticleHeader {event} /> + {/each} + {/await} + {/if} {/if} {/key} </div> |