✨ Add state store to new frontend (#592)

src/new-frontend/package.json

@@ -22,7 +22,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.49.3",
-    "react-router-dom": "6.21.1"
+    "react-icons": "5.0.1",
+    "react-router-dom": "6.21.1",
+    "zustand": "4.5.0"
   },
   "devDependencies": {
     "@types/node": "20.10.5",

src/new-frontend/src/store/items-store.tsx

@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import { ItemCreate, ItemOut, ItemsService } from "../client";
+
+interface ItemsStore { 
+    items: ItemOut[];
+    getItems: () => Promise<void>;
+    addItem: (item: ItemCreate) => Promise<void>;
+    deleteItem: (id: number) => Promise<void>;
+}
+
+export const useItemsStore = create<ItemsStore>((set) => ({
+    items: [],
+    getItems: async () => {
+        const itemsResponse = await ItemsService.readItems({ skip: 0, limit: 10 });
+        set({ items: itemsResponse });
+    },
+    addItem: async (item: ItemCreate) => {
+        const itemResponse = await ItemsService.createItem({ requestBody: item});
+        set((state) => ({ items: [...state.items, itemResponse] }));
+    },
+    deleteItem: async (id: number) => {
+        await ItemsService.deleteItem({ id });
+        set((state) => ({ items: state.items.filter((item) => item.id !== id) }));
+    }
+}));

src/new-frontend/src/store/user-store.tsx

@@ -0,0 +1,19 @@
+import { create } from "zustand";
+import { UserOut, UsersService } from "../client";
+
+interface UserStore {
+    user: UserOut | null;
+    getUser: () => Promise<void>;
+    resetUser: () => void;
+}
+
+export const useUserStore = create<UserStore>((set) => ({
+    user: null,
+    getUser: async () => {
+        const user = await UsersService.readUserMe();
+        set({ user });
+    },
+    resetUser: () => {
+        set({ user: null });
+    }
+}));

src/new-frontend/src/store/users-store.tsx

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { UserCreate, UserOut, UsersService } from "../client";
+
+interface UsersStore {
+    users: UserOut[];
+    getUsers: () => Promise<void>;
+    addUser: (user: UserCreate) => Promise<void>;
+}
+
+export const useUsersStore = create<UsersStore>((set) => ({
+    users: [],
+    getUsers: async () => {
+        const usersResponse = await UsersService.readUsers({ skip: 0, limit: 10 });
+        set({ users: usersResponse });
+    },
+    addUser: async (user: UserCreate) => {
+        const userResponse = await UsersService.createUser({ requestBody: user });
+        set((state) => ({ users: [...state.users, userResponse] }));
+    },
+    // TODO: Add delete user
+}))