List projects from accout service

Author: aklinker1

web/components/ProjectList.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+const createNewProject = useCreateNewProject();
+
+const { data: projects, isFetching } = useProjectListQuery();
+const filter = ref('');
+const filteredProjects = useArrayFilter(projects, (p) =>
+  p.name.toLowerCase().includes(filter.value.toLowerCase()),
+);
+
+const openProject = useOpenProject();
+const deleteProject = useDeleteProject();
+</script>
+
+<template>
+  <ul class="flex flex-col gap-2">
+    <li>
+      <UInput
+        v-model="filter"
+        placeholder="Filter projects..."
+        icon="i-heroicons-magnifying-glass"
+      />
+    </li>
+    <ProjectListItem
+      v-for="project of filteredProjects"
+      :key="project.id"
+      :project
+      @open="openProject"
+      @delete="deleteProject"
+    />
+    <li v-if="isFetching" class="flex justify-center">
+      <UButton
+        class="pointer-events-none"
+        loading
+        variant="ghost"
+        color="white"
+        disabled
+      >
+        Loading...
+      </UButton>
+    </li>
+    <li v-else-if="filteredProjects.length === 0" class="text-center py-16">
+      No projects,
+      <ULink variant="link" @click="createNewProject">add one</ULink>
+    </li>
+    <slot />
+  </ul>
+</template>

web/composables/useAccountServiceId.ts

@@ -0,0 +1,4 @@
+export default function () {
+  const account = useAccountService();
+  return computed(() => account.value.id);
+}

web/composables/useProjectListQuery.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/vue-query';
+
+export default function () {
+  const account = useAccountService();
+  const accountId = useAccountServiceId();
+  const user = useCurrentUser();
+  return useQuery({
+    queryKey: ['projects', accountId],
+    queryFn: () => account.value.listProjects(),
+    initialData: [],
+  });
+}

web/pages/account.vue

@@ -48,7 +48,7 @@ async function syncProjects() {
   <div class="bg-gray-200 dark:bg-gray-800 h-full p-8 flex flex-col gap-4">
     <h2 class="text-2xl font-medium line-clamp-1 truncate">Account</h2>
     <template v-if="!currentUser">
-      <p>Login to share settings and projects between devices</p>
+      <p>Login to share settings and projects between devices.</p>
       <div ref="container" v-if="!currentUser" />
     </template>
     <template v-else>

web/pages/index.vue

@@ -2,15 +2,6 @@
 import { version } from '~~/package.json';
 
 const createNewProject = useCreateNewProject();
-
-const projects = useProjects();
-const filter = ref('');
-const filteredProjects = useArrayFilter(projects, (p) =>
-  p.name.toLowerCase().includes(filter.value.toLowerCase()),
-);
-
-const openProject = useOpenProject();
-const deleteProject = useDeleteProject();
 </script>
 
 <template>
@@ -28,25 +19,7 @@ const deleteProject = useDeleteProject();
         >
       </div>
       <ClientOnly>
-        <ul class="flex flex-col gap-2">
-          <li v-if="projects.length">
-            <UInput
-              v-model="filter"
-              placeholder="Filter projects..."
-              icon="i-heroicons-magnifying-glass"
-            />
-          </li>
-          <ProjectListItem
-            v-for="project of filteredProjects"
-            :key="project.id"
-            :project
-            @open="openProject"
-            @delete="deleteProject"
-          />
-          <li v-if="filteredProjects.length === 0" class="text-center py-16">
-            No projects,
-            <ULink variant="link" @click="createNewProject">add one</ULink>
-          </li>
+        <ProjectList>
           <li class="text-center pt-16 opacity-50">
             <ULink
               class="hover:underline"
@@ -69,7 +42,7 @@ const deleteProject = useDeleteProject();
               >User Manual</ULink
             >
           </li>
-        </ul>
+        </ProjectList>
       </ClientOnly>
     </div>
   </div>

web/plugins/vue-query.ts

@@ -19,7 +19,7 @@ export default defineNuxtPlugin((nuxt) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
-        refetchOnMount: false,
+        refetchOnMount: true,
         refetchOnWindowFocus: false,
         retry: false,
       },

web/utils/accounts/AccountService.ts

@@ -1,6 +1,7 @@
 import type { Project } from '../projects';
 
 export interface AccountService {
+  id: string;
   getSettings(): Promise<AccountSettings>;
   setSettings(changes: Partial<AccountSettings>): Promise<void>;
   listProjects(): Promise<Project[]>;

web/utils/accounts/FirebaseAccountService.ts

@@ -21,6 +21,7 @@ export function createFirebaseAccountService(): AccountService {
   const projectDoc = (id: string) => doc(usersRef, getUid(), 'projects', id);
 
   return {
+    id: 'firebase',
     async getSettings() {
       const res = await getDoc(settingsDoc());
       return {

web/utils/accounts/LocalAccountService.ts

@@ -65,6 +65,7 @@ export function createLocalAccountService(): AccountService {
   };
 
   return {
+    id: 'local',
     async getSettings() {
       return getSettings();
     },