redesign user data api

src/App.vue

@@ -13,7 +13,4 @@ import Menu from "./components/Menu.vue";
 import { usePageStore } from "./stores/page";
 
 const { page } = storeToRefs(usePageStore());
-
-const { user } = storeToRefs(useUserStore());
-user.value = kirbyData.user;
 </script>

src/router/router.js

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
 import routes from "./routes";
 import { useApiStore } from "../stores/api";
 import { usePageStore } from "../stores/page";
+import { useUserStore } from "../stores/user";
 import { getActivePinia } from "pinia";
 
 const router = createRouter({
@@ -12,12 +13,14 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
   const pinia = getActivePinia();
   const api = useApiStore(pinia);
-  const page = usePageStore(pinia);
+  const pageStore = usePageStore(pinia);
+  const userStore = useUserStore(pinia);
 
   try {
-    const res = await api.fetchPageData(to.path);
+    const res = await api.fetchData(to.path);
 
-    page.page = res;
+    pageStore.page = res.page;
+    userStore.user = res.user;
     next();
   } catch (error) {
     console.error(error);

src/stores/addImagesModal.js

@@ -55,10 +55,10 @@ export const useAddImagesModalStore = defineStore("add-images-modal", () => {
 
   const api = useApiStore();
   api
-    .fetchPageData("materials")
+    .fetchData("materials")
     .then((json) => (images.value = tabs.value[1].images = json.images));
 
-  api.fetchPageData("creations").then((json) => {
+  api.fetchData("creations").then((json) => {
     images.value = tabs.value[2].images = json.images;
   });
 

src/stores/api.js

@@ -16,7 +16,7 @@ export const useApiStore = defineStore("api", () => {
    *
    * @example
    * // Fetch data for the current page
-   * fetchPageData().then(data => {
+   * fetchData().then(data => {
    *   console.log(data);
    * }).catch(error => {
    *   console.error('Error fetching data:', error);
@@ -24,13 +24,13 @@ export const useApiStore = defineStore("api", () => {
    *
    * @example
    * // Fetch data for a specific path
-   * fetchPageData('/about').then(data => {
+   * fetchData('/about').then(data => {
    *   console.log(data);
    * }).catch(error => {
    *   console.error('Error fetching data:', error);
    * });
    */
-  async function fetchPageData(path = window.location.pathname) {
+  async function fetchData(path = window.location.pathname) {
     const isHomePage = path === "/";
     path = path === "/" ? "/home" : path;
     path = path.startsWith("/") ? path : "/" + path;
@@ -120,5 +120,5 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  return { fetchDataThroughKQL, fetchPageData, fetchRoute };
+  return { fetchDataThroughKQL, fetchData, fetchRoute };
 });

src/stores/projects.js

@@ -14,8 +14,8 @@ export const useProjectsStore = defineStore("projects", () => {
 
   const api = useApiStore();
   api
-    .fetchPageData("projects")
-    .then((json) => (projects.value = json.children));
+    .fetchData("projects")
+    .then((json) => (projects.value = json.page.children));
 
   return { projects, currentProjects, archivedProjects };
 });