Create user service and store

thanasoft-front/src/services/user.ts

@@ -16,6 +16,16 @@ export interface UserSummary {
   }>;
 }
 
+export interface UserListResponse {
+  data: UserSummary[];
+  message: string;
+}
+
+export interface UserResponse {
+  data: UserSummary;
+  message: string;
+}
+
 export interface CreateUserPayload {
   name: string;
   email: string;
@@ -34,6 +44,15 @@ export interface UpdateUserPayload {
 }
 
 export const UserService = {
+  async getUsers(): Promise<UserSummary[]> {
+    const response = await request<UserListResponse>({
+      url: "/api/users",
+      method: "get",
+    });
+
+    return response.data;
+  },
+
   async searchUserByEmail(email: string): Promise<UserSummary | null> {
     const response = await request<{
       data: UserSummary | null;
@@ -47,11 +66,17 @@ export const UserService = {
     return response.data;
   },
 
+  async getUser(id: number): Promise<UserSummary> {
+    const response = await request<UserResponse>({
+      url: `/api/users/${id}`,
+      method: "get",
+    });
+
+    return response.data;
+  },
+
   async createUser(payload: CreateUserPayload): Promise<UserSummary> {
-    const response = await request<{
-      data: UserSummary;
-      message: string;
-    }>({
+    const response = await request<UserResponse>({
       url: "/api/users",
       method: "post",
       data: payload,
@@ -63,10 +88,7 @@ export const UserService = {
   async updateUser(payload: UpdateUserPayload): Promise<UserSummary> {
     const { id, ...data } = payload;
 
-    const response = await request<{
-      data: UserSummary;
-      message: string;
-    }>({
+    const response = await request<UserResponse>({
       url: `/api/users/${id}`,
       method: "put",
       data,
@@ -74,6 +96,13 @@ export const UserService = {
 
     return response.data;
   },
+
+  async deleteUser(id: number): Promise<{ message: string }> {
+    return request<{ message: string }>({
+      url: `/api/users/${id}`,
+      method: "delete",
+    });
+  },
 };
 
 export default UserService;

thanasoft-front/src/stores/userStore.ts

@@ -10,11 +10,49 @@ import type {
 export const useUserStore = defineStore("user", () => {
   const loading = ref(false);
   const error = ref<string | null>(null);
+  const users = ref<UserSummary[]>([]);
+  const currentUser = ref<UserSummary | null>(null);
   const searchedUser = ref<UserSummary | null>(null);
 
   const isLoading = computed(() => loading.value);
+  const allUsers = computed(() => users.value);
+  const selectedUser = computed(() => currentUser.value);
   const currentSearchUser = computed(() => searchedUser.value);
 
+  const fetchUsers = async () => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const result = await UserService.getUsers();
+      users.value = result;
+      return result;
+    } catch (err: any) {
+      error.value =
+        err.response?.data?.message || err.message || "Failed to fetch users";
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchUser = async (id: number) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const user = await UserService.getUser(id);
+      currentUser.value = user;
+      return user;
+    } catch (err: any) {
+      error.value =
+        err.response?.data?.message || err.message || "Failed to fetch user";
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
   const searchUserByEmail = async (email: string) => {
     loading.value = true;
     error.value = null;
@@ -38,6 +76,8 @@ export const useUserStore = defineStore("user", () => {
 
     try {
       const user = await UserService.createUser(payload);
+      users.value = [user, ...users.value.filter((item) => item.id !== user.id)];
+      currentUser.value = user;
       searchedUser.value = user;
       return user;
     } catch (err: any) {
@@ -55,6 +95,8 @@ export const useUserStore = defineStore("user", () => {
 
     try {
       const user = await UserService.updateUser(payload);
+      users.value = users.value.map((item) => (item.id === user.id ? user : item));
+      currentUser.value = user;
       searchedUser.value = user;
       return user;
     } catch (err: any) {
@@ -66,14 +108,44 @@ export const useUserStore = defineStore("user", () => {
     }
   };
 
+  const deleteUser = async (id: number) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await UserService.deleteUser(id);
+      users.value = users.value.filter((item) => item.id !== id);
+      if (currentUser.value?.id === id) {
+        currentUser.value = null;
+      }
+      if (searchedUser.value?.id === id) {
+        searchedUser.value = null;
+      }
+      return response;
+    } catch (err: any) {
+      error.value =
+        err.response?.data?.message || err.message || "Failed to delete user";
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
   return {
     loading,
     error,
+    users,
+    currentUser,
     searchedUser,
     isLoading,
+    allUsers,
+    selectedUser,
     currentSearchUser,
+    fetchUsers,
+    fetchUser,
     searchUserByEmail,
     createUser,
     updateUser,
+    deleteUser,
   };
 });