Switch to dynamic events, update design

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["denoland.vscode-deno"]
+}

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@dolanske/cascade": "github:dolanske/cascade",
+    "@supabase/supabase-js": "^2.45.0",
     "dayjs": "^1.11.11"
   }
 }

src/components/CountdownItem.ts

@@ -1,9 +1,9 @@
 import { div, h3, p, reusable, span, strong } from '@dolanske/cascade'
-import type { FormattedEvent } from '../events'
+import type { FormattedEvent } from '../types'
 
 export const CountdownItem = reusable('li', (ctx, props: FormattedEvent) => {
   ctx.nest([
-    h3(props.name),
+    h3(props.title),
     p(props.description).if(props.description),
     div().class('divider'),
     span(props.displayDate).class('date'),

src/components/Sidebar.ts

@@ -1,13 +1,20 @@
-import { div, h2, img, p, span, strong } from '@dolanske/cascade'
+import { div, h2, hr, img, p } from '@dolanske/cascade'
 
-export const Sidebar = div().setup((ctx) => {
+interface Props {
+  upcomingCount: number
+  // pastCount: number
+}
+
+export const Sidebar = div().setup((ctx, props: Props) => {
   ctx.class('sidebar')
   ctx.nest([
     img().attr('src', 'https://mavulp.github.io/countdown/logo.svg'),
-    h2([
-      span('Hivecom'),
-      strong('Countdown'),
-    ]),
+    h2('Hivecom \n countdown'),
+    p(`${props.upcomingCount} upcoming`),
+    // p(`${props.pastCount} past events`),
+    div().style('flex', 1),
     p().html(`Collection of upcoming events in the hivecom community. If you want your event added, please <a href="https://github.com/Mavulp/countdown/issues/new?assignees=dolanske&labels=&projects=&template=new-event.md&title=%5BRequest%5D+New+event" tarrget="_blank">create an issue</a>. <br /><br /> Designed and implemented by dolanske on Wednesday, in 2024.`),
+    hr(),
+    p().html('Copyright @ <a href="https://github.com/Mavulp" target="_blank">Mavulp</a> 2024'),
   ])
 })

src/data.ts

@@ -0,0 +1,12 @@
+import { createClient } from '@supabase/supabase-js'
+import type { Database } from '../types/supabase'
+
+export const supabase = createClient<Database>(
+  'https://camqocmuyolpjjbnbcha.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNhbXFvY211eW9scGpqYm5iY2hhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTUwMTkxNDQsImV4cCI6MjAzMDU5NTE0NH0.QmtBbAOfQ4usos4zQHih6nqesf5HQBYD1e7ujpsanqI',
+)
+
+export async function getEvents() {
+  const { data } = await supabase.from('events').select()
+  return data
+}

src/main.ts

@@ -4,33 +4,33 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import duration from 'dayjs/plugin/duration'
-import type { FormattedEvent } from './events'
-import { events } from './events'
+import type { FormattedEvent } from './types'
 import { INPUT_FORMAT, formatEventData } from './time'
 import { CountdownItem } from './components/CountdownItem'
 import { Sidebar } from './components/Sidebar'
+import { getEvents } from './data'
 
 dayjs.extend(relativeTime)
 dayjs.extend(customParseFormat)
 dayjs.extend(duration)
 
+// Fetch just once on load
+const events = await getEvents() ?? []
+
+const formattedEvents = ref<FormattedEvent[]>(formatEventData(
+  events
+    .filter(item => dayjs().isBefore(dayjs(item.date, INPUT_FORMAT)))
+    .sort((a, b) => dayjs(a.date, INPUT_FORMAT).isBefore(dayjs(b.date, INPUT_FORMAT)) ? -1 : 1),
+))
+
 // One time use component for logic extraction
-const Countdown = ul().setup((ctx) => {
-// Get the square root of the event count, to more evenly distrubute them
+const Countdown = ul().setup(async (ctx) => {
+  // Get the square root of the event count, to more evenly distrubute them
   // across the viewport
   const columns = Math.min(3, Math.ceil(Math.sqrt(events.length)))
   ctx.style({ 'grid-template-columns': `repeat(${columns}, 1fr)` })
 
   // Preformat events to include the countdown values
-  const formattedEvents = ref<FormattedEvent[]>(formatEventData(
-    // Deploying to github pages creates a static file which is served to all
-    // users. So when a user visits the page, the array would get sorted. Next
-    // user would re-sort it again. By creating a shallow copy we should
-    // hopefully prevent this from happening
-    [...events]
-      .filter(item => dayjs().isBefore(dayjs(item.date, INPUT_FORMAT)))
-      .sort((a, b) => dayjs(a.date, INPUT_FORMAT).isBefore(dayjs(b.date, INPUT_FORMAT)) ? -1 : 1),
-  ))
 
   // Update time until all the events every second
   const intervalHandler = setInterval(() => {
@@ -49,7 +49,10 @@ const Countdown = ul().setup((ctx) => {
 const App = fragment([
   Countdown,
   div(
-    Sidebar,
+    Sidebar.props({
+      upcomingCount: formattedEvents.value.length,
+      // pastCount: events.length - formattedEvents.value.length,
+    }),
   ).class('sidebar-wrap'),
 ])