feat: members page

composables/user.ts

@@ -2,18 +2,26 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import type { User } from '~/shared/types'
 
 const queryKeyFactory = {
-  user: ['user'],
+  currentUser: ['current-user'],
+  users: ['users'],
 }
 
 export function useUser() {
   const firebaseCurrentUser = useCurrentUser()
   return useQuery({
-    queryKey: queryKeyFactory.user,
+    queryKey: queryKeyFactory.currentUser,
     queryFn: () => $api<User>(`/api/user/${firebaseCurrentUser.value?.uid}`),
     enabled: computed(() => !!firebaseCurrentUser.value), // Only run when user exists
   })
 }
 
+export function useUsers() {
+  return useQuery({
+    queryKey: queryKeyFactory.users,
+    queryFn: () => $api(`/api/user`),
+  })
+}
+
 export function useUserSignOutMutation() {
   const auth = useFirebaseAuth()
   const queryClient = useQueryClient()

pages/admin/members/index.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+const { data: users } = useUsers()
+</script>
+
 <template>
-  <span>
-    Imagine something here!
-  </span>
+  <div class="p-4">
+    <h1 class="font-semibold text-lg">
+      Members
+    </h1>
+
+    <UTable :rows="users" />
+  </div>
 </template>

server/api/user/index.get.ts

@@ -1,5 +1,14 @@
 export default defineProtectedEventHandler((event) => {
-  return event.context.database.query.users.findMany()
+  return event.context.database.query.users.findMany({
+    columns: {
+      id: true,
+      memberId: true,
+      memberType: true,
+      name: true,
+      email: true,
+      graduationYear: true,
+    },
+  })
 }, {
   cache: {
     maxAge: 60,