designtopack/src/stores/projects.js

import { defineStore } from 'pinia';
import { useApiStore } from './api.js';
import { ref, computed } from 'vue';

export const useProjectsStore = defineStore('projects', () => {
  const isProjectsLoading = ref(true);
  const projects = ref([]);

  const currentProjects = computed(() => {
    return projects.value.filter((project) => project.status === 'listed');
  });
  const draftProjects = computed(() => {
    return projects.value.filter((project) => project.status === 'draft');
  });
  const archivedProjects = computed(() => {
    return projects.value.filter((project) => project.status === 'unlisted');
  });

  const api = useApiStore();
  api.fetchData('projects').then((json) => {
    isProjectsLoading.value = false;
    projects.value = json.page.children;
  });

  // Functions
  function getProjectByUuid(uuid) {
    const project = projects.value.find((project) => project.uuid === uuid);
    return project;
  }

  return {
    projects,
    currentProjects,
    archivedProjects,
    draftProjects,
    getProjectByUuid,
    isProjectsLoading,
  };
});