feat: home page ish

components/app/home/membership-card.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7SkeletonBlock } from 'framework7-vue'
+import type { User } from '~/shared/types'
+
+const { data: user, isLoading: userIsLoading } = useUser()
+
+const membershipGradient: Record<Exclude<User['memberType'], null>, string> = {
+  associate: 'bg-gradient-to-br from-blue-500 to-blue-600',
+  affiliate: 'bg-gradient-to-br from-purple-500 to-purple-600',
+  exco: 'bg-gradient-to-br from-red-500 to-red-600',
+  ordinary: 'bg-gradient-to-br from-yellow-500 to-yellow-600',
+  revoked: 'bg-gradient-to-br from-gray-500 to-gray-600',
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="userIsLoading" class="h-55">
+      <f7SkeletonBlock class="rounded-md" effect="fade" height="100%" />
+    </div>
+
+    <f7Card v-else-if="user" class="m-0!">
+      <f7CardHeader 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">
+              {{ user.memberId }}
+            </span>
+          </div>
+          <div class="flex flex-col text-base">
+            <span class="font-semibold">
+              Class of {{ user.graduationYear }}
+            </span>
+            <span class="text-sm">
+              {{ user.memberType?.[0].toLocaleUpperCase() }}{{ user.memberType?.slice(1, user.memberType?.length) }}
+              member
+            </span>
+          </div>
+        </div>
+      </f7CardHeader>
+      <f7CardFooter>
+        <span>
+          <strong>Coming back?</strong>
+          <br>
+          <span>Tap on this card and present it to the security at the front gate.</span>
+        </span>
+      </f7CardFooter>
+    </f7Card>
+  </div>
+</template>

components/app/home/page.vue

@@ -9,7 +9,8 @@ defineProps<{
 
 const auth = useCurrentUser()
 const authLoaded = useIsCurrentUserLoaded()
-const { data: user } = useUser()
+// TODO @qin-guan: Error state handling
+const { data: user, isLoading: userIsLoading } = useUser()
 
 const state = reactive({
   showLoginScreen: false,
@@ -27,21 +28,17 @@ watch([authLoaded, auth], (values) => {
     <AppLoginScreen v-model:opened="state.showLoginScreen" />
     <f7Navbar large transparent :sliding="false">
       <f7NavTitle sliding>
-        Nice
+        SSTAA
       </f7NavTitle>
       <f7NavTitleLarge>
-        Welcome,
-        <f7SkeletonText v-if="!user?.name" effect="fade">
-          Placeholder name
-        </f7SkeletonText>
-        <span v-else>
-          {{ user?.name }}
-        </span>
+        SSTAA
       </f7NavTitleLarge>
     </f7Navbar>
 
     <f7List inset class="space-y-8">
-      <f7SkeletonBlock class="rounded-md" effect="fade" height="15rem" />
+      <div>
+        <AppHomeMembershipCard />
+      </div>
 
       <f7BlockTitle>
         What's Happening

composables/user.ts

@@ -1,6 +1,15 @@
+import { useQuery } from '@tanstack/vue-query'
 import type { User } from '~/shared/types'
 
+const queryKeyFactory = {
+  user: ['user'],
+}
+
 export function useUser() {
-  const auth = useCurrentUser()
-  return useApiFetch<User>(() => `/api/user/${auth.value?.uid}`, { immediate: false, watch: [() => auth.value?.uid] })
+  const firebaseCurrentUser = useCurrentUser()
+  return useQuery({
+    queryKey: queryKeyFactory.user,
+    queryFn: () => $api<User>(`/api/user/${firebaseCurrentUser.value?.uid}`),
+    enabled: computed(() => !!firebaseCurrentUser.value), // Only run when user exists
+  })
 }

nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     'nuxt-vuefire',
     '@unocss/nuxt',
     '@vite-pwa/nuxt',
+    '@vueuse/nuxt',
   ],
 
   routeRules: {

package.json

@@ -18,9 +18,14 @@
     "@libsql/client": "^0.3.4",
     "@nuxt/devtools": "latest",
     "@paralleldrive/cuid2": "^2.2.2",
+    "@tanstack/query-persist-client-core": "^4.35.3",
+    "@tanstack/query-sync-storage-persister": "^4.35.3",
+    "@tanstack/vue-query": "^4.35.3",
     "@unocss/nuxt": "^0.56.0",
     "@vite-pwa/assets-generator": "^0.0.10",
     "@vite-pwa/nuxt": "^0.1.1",
+    "@vueuse/core": "^10.4.1",
+    "@vueuse/nuxt": "^10.4.1",
     "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",
     "drizzle-kit": "^0.19.13",

plugins/vue-query.ts

@@ -0,0 +1,24 @@
+import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vueQueryOptions: VueQueryPluginOptions = {
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          cacheTime: 1000 * 60 * 60 * 24,
+          staleTime: 1000 * 60 * 60 * 24,
+        },
+      },
+    },
+    clientPersister: (queryClient) => {
+      return persistQueryClient({
+        queryClient,
+        persister: createSyncStoragePersister({ storage: localStorage }),
+      })
+    },
+  }
+
+  nuxtApp.vueApp.use(VueQueryPlugin, vueQueryOptions)
+})

server/api/user/[id].get.ts

@@ -10,4 +10,8 @@ export default defineProtectedEventHandler(async (event) => {
   }
 
   return event.context.user
+}, {
+  cache: {
+    maxAge: 5,
+  },
 })