feat: news api

components/app/home/membership-card.vue

@@ -20,27 +20,27 @@ const membershipGradient: Record<Exclude<User['memberType'], null>, string> = {
     </div>
 
     <f7Card v-else-if="user" class="m-0!">
-      <f7CardHeader class="h-45 rounded-[16px]!" valign="top" :class="membershipGradient[user.memberType!]">
+      <f7CardContent class="h-45 rounded-[16px]" valign="top" :class="membershipGradient[user.memberType!]">
         <div class="flex flex-col w-full h-full">
           <div class="flex flex-col flex-1">
             <span class="font-bold text-3xl">
               {{ user.name }}
             </span>
-            <span class="font-mono text-base">
+            <span class="font-mono">
               {{ user.memberId }}
             </span>
           </div>
-          <div class="flex flex-col text-base">
+          <div class="flex flex-col">
             <span class="font-semibold">
               Class of {{ user.graduationYear }}
             </span>
-            <span class="text-sm">
+            <span>
               {{ user.memberType?.[0].toLocaleUpperCase() }}{{ user.memberType?.slice(1, user.memberType?.length) }}
               member
             </span>
           </div>
         </div>
-      </f7CardHeader>
+      </f7CardContent>
       <f7CardFooter>
         <span>
           <strong>Coming back?</strong>

components/app/home/news.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { f7BlockTitle, f7Card, f7CardContent, f7CardHeader, f7SkeletonBlock } from 'framework7-vue'
+
+const { data: news, isLoading: newsIsLoading } = useNewsArticles()
+</script>
+
+<template>
+  <div>
+    <f7BlockTitle large>
+      What's Happening
+    </f7BlockTitle>
+
+    <div class="space-y-3">
+      <template v-if="newsIsLoading">
+        <f7SkeletonBlock v-for="n in 3" :key="n" class="rounded-md" effect="fade" height="10rem" />
+      </template>
+      <template v-else-if="news">
+        <span v-if="news.length === 0" class="mt-4 opacity-80">
+          Nothing exciting is happening right now.
+          <br>
+          Check back later!
+        </span>
+        <f7Card v-for="article in news" :key="article.id" class="m-0!">
+          <f7CardHeader class="h-45 rounded-[16px]! overflow-hidden bg-center bg-contain relative" valign="bottom" :style="`background-image: url(${article.heroImageUrl})`">
+            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/70" />
+            <span class="z-10">
+              {{ article.title }}
+            </span>
+          </f7CardHeader>
+          <f7CardContent>
+            {{ article.description }}
+          </f7CardContent>
+        </f7Card>
+      </template>
+    </div>
+  </div>
+</template>

components/app/home/page.vue

@@ -9,8 +9,6 @@ defineProps<{
 
 const auth = useCurrentUser()
 const authLoaded = useIsCurrentUserLoaded()
-// TODO @qin-guan: Error state handling
-const { data: user, isLoading: userIsLoading } = useUser()
 
 const state = reactive({
   showLoginScreen: false,
@@ -40,12 +38,8 @@ watch([authLoaded, auth], (values) => {
         <AppHomeMembershipCard />
       </div>
 
-      <f7BlockTitle>
-        What's Happening
-      </f7BlockTitle>
-
-      <div class="space-y-3">
-        <f7SkeletonBlock v-for="n in 3" :key="n" class="rounded-md" effect="fade" height="10rem" />
+      <div>
+        <AppHomeNews />
       </div>
     </f7List>
   </f7Page>

composables/news.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/vue-query'
+import type { NewsArticle } from '~/shared/types'
+
+const queryKeyFactory = {
+  newsArticles: ['newsArticles'],
+}
+
+export function useNewsArticles() {
+  const firebaseCurrentUser = useCurrentUser()
+  return useQuery({
+    queryKey: queryKeyFactory.newsArticles,
+    queryFn: () => $api<NewsArticle[]>('/api/news'),
+    enabled: computed(() => !!firebaseCurrentUser.value), // Only run when user exists
+  })
+}

plugins/vue-query.ts

@@ -7,8 +7,8 @@ export default defineNuxtPlugin((nuxtApp) => {
     queryClientConfig: {
       defaultOptions: {
         queries: {
-          cacheTime: 1000 * 60 * 60 * 24,
-          staleTime: 1000 * 60 * 60 * 24,
+          cacheTime: 1000 * 60,
+          staleTime: 1000 * 60,
         },
       },
     },

server/api/news/index.get.ts

@@ -0,0 +1,7 @@
+export default defineProtectedEventHandler((event) => {
+  return event.context.database.query.news.findMany()
+}, {
+  cache: {
+    maxAge: 60,
+  },
+})

server/db/schema.ts

@@ -83,6 +83,16 @@ export const bookings = sqliteTable('bookings', {
   }),
 })
 
+export const news = sqliteTable('news', {
+  id: text('id').primaryKey().$defaultFn(() => createId()),
+  title: text('title').notNull(),
+  description: text('description').notNull(),
+  heroImageAlt: text('hero_image_alt').notNull(),
+  heroImageUrl: text('hero_image_url').notNull(),
+  ctaTitle: text('cta_title').notNull(),
+  ctaUrl: text('cta_url').notNull(),
+})
+
 // Relations
 
 export const usersRelations = relations(users, ({ many }) => ({

server/drizzle/0005_married_paladin.sql

@@ -0,0 +1,9 @@
+CREATE TABLE `news` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text NOT NULL,
+	`description` text NOT NULL,
+	`hero_image_alt` text NOT NULL,
+	`hero_image_url` text NOT NULL,
+	`cta_title` text NOT NULL,
+	`cta_url` text NOT NULL
+);

server/drizzle/meta/0004_snapshot.json

@@ -272,7 +272,7 @@
           "name": "firebase_id",
           "type": "text",
           "primaryKey": false,
-          "notNull": true,
+          "notNull": false,
           "autoincrement": false
         },
         "name": {
@@ -402,4 +402,4 @@
     "tables": {},
     "columns": {}
   }
-}
+}