add crud store/api service

client/src/api/UsersApi.ts

@@ -0,0 +1,20 @@
+
+// services are kinda whatever, but in general its a good idea for all api calls to be within a service (at least thats how angular handles it)
+// this user service will handle all to <-> from the server when handling user objects
+// should be injected with the http client (I think its axios ?)
+
+import axios from "axios";
+import type {AxiosResponse } from "axios";
+import type { User } from "../models/User.ts";
+
+const API_URL: string = "/api/items";
+
+export const getUsers = () => axios.get<User[]>(API_URL);
+
+export const getUser = (id: number) => axios.get<User>(`${API_URL}/${id}`);
+
+export const createUser = (data: User) => axios.post<User>(API_URL, data);
+
+export const updateUser = (id: number, data: User) => axios.put<User>(`${API_URL}/${id}`, data);
+
+export const deleteUser = (id: number) => axios.delete<User>(`${API_URL}/${id}`);

client/src/models/User.ts

@@ -1,2 +1,8 @@
 
 // models are the data objects stored in the database. models defined here must match models defined in api/models 
+
+export interface User {
+    id: number;
+    name: string;
+    email: string
+}

client/src/services/UsersService.ts

@@ -1,4 +0,0 @@
-
-// services are kinda whatever, but in general its a good idea for all api calls to be within a service (at least thats how angular handles it)
-// this user service will handle all to <-> from the server when handling user objects
-// should be injected with the http client (I think its axios ?)

client/src/stores/UsersStore.ts

@@ -3,3 +3,46 @@
 // Pinia (?) i kinda dont get it because in angular you just hook a component to a service and that's it,
 // though I guess the service handled the state management
 // sighh
+
+import { defineStore } from "pinia";
+import type { User } from "../models/User.ts";
+import * as api from "../api/UsersApi";
+
+interface UserState {
+    users: User[];
+    loading: boolean;
+}
+
+export const useUsersStore = defineStore("users", {
+    
+    state: (): UserState => ({
+        users: [],
+        loading: false
+    }),
+
+    actions: {
+        async fetchItems() {
+            this.loading = true;
+            const response = await api.getUsers();
+            this.users = response.data;
+            this.loading = false;
+        },
+
+        async addUser(user: User) {
+            const response = await api.createUser(user);
+            this.users.push(response.data);
+        },
+
+        async updateUser(id: number, user: User) {
+            await api.updateUser(id, user);
+            const index = this.users.findIndex(i => i.id === id);
+            this.users[index] = user;
+        },
+
+        async removeUser(id: number) {
+            await api.deleteUser(id);
+            this.users = this.users.filter(i => i.id !== id);
+        }
+    }
+
+});