refactor hooks

src/utils/hooks/useCart.ts

@@ -3,7 +3,7 @@ import { getTariffById } from "@root/api/tariff";
 import { useTariffStore } from "@root/stores/tariffs";
 import { useUserStore } from "@root/stores/user";
 import { useEffect } from "react";
-import { addCartTariffs, removeMissingTariffs, setCartTariffStatus, useCartStore } from "@root/stores/cart";
+import { addCartTariffs, removeMissingCartTariffs, setCartTariffStatus, useCartStore } from "@root/stores/cart";
 import { Tariff } from "@root/model/tariff";
 
 
@@ -39,7 +39,7 @@ export function useCart() {
     }, [cartTariffIds, cartTariffMap, tariffs]);
 
     useEffect(function cleanUpCart() {
-        if (cartTariffIds) removeMissingTariffs(cartTariffIds);
+        if (cartTariffIds) removeMissingCartTariffs(cartTariffIds);
     }, [cartTariffIds]);
 
     return cart;

src/utils/hooks/useTariffs.ts

@@ -1,6 +1,6 @@
 import { devlog, makeRequest } from "@frontend/kitui";
 import { GetTariffsResponse, Tariff } from "@root/model/tariff";
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 
 export function useTariffs({ baseUrl = "https://admin.pena.digital/strator/tariff", tariffsPerPage, apiPage, onNewTariffs, onError }: {
@@ -10,8 +10,13 @@ export function useTariffs({ baseUrl = "https://admin.pena.digital/strator/tarif
     onNewTariffs: (response: Tariff[]) => void;
     onError: (error: Error) => void;
 }) {
-    const onNewTariffsRef = useRef<(response: Tariff[]) => void>(onNewTariffs);
-    const onErrorRef = useRef<(error: Error) => void>(onError);
+    const onNewTariffsRef = useRef(onNewTariffs);
+    const onErrorRef = useRef(onError);
+
+    useLayoutEffect(() => {
+        onNewTariffsRef.current = onNewTariffs;
+        onErrorRef.current = onError;
+    }, [onError, onNewTariffs]);
 
     useEffect(() => {
         const controller = new AbortController();

src/utils/hooks/useUser.ts

@@ -1,6 +1,6 @@
 import { devlog, makeRequest } from "@frontend/kitui";
 import { User } from "@root/model/user";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 
 export function useUser({ onError, onNewUser, url, userId }: {
@@ -9,6 +9,14 @@ export function useUser({ onError, onNewUser, url, userId }: {
     onNewUser: (response: User) => void;
     onError: (error: any) => void;
 }) {
+    const onNewUserRef = useRef(onNewUser);
+    const onErrorRef = useRef(onError);
+
+    useLayoutEffect(() => {
+        onNewUserRef.current = onNewUser;
+        onErrorRef.current = onError;
+    }, [onError, onNewUser]);
+
     useEffect(() => {
         if (!userId) return;
 
@@ -23,10 +31,10 @@ export function useUser({ onError, onNewUser, url, userId }: {
             signal: controller.signal,
         }).then(result => {
             devlog("User", result);
-            onNewUser(result);
+            onNewUserRef.current(result);
         }).catch(error => {
             devlog("Error fetching user", error);
-            onError(error);
+            onErrorRef.current(error);
         });
 
         return () => controller.abort();

src/utils/hooks/useUserAccount.ts

@@ -2,7 +2,7 @@ import { devlog, makeRequest } from "@frontend/kitui";
 import { createUserAccount } from "@root/api/account";
 import { UserAccount } from "@root/model/account";
 import { isAxiosError } from "axios";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 
 export function useUserAccount({ onError, onNewUserAccount, url, userId }: {
@@ -11,6 +11,14 @@ export function useUserAccount({ onError, onNewUserAccount, url, userId }: {
     onNewUserAccount: (response: UserAccount) => void;
     onError: (error: any) => void;
 }) {
+    const onNewUserAccountRef = useRef(onNewUserAccount);
+    const onErrorRef = useRef(onError);
+
+    useLayoutEffect(() => {
+        onNewUserAccountRef.current = onNewUserAccount;
+        onErrorRef.current = onError;
+    }, [onError, onNewUserAccount]);
+
     useEffect(() => {
         if (!userId) return;
 
@@ -24,22 +32,22 @@ export function useUserAccount({ onError, onNewUserAccount, url, userId }: {
             signal: controller.signal,
         }).then(result => {
             devlog("User account", result);
-            onNewUserAccount(result);
+            onNewUserAccountRef.current(result);
         }).catch(error => {
             devlog("Error fetching user account", error);
             if (isAxiosError(error) && error.response?.status === 404) {
-                createUserAccount().then(result => {
+                createUserAccount(controller.signal).then(result => {
                     devlog("Created user account", result);
-                    onNewUserAccount(result);
+                    onNewUserAccountRef.current(result);
                 }).catch(error => {
                     devlog("Error creating user account", error);
-                    onError(error);
+                    onErrorRef.current(error);
                 });
             } else {
-                onError(error);
+                onErrorRef.current(error);
             }
         });
 
         return () => controller.abort();
-    }, [onError, onNewUserAccount, url, userId]);
+    }, [url, userId]);
 }