tethys.backend/resources/js/Stores/main.ts

import { defineStore } from 'pinia';
import axios from 'axios';

interface Person {
    id: number;
    name: string;
    email: string;
    datasetCount: string;
    created_at: string;
}

interface TransactionItem {
    amount: number;
    account: string;
	name: string;
    date: string;
    type: string;
    business: string;
}

export const MainService = defineStore('main', {
    state: () => ({
        /* User */
        userName: '',
        userEmail: null,
        userAvatar: null,

        /* Field focus with ctrl+k (to register only once) */
        isFieldFocusRegistered: false,

        /* Sample data for starting dashboard(commonly used) */
        clients: [],
        history: [] as Array<TransactionItem>,
        authors: [] as Array<Person>,
        datasets: [],
    }),
    actions: {
        // payload = authenticated user
        setUser(payload) {
            if (payload.name) {
                this.userName = payload.name;
            }
            if (payload.email) {
                this.userEmail = payload.email;
            }
            if (payload.avatar) {
                this.userAvatar = payload.avatar;
            }
        },

        fetch(sampleDataKey) {
            // sampleDataKey= clients or history
            axios
                .get(`data-sources/${sampleDataKey}.json`)
                .then((r) => {
                    if (r.data && r.data.data) {
                        this[sampleDataKey] = r.data.data;
                    }
                })
                .catch((error) => {
                    alert(error.message);
                });
        },

        fetchApi(sampleDataKey) {
            // sampleDataKey= authors or datasets
            axios
                .get(`api/${sampleDataKey}`)
                .then((r) => {
                    if (r.data) {
                        this[sampleDataKey] = r.data;
                    }
                })
                .catch((error) => {
                    alert(error.message);
                });
        },
    },
});