From e583a96fe316e70a81c4699e7273247a558c62b6 Mon Sep 17 00:00:00 2001
From: Aaron Klinker <aaronklinker1@gmail.com>
Date: Sun, 1 Sep 2024 22:45:40 -0500
Subject: [PATCH] fix: Load projects from firebase when logged in

---
 web/composables/useDeleteProject.ts              | 10 +++++++---
 web/composables/useEditProject.ts                |  8 ++++----
 web/composables/useInvalidateProjectListQuery.ts | 11 +++++++++++
 web/composables/useProject.ts                    |  2 +-
 web/composables/useProjects.ts                   |  5 -----
 web/layouts/default.vue                          |  2 +-
 6 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 web/composables/useInvalidateProjectListQuery.ts
 delete mode 100644 web/composables/useProjects.ts

diff --git a/web/composables/useDeleteProject.ts b/web/composables/useDeleteProject.ts
index 0f38181..bac8551 100644
--- a/web/composables/useDeleteProject.ts
+++ b/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);
   };
 }
diff --git a/web/composables/useEditProject.ts b/web/composables/useEditProject.ts
index 4d7c990..cd81073 100644
--- a/web/composables/useEditProject.ts
+++ b/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();
   };
 }
diff --git a/web/composables/useInvalidateProjectListQuery.ts b/web/composables/useInvalidateProjectListQuery.ts
new file mode 100644
index 0000000..dfa6c3e
--- /dev/null
+++ b/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],
+    });
+  };
+}
diff --git a/web/composables/useProject.ts b/web/composables/useProject.ts
index 0bdfd94..c0ec71c 100644
--- a/web/composables/useProject.ts
+++ b/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));
 }
diff --git a/web/composables/useProjects.ts b/web/composables/useProjects.ts
deleted file mode 100644
index 63c02cb..0000000
--- a/web/composables/useProjects.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { Project } from '~/utils/projects';
-
-export default createGlobalState(() =>
-  useLocalStorage<Project[]>('@cutlist/projects', []),
-);
diff --git a/web/layouts/default.vue b/web/layouts/default.vue
index 0da34d3..cfddb46 100644
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@@ -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) => {