feat: integrate folder services

babel.config.js

@@ -15,6 +15,7 @@ module.exports = {
           '@context': './src/context',
           '@navigation': './src/navigation',
           '@store': './src/store',
+          '@services': './src/services',
           '@api': './src/api',
           '@config': './src/config',
           '@root': './',

src/screens/home/home.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react'
-import { useSelector } from 'react-redux'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import styled from 'styled-components/native'
 
-import { RootState } from '@store/store'
+import { AppDispatch, RootState } from '@store/store'
+import { fetchFolders } from '@services/folder'
+import { setFolders } from '@store/slices'
 
 import { BackgroundLayers } from '../../components/background-layers'
 import { FolderList } from './components/folder-list'
@@ -13,14 +15,28 @@ import { CreateNoteButton } from './components/create-note-button'
 
 export const Home: React.FC = () => {
   const insets = useSafeAreaInsets()
-  const folders = useSelector((state: RootState) => state.folders)
+  const dispatch = useDispatch<AppDispatch>()
+  const folders = useSelector((state: RootState) => state.folders) || []
   const [searchQuery, setSearchQuery] = useState('')
 
   const allNotes = folders.flatMap(folder => folder.notes)
   const filteredNotes = allNotes.filter(note =>
     note.title.toLowerCase().includes(searchQuery.toLowerCase()),
   )
 
+  useEffect(() => {
+    const loadFolders = async () => {
+      try {
+        const folders = await fetchFolders()
+        dispatch(setFolders(folders))
+      } catch (error) {
+        console.error('Failed to load folders:', error)
+      }
+    }
+
+    loadFolders()
+  }, [dispatch, folders.length])
+
   return (
     <>
       <BackgroundLayers testID={'background-layers'} />

src/services/folder.ts

@@ -0,0 +1,28 @@
+import { axiosInstance, handleApiError } from '../api'
+
+export const fetchFolders = async () => {
+  try {
+    const { data } = await axiosInstance.get('/folders')
+    return data
+  } catch (error) {
+    return handleApiError(error)
+  }
+}
+
+export const createFolder = async (folderName: string) => {
+  try {
+    const { data } = await axiosInstance.post('/folders', { folderName })
+    return data
+  } catch (error) {
+    return handleApiError(error)
+  }
+}
+
+export const deleteFolder = async (folderId: number) => {
+  try {
+    await axiosInstance.delete(`/folders/${folderId}`)
+    return { success: true }
+  } catch (error) {
+    return handleApiError(error)
+  }
+}

src/store/actions/folder.ts

@@ -0,0 +1,26 @@
+import { createFolder, deleteFolder, fetchFolders } from '@services/folder'
+import { AppDispatch } from '@store/store'
+import { addFolder, removeFolder, setFolders } from '@store/slices'
+
+export const performFetchFolders = () => async (dispatch: AppDispatch) => {
+  const folders = await fetchFolders()
+  if (folders) {
+    dispatch(setFolders(folders))
+  }
+}
+
+export const performCreateFolder =
+  (folderName: string) => async (dispatch: AppDispatch) => {
+    const newFolder = await createFolder(folderName)
+    if (newFolder) {
+      dispatch(addFolder(newFolder))
+    }
+  }
+
+export const performDeleteFolder =
+  (folderId: number) => async (dispatch: AppDispatch) => {
+    const result = await deleteFolder(folderId)
+    if (result.success) {
+      dispatch(removeFolder(folderId))
+    }
+  }

src/store/actions/index.ts

@@ -0,0 +1,5 @@
+export {
+  performFetchFolders,
+  performCreateFolder,
+  performDeleteFolder,
+} from './folder'

tsconfig.json

@@ -13,6 +13,7 @@
       "@context/*": ["src/context/*"],
       "@theme/*": ["src/theme/*"],
       "@store/*": ["src/store/*"],
+      "@services/*": ["src/services/*"],
       "@api/*": ["src/api/*"],
       "@config/*": ["src/config/*"],
       "@root/*": ["./*"]