Add makeCalendarFeed

src/app/components/EventCreate.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {writable} from "svelte/store"
-  import {randomId} from "@welshman/lib"
+  import {randomId, HOUR} from "@welshman/lib"
   import {createEvent, EVENT_TIME} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {preventDefault} from "@lib/html"
@@ -12,7 +12,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
-  import {PROTECTED} from "@app/state"
+  import {PROTECTED, GENERAL, tagRoom} from "@app/state"
   import {makeEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
@@ -39,6 +39,13 @@
       })
     }
 
+    if (start >= end) {
+      return pushToast({
+        theme: "error",
+        message: "End time must be later than start time.",
+      })
+    }
+
     const event = createEvent(EVENT_TIME, {
       content: editor.getText({blockSeparator: "\n"}).trim(),
       tags: [
@@ -47,12 +54,14 @@
         ["location", location],
         ["start", start.toString()],
         ["end", end.toString()],
-        ...daysBetween(start, end).map(D => ["D", D]),
+        ...daysBetween(start, end).map(D => ["D", D.toString()]),
         ...editor.storage.nostr.getEditorTags(),
+        tagRoom(GENERAL, url),
         PROTECTED,
       ],
     })
 
+    pushToast({message: "Your event has been published!"})
     publishThunk({event, relays: [url]})
     history.back()
   }
@@ -63,6 +72,15 @@
   let location = $state("")
   let start: number | undefined = $state()
   let end: number | undefined = $state()
+  let endDirty = false
+
+  $effect(() => {
+    if (!endDirty && start) {
+      end = start + HOUR
+    } else if (end) {
+      endDirty = true
+    }
+  })
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(submit)}>

src/app/requests.ts

@@ -1,6 +1,14 @@
 import {get, writable} from "svelte/store"
-import {partition, insert, sortBy, assoc, now} from "@welshman/lib"
-import {MESSAGE, DELETE, THREAD, COMMENT, matchFilters, getTagValues} from "@welshman/util"
+import {partition, int, YEAR, MONTH, insert, sortBy, assoc, now} from "@welshman/lib"
+import {
+  MESSAGE,
+  DELETE,
+  THREAD,
+  EVENT_TIME,
+  COMMENT,
+  matchFilters,
+  getTagValues,
+} from "@welshman/util"
 import type {TrustedEvent, Filter} from "@welshman/util"
 import {feedFromFilters, makeRelayFeed, makeIntersectionFeed} from "@welshman/feeds"
 import type {Subscription} from "@welshman/net"
@@ -15,6 +23,7 @@ import {
   createFeedController,
 } from "@welshman/app"
 import {createScroller} from "@lib/html"
+import {daysBetween} from "@lib/util"
 import {userRoomsByUrl, getUrlsForEvent} from "@app/state"
 
 // Utils
@@ -131,6 +140,120 @@ export const makeFeed = ({
   }
 }
 
