fix: Load projects from firebase when logged in

Author: aklinker1

web/composables/useDeleteProject.ts

@@ -1,9 +1,13 @@
+import useInvalidateProjectListQuery from './useInvalidateProjectListQuery';
+
 export default function () {
-  const projects = useProjects();
+  const account = useAccountService();
   const closeTab = useCloseTab();
+  const invalidateProjectsQuery = useInvalidateProjectListQuery();
 
-  return (id: string) => {
+  return async (id: string) => {
+    await account.value.removeProject(id);
+    await invalidateProjectsQuery();
     closeTab(id);
-    projects.value = projects.value.filter((project) => project.id !== id);
   };
 }

web/composables/useEditProject.ts

@@ -1,6 +1,7 @@
 export default function () {
   const { openDialog } = useDialogState();
-  const allProjects = useProjects();
+  const account = useAccountService();
+  const invalidateProjectsQuery = useInvalidateProjectListQuery();
 
   const openExistingProject = (project: Project) =>
     new Promise<Project>((res, rej) => {
@@ -16,8 +17,7 @@ export default function () {
     if (project == null) return;
 
     const newProject = await openExistingProject(project);
-    allProjects.value = allProjects.value.map((p) =>
-      p.id === newProject.id ? newProject : p,
-    );
+    await account.value.saveProject(newProject);
+    await invalidateProjectsQuery();
   };
 }

web/composables/useInvalidateProjectListQuery.ts

@@ -0,0 +1,11 @@
+import { useQueryClient } from '@tanstack/vue-query';
+
+export default function () {
+  const client = useQueryClient();
+  const accountId = useAccountServiceId();
+  return async () => {
+    client.invalidateQueries({
+      queryKey: ['projects', accountId.value],
+    });
+  };
+}

web/composables/useProject.ts

@@ -1,7 +1,7 @@
 export default function () {
   const route = useRoute();
   const id = computed(() => route.params.id as string | undefined);
-  const projects = useProjects();
+  const { data: projects } = useProjectListQuery();
 
   return computed(() => projects.value.find((p) => p.id === id.value));
 }

web/composables/useProjects.ts

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 const openIds = useOpenProjectIds();
-const projects = useProjects();
+const { data: projects } = useProjectListQuery();
 
 const tabs = computed(() =>
   openIds.value.map((id) => {