feat: filter by name category

app/(tabs)/(budget)/index.tsx

@@ -1,10 +1,10 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { router, useNavigation } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { BudgetHeader, CategoryItem, LoadingSymbol, Plus } from '../../../components';
+import { BudgetHeader, CategoryItem, LoadingSymbol, Plus, TextInputBar } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
 import { useTheme } from '../../contexts/ThemeContext';
 import { useFocusEffect } from 'expo-router/src/useFocusEffect';
@@ -14,8 +14,12 @@ export default function Page() {
     const containerColor = colors.containerColor;
     const navigation = useNavigation();
     const [selectedPage, setSelectedPage] = useState("noPageLoaded");
+    const [searchString, setSearchString] = useState("");
+
+
 
     useEffect(() => {
+        console.log("initial effect called")
         AsyncStorage.getItem("currentBudgetPage").then((page) => {
             if(page === "expenses" || page === "savings") {
                 setSelectedPage(page);
@@ -36,7 +40,6 @@ export default function Page() {
             reFetch();
         })
         return unsubscribe;
-    
     }, [navigation])
 
 
@@ -51,10 +54,17 @@ export default function Page() {
         router.push({pathname: "/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
     }
 
+    const filteredData = useMemo(() => {
+        return data.filter((item) => {
+            return item.category_name.toLowerCase().includes(searchString.toLowerCase());
+        })
+    }, [data, searchString]);
+
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
             <View style={{flex: 1, marginHorizontal: 10}}>
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
+            <TextInputBar style={{marginBottom: 20}} value={searchString} onChangeText={setSearchString} placeholder='Search...'></TextInputBar>
 
             <Plus onPress={() => {
                 router.push({pathname: '/addCategory'});
@@ -62,7 +72,7 @@ export default function Page() {
 
             {isLoading ? (<LoadingSymbol/>) : (
                <FlatList 
-                data={data} 
+                data={filteredData} 
                 renderItem = {({item}) => <CategoryItem 
                     category={item.category_name} 
                     allocated_amount={item.allocated_amount ?? 0} 

components/budget/budgetHeader.tsx

@@ -34,7 +34,6 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
                 }}
             />
         </View>
-        <TextInputBar style={styles.searchBarStyle} placeholder='Search...'></TextInputBar>
     </>);
 }