+export const makeCalendarFeed = ({
+  relays,
+  feedFilters,
+  subscriptionFilters,
+  element,
+  onExhausted,
+  initialEvents = [],
+}: {
+  relays: string[]
+  feedFilters: Filter[]
+  subscriptionFilters: Filter[]
+  element: HTMLElement
+  onExhausted?: () => void
+  initialEvents?: TrustedEvent[]
+}) => {
+  const events = writable(initialEvents)
+
+  let backwardWindow = [now() - MONTH, now()]
+  let forwardWindow = [now(), now() + MONTH]
+
+  const insertEvent = (event: TrustedEvent) => {
+    events.update($events => {
+      for (let i = 0; i < $events.length; i++) {
+        if ($events[i].id === event.id) return $events
+        if ($events[i].created_at < event.created_at) return insert(i, event, $events)
+      }
+
+      return [...$events, event]
+    })
+  }
+
+  const removeEvents = (ids: string[]) => {
+    events.update($events => $events.filter(e => !ids.includes(e.id)))
+  }
+
+  const handleDelete = (e: TrustedEvent) => removeEvents(getTagValues(["e", "a"], e.tags))
+
+  const onThunk = (thunk: Thunk) => {
+    if (matchFilters(feedFilters, thunk.event)) {
+      insertEvent(thunk.event)
+
+      thunk.controller.signal.addEventListener("abort", () => {
+        removeEvents([thunk.event.id])
+      })
+    } else if (thunk.event.kind === DELETE) {
+      handleDelete(thunk.event)
+    }
+  }
+
+  const sub = subscribe({
+    relays,
+    filters: subscriptionFilters,
+    onEvent: (e: TrustedEvent) => {
+      if (matchFilters(feedFilters, e)) insertEvent(e)
+      if (e.kind === DELETE) handleDelete(e)
+    },
+  })
+
+  const loadTimeframe = (since: number, until: number) => {
+    const hashes = daysBetween(since, until).map(String)
+
+    console.log(since, until, hashes)
+
+    load({
+      relays,
+      filters: [{kinds: [EVENT_TIME], "#D": hashes}],
+      onEvent: insertEvent,
+    })
+  }
+
+  const backwardScroller = createScroller({
+    element,
+    reverse: true,
+    onScroll: () => {
+      const [since, until] = backwardWindow
+
+      backwardWindow = [since - MONTH, since]
+
+      if (until > now() - int(2, YEAR)) {
+        loadTimeframe(since, until)
+      } else {
+        backwardScroller.stop()
+      }
+    },
+  })
+
+  const forwardScroller = createScroller({
+    element,
+    onScroll: () => {
+      const [since, until] = forwardWindow
+
+      forwardWindow = [until, until + MONTH]
+
+      if (until < now() + int(2, YEAR)) {
+        loadTimeframe(since, until)
+      } else {
+        forwardScroller.stop()
+      }
+    },
+  })
+
+  thunkWorker.addGlobalHandler(onThunk)
+
+  return {
+    events,
+    cleanup: () => {
+      thunkWorker.removeGlobalHandler(onThunk)
+      backwardScroller.stop()
+      forwardScroller.stop()
+      sub.close()
+    },
+  }
+}
+
 // Application requests
 
 export const listenForNotifications = () => {

src/app/state.ts

@@ -40,14 +40,7 @@ import {
   asDecryptedEvent,
   normalizeRelayUrl,
 } from "@welshman/util"
-import type {
-  TrustedEvent,
-  Repository,
-  SignedEvent,
-  PublishedList,
-  List,
-  Filter,
-} from "@welshman/util"
+import type {TrustedEvent, SignedEvent, PublishedList, List, Filter} from "@welshman/util"
 import {Nip59} from "@welshman/signer"
 import {
   pubkey,
@@ -261,7 +254,7 @@ export const getUrlsForEvent = derived([trackerStore, thunks], ([$tracker, $thun
   }
 })
 
-export const getEventsForUrl = (repository: Repository, url: string, filters: Filter[]) => {
+export const getEventsForUrl = (url: string, filters: Filter[]) => {
   const $getUrlsForEvent = get(getUrlsForEvent)
   const $events = repository.query(filters)
 

src/lib/html.ts

@@ -21,6 +21,7 @@ export type ScrollerOpts = {
   onScroll: () => any
   element: Element
   threshold?: number
+  reverse?: boolean
   delay?: number
 }
 
@@ -34,6 +35,7 @@ export const createScroller = ({
   element,
   delay = 1000,
   threshold = 2000,
+  reverse = false,
 }: ScrollerOpts) => {
   let done = false
 

src/lib/util.ts

@@ -26,6 +26,6 @@ export const nsecDecode = (nsec: string) => {
   return bytesToHex(data)
 }
 
-export const day = (seconds: number) => Math.floor(seconds / DAY).toString()
+export const day = (seconds: number) => Math.floor(seconds / DAY)
 
 export const daysBetween = (start: number, end: number) => [...range(start, end, DAY)].map(day)

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -6,7 +6,7 @@
   import {now} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, MESSAGE, DELETE, REACTION} from "@welshman/util"
-  import {formatTimestampAsDate, pubkey, publishThunk, deriveRelay, repository} from "@welshman/app"
+  import {formatTimestampAsDate, pubkey, publishThunk, deriveRelay} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -179,7 +179,7 @@
       relays: [url],
       feedFilters: [filter],
       subscriptionFilters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: now()}],
-      initialEvents: getEventsForUrl(repository, url, [{...filter, limit: 20}]),
+      initialEvents: getEventsForUrl(url, [{...filter, limit: 20}]),
       onExhausted: () => {
         loading = false
       },

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import {onMount, onDestroy} from "svelte"
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {readable} from "svelte/store"
   import {page} from "$app/stores"
-  import {sortBy, now, MONTH, last} from "@welshman/lib"
+  import {sortBy, now, last} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {EVENT_DATE, EVENT_TIME, getTagValue} from "@welshman/util"
-  import {subscribe, formatTimestampAsDate} from "@welshman/app"
-  import {daysBetween} from "@lib/util"
+  import {REACTION, DELETE, EVENT_TIME, getTagValue} from "@welshman/util"
+  import {formatTimestampAsDate} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -15,13 +16,11 @@
   import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
   import {pushModal} from "@app/modal"
-  import {deriveEventsForUrl, decodeRelay} from "@app/state"
-  import {pullConservatively} from "@app/requests"
+  import {GENERAL, getEventsForUrl, decodeRelay} from "@app/state"
+  import {makeCalendarFeed} from "@app/requests"
   import {setChecked} from "@app/notifications"
 
   const url = decodeRelay($page.params.relay)
-  const kinds = [EVENT_DATE, EVENT_TIME]
-  const events = deriveEventsForUrl(url, [{kinds}])
 
   const createEvent = () => pushModal(EventCreate, {url})
 
@@ -29,8 +28,10 @@
 
   const getStart = (event: TrustedEvent) => parseInt(getTagValue("start", event.tags) || "")
 
-  const limit = 5
+  let element: HTMLElement
   let loading = $state(true)
+  let cleanup: () => void
+  let events: Readable<TrustedEvent[]> = $state(readable([]))
 
   type Item = {
     event: TrustedEvent
@@ -38,39 +39,43 @@
   }
 
   const items = $derived(
-    sortBy(e => getStart(e), $events)
-      .reduce<Item[]>((r, event) => {
-        const end = getEnd(event)
-        const start = getStart(event)
+    sortBy(e => getStart(e), $events).reduce<Item[]>((r, event) => {
+      const end = getEnd(event)
+      const start = getStart(event)
 
-        if (isNaN(start) || isNaN(end)) return r
+      if (isNaN(start) || isNaN(end)) return r
 
-        const prevDateDisplay =
-          r.length > 0 ? formatTimestampAsDate(getStart(last(r).event)) : undefined
-        const newDateDisplay = formatTimestampAsDate(start)
-        const dateDisplay = prevDateDisplay === newDateDisplay ? undefined : newDateDisplay
+      const prevDateDisplay =
+        r.length > 0 ? formatTimestampAsDate(getStart(last(r).event)) : undefined
+      const newDateDisplay = formatTimestampAsDate(start)
+      const dateDisplay = prevDateDisplay === newDateDisplay ? undefined : newDateDisplay
 
-        return [...r, {event, dateDisplay}]
-      }, [])
-      .slice(0, limit),
+      return [...r, {event, dateDisplay}]
+    }, []),
   )
 
   onMount(() => {
-    const sub = subscribe({filters: [{kinds, since: now()}]})
-    const hashes = daysBetween(now() - MONTH, now() + MONTH)
+    const feedFilters = [{kinds: [EVENT_TIME], "#h": [GENERAL]}]
+    const subscriptionFilters = [
+      {kinds: [DELETE, REACTION, EVENT_TIME], "#h": [GENERAL], since: now()},
+    ]
 
-    pullConservatively({filters: [{kinds, "#D": hashes}], relays: [url]})
+    ;({events, cleanup} = makeCalendarFeed({
+      element,
+      relays: [url],
+      feedFilters,
+      subscriptionFilters,
+      initialEvents: getEventsForUrl(url, feedFilters),
+      onExhausted: () => {
+        loading = false
+      },
+    }))
 
-    return () => sub.close()
+    return () => {
+      setChecked($page.url.pathname)
+      cleanup()
+    }
   })
-
-  onDestroy(() => {
-    setChecked($page.url.pathname)
-  })
-
-  setTimeout(() => {
-    loading = false
-  }, 5000)
 </script>
 
 <div class="relative flex h-screen flex-col">
@@ -89,7 +94,7 @@
       </div>
     {/snippet}
   </PageBar>
-  <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
+  <div class="scroll-container flex flex-grow flex-col gap-2 overflow-auto p-2" bind:this={element}>
     {#each items as { event, dateDisplay }, i (event.id)}
       {#if dateDisplay}
         <Divider>{dateDisplay}</Divider>