Do not use a store for API

This commit is contained in:
Jan Bader 2022-02-14 08:11:42 +00:00
parent ca93e9cd55
commit d11c0036b5
8 changed files with 43 additions and 56 deletions

26
web/src/api.ts Normal file
View File

@ -0,0 +1,26 @@
import { useSessionStore } from "./stores/session";
export const BASE_URL = "/api/v1"
export function GET(path: string) {
const sessionStore = useSessionStore();
return fetch(BASE_URL + path, {
headers: sessionStore.AuthHeaders,
})
};
export function POST(path: string, body: FormData | string | null) {
const sessionStore = useSessionStore();
return fetch(BASE_URL + path, {
method: "POST",
headers: sessionStore.AuthHeaders,
body: body,
})
}
export function DELETE(path: string) {
const sessionStore = useSessionStore();
return fetch(BASE_URL + path, {
method: "DELETE",
headers: sessionStore.AuthHeaders,
})
}

View File

@ -1,6 +1,6 @@
<script lang="ts">
import { defineComponent, PropType } from "vue"
import { useAPI } from "../stores/api";
import { GET } from "../api";
import { useBudgetsStore } from "../stores/budget";
export interface Suggestion {
@ -42,9 +42,8 @@ export default defineComponent({
return;
}
const api = useAPI();
const budgetStore = useBudgetsStore();
api.GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
.then(x=>x.json())
.then(x => {
let suggestions = x || [];

View File

@ -3,7 +3,7 @@ import { ref } from "vue"
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
import { useAPI } from "../stores/api";
import { POST } from "../api";
import { useAccountStore } from "../stores/budget-account";
const props = defineProps<{
@ -19,8 +19,7 @@ const Amount = ref(0);
function saveTransaction(e: MouseEvent) {
e.preventDefault();
const api = useAPI();
api.POST("/transaction/new", JSON.stringify({
POST("/transaction/new", JSON.stringify({
budget_id: props.budgetid,
account_id: props.accountid,
date: TransactionDate,

View File

@ -1,6 +1,6 @@
<script lang="ts">
import { defineComponent } from "vue"
import { useAPI } from "../stores/api";
import { DELETE, POST } from "../api";
import { useBudgetsStore } from "../stores/budget";
import { useSessionStore } from "../stores/session";
@ -35,8 +35,7 @@ export default defineComponent({
if (currentBudgetID == null)
return;
const api = useAPI();
api.DELETE("/budget/" + currentBudgetID);
DELETE("/budget/" + currentBudgetID);
const budgetStore = useSessionStore();
budgetStore.Budgets.delete(currentBudgetID);
@ -44,8 +43,7 @@ export default defineComponent({
},
clearBudget() {
const currentBudgetID = useBudgetsStore().CurrentBudgetID;
const api = useAPI();
api.POST("/budget/" + currentBudgetID + "/settings/clear", null)
POST("/budget/" + currentBudgetID + "/settings/clear", null)
},
cleanNegative() {
// <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>

View File

@ -1,28 +0,0 @@
import { defineStore } from "pinia";
import { useSessionStore } from "./session";
export const useAPI = defineStore("api", {
actions: {
GET(path : string) {
const sessionStore = useSessionStore();
return fetch("/api/v1" + path, {
headers: sessionStore.AuthHeaders,
})
},
POST(path : string, body : FormData | string | null) {
const sessionStore = useSessionStore();
return fetch("/api/v1" + path, {
method: "POST",
headers: sessionStore.AuthHeaders,
body: body,
})
},
DELETE(path : string) {
const sessionStore = useSessionStore();
return fetch("/api/v1" + path, {
method: "DELETE",
headers: sessionStore.AuthHeaders,
})
},
}
});

View File

@ -1,5 +1,5 @@
import { defineStore } from "pinia"
import { useAPI } from "./api";
import { GET } from "../api";
import { useSessionStore } from "./session";
interface State {
@ -81,14 +81,12 @@ export const useAccountStore = defineStore("budget/account", {
await this.FetchAccount(accountid);
},
async FetchAccount(accountid : string) {
const api = useAPI();
const result = await api.GET("/account/" + accountid + "/transactions");
const result = await GET("/account/" + accountid + "/transactions");
const response = await result.json();
this.Transactions = response.Transactions;
},
async FetchMonthBudget(budgetid : string, year : number, month : number) {
const api = useAPI();
const result = await api.GET("/budget/" + budgetid + "/" + year + "/" + month);
const result = await GET("/budget/" + budgetid + "/" + year + "/" + month);
const response = await result.json();
this.addCategoriesForMonth(year, month, response.Categories);
},

View File

@ -1,5 +1,5 @@
import { defineStore } from "pinia";
import { useAPI } from "./api";
import { GET, POST } from "../api";
import { useAccountStore } from "./budget-account";
import { Budget, useSessionStore } from "./session";
@ -25,15 +25,13 @@ export const useBudgetsStore = defineStore('budget', {
},
actions: {
ImportYNAB(formData: FormData) {
const api = useAPI();
return api.POST(
return POST(
"/budget/" + this.CurrentBudgetID + "/import/ynab",
formData,
);
},
async NewBudget(budgetName: string): Promise<void> {
const api = useAPI();
const result = await api.POST(
const result = await POST(
"/budget/new",
JSON.stringify({ name: budgetName })
);
@ -51,8 +49,7 @@ export const useBudgetsStore = defineStore('budget', {
await this.FetchBudget(budgetid);
},
async FetchBudget(budgetid: string) {
const api = useAPI();
const result = await api.GET("/budget/" + budgetid);
const result = await GET("/budget/" + budgetid);
const response = await result.json();
for (const account of response.Accounts || []) {
useAccountStore().Accounts.set(account.ID, account);

View File

@ -1,6 +1,6 @@
import { StorageSerializers, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia'
import { useAPI } from './api';
import { POST } from '../api';
interface State {
Session: Session | null
@ -40,14 +40,12 @@ export const useSessionStore = defineStore('session', {
this.Budgets = x.Budgets;
},
async login(login: any) {
const api = useAPI();
const response = await api.POST("/user/login", JSON.stringify(login));
const response = await POST("/user/login", JSON.stringify(login));
const result = await response.json();
return this.loginSuccess(result);
},
async register(login : any) {
const api = useAPI();
const response = await api.POST("/user/register", JSON.stringify(login));
const response = await POST("/user/register", JSON.stringify(login));
const result = await response.json();
return this.loginSuccess(result);
},