outsourced functions

frontend/src/components/LoginCard.tsx

@@ -1,7 +1,7 @@
 import { useForm } from "@tanstack/react-form";
 import { Input, Button } from "@mui/joy";
 import { useMutation } from "@tanstack/react-query";
-import { signInUser } from "../utils/auth";
+import { signInUser } from "../utils/api/auth";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "@tanstack/react-router";
 

frontend/src/components/StorageRow.tsx

@@ -1,5 +1,5 @@
 import { useQueryClient, useMutation } from "@tanstack/react-query";
-import { deleteStorage, updateStorage } from "../utils/uxFncs";
+import { deleteStorage, updateStorage } from "../utils/api/storages";
 import { useForm } from "@tanstack/react-form";
 import { useStore } from "@tanstack/react-store";
 import { Input, Button } from "@mui/joy";

frontend/src/components/modals/AddStorageModal.tsx

@@ -12,7 +12,7 @@ import { useForm } from "@tanstack/react-form";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import type { NewStorage, AlertInterface } from "../../misc/interfaces";
-import { mutateNewStorage } from "../../utils/uxFncs";
+import { mutateNewStorage } from "../../utils/api/storages";
 import { useState } from "react";
 
 interface AddStorageModalProps {

frontend/src/pages/AddProduct.tsx

@@ -13,7 +13,8 @@ import {
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { useForm } from "@tanstack/react-form";
-import { createProduct, getStorages } from "../utils/uxFncs";
+import { createProduct } from "../utils/api/products";
+import { getStorages } from "../utils/api/storages";
 import type { ProductFormValues } from "../misc/interfaces";
 import Cookies from "js-cookie";
 

frontend/src/pages/Inventory.tsx

@@ -26,7 +26,7 @@ import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { getProducts, deleteSelectedProducts } from "../utils/uxFncs";
+import { getProducts, deleteSelectedProducts } from "../utils/api/products";
 import { visuallyHidden } from "@mui/utils";
 import { formatDate } from "../utils/uxFncs";
 import Cookies from "js-cookie";

frontend/src/pages/Settings.tsx

@@ -12,7 +12,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import Cookies from "js-cookie";
 import { useTranslation } from "react-i18next";
 import type { SettingsIntf } from "../misc/interfaces";
-import { mutateSettings, fetchSettings } from "../utils/uxFncs";
+import { mutateSettings, fetchSettings } from "../utils/api/settings";
 import { useEffect } from "react";
 
 export const Settings = () => {

frontend/src/pages/Storages.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getStorages } from "../utils/uxFncs";
+import { getStorages } from "../utils/api/storages";
 import { Sheet, Table, Button, CircularProgress, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import type { Storage } from "../misc/interfaces";

frontend/src/pages/ViewProduct.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { getProductDetails, getStorages } from "../utils/uxFncs";
+import { getStorages } from "../utils/api/storages.ts";
 import {
   CircularProgress,
   Typography,
@@ -15,7 +15,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import { useForm } from "@tanstack/react-form";
-import { mutateProduct } from "../utils/uxFncs";
+import { mutateProduct, getProductDetails } from "../utils/api/products.ts";
 import { toInputDate } from "../utils/uxFncs";
 import type { ProductFormValues } from "../misc/interfaces";
 import type { productDetailsInterface } from "../misc/interfaces";

frontend/src/routes/app/_hiddenLayout/add-product.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/auth";
+import { isAuthenticated } from "../../../utils/api/auth";
 import { AddProduct } from "../../../pages/AddProduct";
 
 export const Route = createFileRoute("/app/_hiddenLayout/add-product")({

frontend/src/routes/app/_hiddenLayout/app-settings.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/auth";
+import { isAuthenticated } from "../../../utils/api/auth";
 import { Settings } from "../../../pages/Settings";
 
 export const Route = createFileRoute("/app/_hiddenLayout/app-settings")({

frontend/src/routes/app/_hiddenLayout/inventory.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/auth";
+import { isAuthenticated } from "../../../utils/api/auth";
 import { InventoryPage } from "../../../pages/Inventory";
 
 export const Route = createFileRoute("/app/_hiddenLayout/inventory")({

frontend/src/routes/app/_hiddenLayout/storages.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/auth";
+import { isAuthenticated } from "../../../utils/api/auth";
 import { Storages } from "../../../pages/Storages";
 
 export const Route = createFileRoute("/app/_hiddenLayout/storages")({

frontend/src/routes/app/_hiddenLayout/view-product.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { z } from "zod";
-import { isAuthenticated } from "../../../utils/auth";
+import { isAuthenticated } from "../../../utils/api/auth";
 import { ViewProduct } from "../../../pages/ViewProduct";
 
 export const Route = createFileRoute("/app/_hiddenLayout/view-product")({

frontend/src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { isAuthenticated } from "../utils/auth";
+import { isAuthenticated } from "../utils/api/auth";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({

frontend/src/utils/api/auth.ts

@@ -1,8 +1,8 @@
-import { API_BASE } from "../config/api.config";
+import { API_BASE } from "../../config/api.config";
 import Cookies from "js-cookie";
 import type { TFunction } from "i18next";
 import { toast } from "react-toastify";
-import { fetchSettings } from "./uxFncs";
+import { fetchSettings } from "./settings";
 
 export async function isAuthenticated() {
   if (Cookies.get("token")) {

frontend/src/utils/api/products.ts

@@ -0,0 +1,124 @@
+import { API_BASE } from "../../config/api.config";
+import Cookies from "js-cookie";
+import type { ProductFormValues } from "../../misc/interfaces";
+
+export const getProducts = async () => {
+  const result = await fetch(`${API_BASE}/products/all-products`, {
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+  const response = await result.json();
+
+  if (response.code === "ep002") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "sp002") {
+    return response.data;
+  }
+};
+
+export const getProductDetails = async (uuid: string) => {
+  const result = await fetch(`${API_BASE}/products/view?uuid=${uuid}`, {
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "ep003") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "sp003") {
+    return response.data;
+  }
+};
+
+export const mutateProduct = async (
+  values: ProductFormValues,
+  itemUUID: string,
+) => {
+  const payload = {
+    ...values,
+    expiry_date: values.expiry_date || null,
+    bottling_date: values.bottling_date || null,
+  };
+
+  const result = await fetch(
+    `${API_BASE}/products/mutate/update-item?item=${itemUUID}`,
+    {
+      method: "POST",
+      body: JSON.stringify(payload),
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+    },
+  );
+
+  const response = await result.json();
+
+  if (response.code === "ep004") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "sp004") {
+    return response.data;
+  }
+};
+
+export const deleteSelectedProducts = async (uuids: string[]) => {
+  const result = await fetch(`${API_BASE}/products/delete-selection`, {
+    method: "POST",
+    body: JSON.stringify(uuids),
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  console.log(response);
+};
+
+export const createProduct = async (values: ProductFormValues) => {
+  const payload = {
+    name: values.name,
+    description: values.description,
+    price: values.price,
+    amount: values.amount,
+    storage_location: values.storage_location_uuid,
+    expiry_date: values.expiry_date || null,
+    bottling_date: values.bottling_date || null,
+  };
+
+  const result = await fetch(`${API_BASE}/products/new-product`, {
+    method: "POST",
+    body: JSON.stringify(payload),
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "ep001") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "sp001") {
+    return response.data;
+  }
+};

frontend/src/utils/api/settings.ts

@@ -0,0 +1,46 @@
+import { API_BASE } from "../../config/api.config";
+import Cookies from "js-cookie";
+import type { SettingsIntf } from "../../misc/interfaces";
+
+export const fetchSettings = async () => {
+  const result = await fetch(`${API_BASE}/users/settings`, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "eu005") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "su004") {
+    return { success: true, data: response.data, code: response.code };
+  }
+};
+
+export const mutateSettings = async (payload: SettingsIntf) => {
+  const result = await fetch(`${API_BASE}/users/update-app-settings`, {
+    method: "POST",
+    body: JSON.stringify(payload),
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "eu004") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "su003") {
+    return { success: true, code: response.code };
+  }
+};

frontend/src/utils/api/storages.ts

@@ -0,0 +1,94 @@
+import { API_BASE } from "../../config/api.config";
+import Cookies from "js-cookie";
+import type { NewStorage, Storage } from "../../misc/interfaces";
+
+export const getStorages = async () => {
+  const result = await fetch(`${API_BASE}/storage/all-storages`, {
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "es001") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "ss001") {
+    return response.data;
+  }
+};
+
+export const mutateNewStorage = async (values: NewStorage) => {
+  const result = await fetch(`${API_BASE}/storage/new-storage`, {
+    method: "POST",
+    body: JSON.stringify(values),
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "es002") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "ss002") {
+    return response.data;
+  }
+};
+
+export const updateStorage = async (
+  uuid: string,
+  values: Pick<Storage, "name" | "description">,
+) => {
+  const result = await fetch(
+    `${API_BASE}/storage/update-storage?storageUUID=${uuid}`,
+    {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+    },
+  );
+
+  const response = await result.json();
+
+  if (response.code === "ep001") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "sp001") {
+    return response.data;
+  }
+};
+
+export const deleteStorage = async (uuid: string) => {
+  const result = await fetch(`${API_BASE}/storage/delete?uuid=${uuid}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "es004") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "ss004") {
+    return { success: true, code: response.code };
+  }
+};

frontend/src/utils/uxFncs.ts

@@ -1,35 +1,6 @@
-import { API_BASE } from "../config/api.config";
 import Cookies from "js-cookie";
-import type {
-  NewStorage,
-  ProductFormValues,
-  SettingsIntf,
-  Storage,
-} from "../misc/interfaces";
 import i18n from "./i18n";
 
-
-
-export const getProductDetails = async (uuid: string) => {
-  const result = await fetch(`${API_BASE}/products/view?uuid=${uuid}`, {
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "ep003") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "sp003") {
-    return response.data;
-  }
-};
-
 export const toInputDate = (value?: string) => {
   if (!value) {
     return "";
@@ -47,120 +18,6 @@ export const toInputDate = (value?: string) => {
   return date.toISOString().slice(0, 10);
 };
 
-export const mutateProduct = async (
-  values: ProductFormValues,
-  itemUUID: string,
-) => {
-  const payload = {
-    ...values,
-    expiry_date: values.expiry_date || null,
-    bottling_date: values.bottling_date || null,
-  };
-
-  const result = await fetch(
-    `${API_BASE}/products/mutate/update-item?item=${itemUUID}`,
-    {
-      method: "POST",
-      body: JSON.stringify(payload),
-      headers: {
-        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-    },
-  );
-
-  const response = await result.json();
-
-  if (response.code === "ep004") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "sp004") {
-    return response.data;
-  }
-};
-
-export const getStorages = async () => {
-  const result = await fetch(`${API_BASE}/storage/all-storages`, {
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "es001") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "ss001") {
-    return response.data;
-  }
-};
-
-export const createProduct = async (values: ProductFormValues) => {
-  const payload = {
-    name: values.name,
-    description: values.description,
-    price: values.price,
-    amount: values.amount,
-    storage_location: values.storage_location_uuid,
-    expiry_date: values.expiry_date || null,
-    bottling_date: values.bottling_date || null,
-  };
-
-  const result = await fetch(`${API_BASE}/products/new-product`, {
-    method: "POST",
-    body: JSON.stringify(payload),
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "ep001") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "sp001") {
-    return response.data;
-  }
-};
-
-export const updateStorage = async (
-  uuid: string,
-  values: Pick<Storage, "name" | "description">,
-) => {
-  const result = await fetch(
-    `${API_BASE}/storage/update-storage?storageUUID=${uuid}`,
-    {
-      method: "POST",
-      body: JSON.stringify(values),
-      headers: {
-        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-    },
-  );
-
-  const response = await result.json();
-
-  if (response.code === "ep001") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "sp001") {
-    return response.data;
-  }
-};
-
 export const formatDate = (value?: string | null) => {
   if (!value) {
     return "-";
@@ -172,108 +29,6 @@ export const formatDate = (value?: string | null) => {
   return date.toLocaleDateString("de-DE");
 };
 
-export const mutateNewStorage = async (values: NewStorage) => {
-  const result = await fetch(`${API_BASE}/storage/new-storage`, {
-    method: "POST",
-    body: JSON.stringify(values),
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "es002") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "ss002") {
-    return response.data;
-  }
-};
-
-export const deleteStorage = async (uuid: string) => {
-  const result = await fetch(`${API_BASE}/storage/delete?uuid=${uuid}`, {
-    method: "DELETE",
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "es004") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "ss004") {
-    return { success: true, code: response.code };
-  }
-};
-
-export const mutateSettings = async (payload: SettingsIntf) => {
-  const result = await fetch(`${API_BASE}/users/update-app-settings`, {
-    method: "POST",
-    body: JSON.stringify(payload),
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "eu004") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "su003") {
-    return { success: true, code: response.code };
-  }
-};
-
-export const fetchSettings = async () => {
-  const result = await fetch(`${API_BASE}/users/settings`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  if (response.code === "eu005") {
-    return { success: false, code: response.code };
-  }
-
-  if (response.code === "su004") {
-    return { success: true, data: response.data, code: response.code };
-  }
-};
-
-export const deleteSelectedProducts = async (uuids: string[]) => {
-  const result = await fetch(`${API_BASE}/products/delete-selection`, {
-    method: "POST",
-    body: JSON.stringify(uuids),
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-  });
-
-  const response = await result.json();
-
-  console.log(response);
-};
-
 export const changeTranslation = () => {
   const clientLng = i18n.language;