converted to async functions

mate-academy · Nov 30, 2024 · 9ee319a · 9ee319a
1 parent 6236ae3
commit 9ee319a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 41 deletions.
diff --git a/src/hooks/useTodos.ts b/src/hooks/useTodos.ts
@@ -20,7 +20,7 @@ export const useTodos = () => {
     [todos, activeFilter],
   );
 
-  const addTodo = (title: string) => {
+  const addTodo = useCallback(async (title: string) => {
     setTempTodo({
       id: 0,
       userId: postService.USER_ID,
@@ -29,39 +29,43 @@ export const useTodos = () => {
     });
     setIsLoading(true);
 
-    return postService
-      .createTodo(title)
-      .then(newTodo => {
+    try {
+      try {
+        const newTodo = await postService.createTodo(title);
+
         setEditingTodos(current => [...current, 0]);
 
         setTodos(currentTodos => [...currentTodos, newTodo]);
-      })
-      .catch(() => {
+      } catch {
         setErrorMessage('Unable to add a todo');
         throw new Error('Unable to add a todo');
-      })
-      .finally(() => {
-        setTempTodo(null);
-        setIsLoading(false);
-      });
-  };
+      }
+    } finally {
+      setTempTodo(null);
+      setIsLoading(false);
+    }
+  }, []);
 
-  const loadTodos = useCallback(() => {
+  const loadTodos = useCallback(async () => {
     setIsLoading(true);
-    postService
-      .getTodos()
-      .then(setTodos)
-      .catch(() => setErrorMessage('Unable to load todos'))
-      .finally(() => setIsLoading(false));
+    try {
+      const loadedTodos = await postService.getTodos();
+
+      setTodos(loadedTodos);
+    } catch {
+      setErrorMessage('Unable to load todos');
+    } finally {
+      setIsLoading(false);
+    }
   }, []);
 
-  const updateTodo = (newTodo: Todo) => {
+  const updateTodo = useCallback(async (newTodo: Todo) => {
     setIsLoading(true);
     setEditingTodos(current => [...current, newTodo.id]);
 
-    return postService
-      .updateTodo(newTodo)
-      .then(() => {
+    try {
+      try {
+        await postService.updateTodo(newTodo);
         setTodos(currentTodos => {
           const newTodos = [...currentTodos];
           const index = newTodos.findIndex(todo => todo.id === newTodo.id);
@@ -70,16 +74,15 @@ export const useTodos = () => {
 
           return newTodos;
         });
-      })
-      .catch(error => {
+      } catch (error) {
         setErrorMessage('Unable to update a todo');
-        throw new Error(error);
-      })
-      .finally(() => {
-        setEditingTodos([]);
-        setIsLoading(false);
-      });
-  };
+        throw new Error();
+      }
+    } finally {
+      setEditingTodos([]);
+      setIsLoading(false);
+    }
+  }, []);
 
   const deleteTodo = useCallback((id: number) => {
     setIsLoading(true);

diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
@@ -11,7 +11,7 @@ function wait(delay: number) {
 // To have autocompletion and avoid mistypes
 type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
 
-function request<T>(
+async function request<T>(
   url: string,
   method: RequestMethod = 'GET',
   data: any = null, // we can send any data to the server
@@ -27,15 +27,14 @@ function request<T>(
   }
 
   // DON'T change the delay it is required for tests
-  return wait(100)
-    .then(() => fetch(BASE_URL + url, options))
-    .then(response => {
-      if (!response.ok) {
-        throw new Error();
-      }
-
-      return response.json();
-    });
+  await wait(100);
+  const response = await fetch(BASE_URL + url, options);
+
+  if (!response.ok) {
+    throw new Error();
+  }
+
+  return response.json();
 }
 
 export const client = {