diff --git a/src/app/main.tsx b/src/app/main.tsx index 308b0c3..cb632c1 100644 --- a/src/app/main.tsx +++ b/src/app/main.tsx @@ -3,8 +3,13 @@ import { createRoot } from 'react-dom/client'; import { App } from './app'; import './scss/main.scss'; +import { StrictMode } from 'react'; const container = document.querySelector('#app') as HTMLElement; const root = createRoot(container); -root.render(); +root.render( + + + +); diff --git a/src/modules/users/api/api.ts b/src/modules/users/api/api.ts index 4bd66de..cb559cc 100644 --- a/src/modules/users/api/api.ts +++ b/src/modules/users/api/api.ts @@ -1,10 +1,11 @@ import { jsonApiInstance } from '@/shared/api/instances'; import { User } from './types'; +import { GenericAbortSignal } from 'axios'; export const routes = { users: '/users', }; -export const fetchUsers = () => { - return jsonApiInstance.get(routes.users); +export const fetchUsers = (signal: GenericAbortSignal) => { + return jsonApiInstance.get(routes.users, { signal }); }; diff --git a/src/modules/users/lib/use-users.ts b/src/modules/users/lib/use-users.ts index 5575b83..40e22b5 100644 --- a/src/modules/users/lib/use-users.ts +++ b/src/modules/users/lib/use-users.ts @@ -9,14 +9,22 @@ export const useUsers = () => { const [error, setError] = useState(''); useEffect(() => { + const abortController = new AbortController(); + setLoading(true); setTimeout(() => { - fetchUsers() + fetchUsers(abortController.signal) .then(({ data }) => setUsers(data)) - .catch(() => setError('Error fetching users')) + .catch((error) => { + const isNotCancelled = error.name !== 'CanceledError'; + + if (isNotCancelled) setError('Error fetching users'); + }) .finally(() => setLoading(false)); }, 800); + + return () => abortController.abort(); }, []); return { users, isLoading, error };