fix: handler folder api errors

src/api/api.ts

@@ -18,8 +18,8 @@ axiosInstance.interceptors.request.use(async config => {
 export const handleApiError = (error: any) => {
   if (axios.isAxiosError(error) && error.response) {
     console.error('API error:', error.response.data)
-    return error.response.data
+    throw new Error(error.response.data?.error || 'API request failed')
   }
   console.error('Unexpected error:', error)
-  return { error: 'Unexpected error occurred' }
+  throw new Error('Unexpected error occurred')
 }

src/screens/home/home.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components/native'
 import { AppDispatch, RootState } from '@store/store'
 import { fetchFolders } from '@services/folder'
 import { setFolders } from '@store/slices'
+import { useToast } from '@hooks/use-toast'
 
 import { BackgroundLayers } from '../../components/background-layers'
 import { FolderList } from './components/folder-list'
@@ -18,24 +19,33 @@ export const Home: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>()
   const folders = useSelector((state: RootState) => state.folders) || []
   const [searchQuery, setSearchQuery] = useState('')
+  const { showToast } = useToast()
 
   const allNotes = folders.flatMap(folder => folder.notes)
   const filteredNotes = allNotes.filter(note =>
     note.title.toLowerCase().includes(searchQuery.toLowerCase()),
   )
 
+  // TODO: Replace with react query
   useEffect(() => {
     const loadFolders = async () => {
       try {
         const folders = await fetchFolders()
         dispatch(setFolders(folders))
       } catch (error) {
         console.error('Failed to load folders:', error)
+        dispatch(setFolders([]))
+        showToast({
+          isSuccess: false,
+          message: 'Failed to load folders.',
+          additionalOffset: 70,
+        })
       }
     }
 
     loadFolders()
-  }, [dispatch, folders.length])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return (
     <>