refactor: move dispatch calls into useTodoAPI calls

Author: sebastianvitterso

web/src/features/todos/todo-list/TodoItem.tsx

@@ -2,22 +2,18 @@ import { Card, Typography } from '@equinor/eds-core-react'
 import { done, remove_outlined, undo } from '@equinor/eds-icons'
 import type { AddTodoResponse } from '../../../api/generated'
 import IconButton from '../../../common/components/IconButton'
-import { useTodos } from '../../../contexts/TodoContext'
 import { useTodoAPI } from '../../../hooks/useTodoAPI'
 import { StyledTodoItemTitle } from './TodoItem.styled'
 
 const TodoItem = ({ todo }: { todo: AddTodoResponse }) => {
   const { toggleTodoItem, removeTodoItem } = useTodoAPI()
-  const { dispatch } = useTodos()
 
   async function toggle() {
     await toggleTodoItem(todo)
-    dispatch({ type: 'TOGGLE_TODO', payload: todo })
   }
 
   async function remove() {
     await removeTodoItem(todo)
-    dispatch({ type: 'REMOVE_TODO', payload: todo })
   }
 
   return (

web/src/features/todos/todo-list/TodoList.tsx

@@ -8,13 +8,12 @@ import { StyledInput, StyledTodoList } from './TodoList.styled'
 
 const AddItem = () => {
   const { addTodoItem } = useTodoAPI()
-  const { dispatch } = useTodos()
   const [value, setValue] = useState('')
 
   const add: FormEventHandler = (event) => {
     event.preventDefault()
     if (value) {
-      addTodoItem(value).then((todo) => dispatch({ type: 'ADD_TODO', payload: todo }))
+      addTodoItem(value)
     }
     setValue('')
   }
@@ -43,7 +42,7 @@ const TodoList = () => {
   const { state, dispatch } = useTodos()
 
   useEffect(() => {
-    getAllTodoItems().then((todos) => dispatch({ type: 'INITIALIZE', payload: todos }))
+    getAllTodoItems()
   }, [dispatch, getAllTodoItems])
 
   return (

web/src/hooks/useTodoAPI.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
 import { type AddTodoResponse, ApiError, type ErrorResponse, TodoService } from '../api/generated'
+import { useTodos } from '../contexts/TodoContext'
 
 function handleError(error: unknown): void {
   if (error instanceof ApiError) {
@@ -9,36 +10,44 @@ function handleError(error: unknown): void {
 }
 
 export function useTodoAPI() {
+  const { dispatch } = useTodos()
+
   const addTodoItem = useCallback(async (title: string) => {
     try {
-      return await TodoService.create({ title })
+      const todoItem = await TodoService.create({ title })
+      dispatch({ type: 'ADD_TODO', payload: todoItem })
+      return todoItem
     } catch (error) {
       handleError(error)
     }
   }, [])
 
   const getAllTodoItems = useCallback(async () => {
     try {
-      return await TodoService.getAll()
+      const todoItems = await TodoService.getAll()
+      dispatch({ type: 'INITIALIZE', payload: todoItems })
+      return todoItems
     } catch (error) {
       handleError(error)
     }
   }, [])
 
-  const toggleTodoItem = useCallback(async (todo: AddTodoResponse) => {
+  const toggleTodoItem = useCallback(async (todoItem: AddTodoResponse) => {
     try {
-      return await TodoService.updateById(todo.id, {
-        is_completed: !todo.is_completed,
-        title: todo.title,
+      await TodoService.updateById(todoItem.id, {
+        is_completed: !todoItem.is_completed,
+        title: todoItem.title,
       })
+      dispatch({ type: 'TOGGLE_TODO', payload: todoItem })
     } catch (error) {
       handleError(error)
     }
   }, [])
 
-  const removeTodoItem = useCallback(async (todo: AddTodoResponse) => {
+  const removeTodoItem = useCallback(async (todoItem: AddTodoResponse) => {
     try {
-      return await TodoService.deleteById(todo.id)
+      await TodoService.deleteById(todoItem.id)
+      dispatch({ type: 'REMOVE_TODO', payload: todoItem })
     } catch (error) {
       handleError(error)
     }