feat: added search for all tasks

client-new/src/screens/app/TaskScreen.tsx

@@ -1,7 +1,7 @@
 import { useUser } from '@/contexts/UserContext';
-import { Button, ScrollView, Text, View } from 'native-base';
+import { Button, Icon, Input, ScrollView, Text, View } from 'native-base';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import HomeScreenTaskCard from '../../components/homescreen components/HomeScreenTaskCard';
 import LegacyWordmark from '../../components/reusable/LegacyWordmark';
@@ -15,13 +15,39 @@ import TaskTagGrid from '@/components/reusable/TaskTagGrid';
 export default function TaskScreen({ navigation }) {
   const { user } = useUser();
   const [selectedTags, setSelectedTags] = useState([]);
+  const [search, setSearch] = useState('');
+  const [fileteredTasks, setFilteredTasks] = useState<ITask[]>([]);
+  let debounceTimer;
+
 
   const { isPending, data: tasks, error, refetch } = useQuery({
     queryKey: ['tasks', user?.id, selectedTags],
     queryFn: async () => await fetchUserTasks(user?.id, selectedTags),
     staleTime: 60000 // TEMP, unsolved refetch when unncessary
   });
 
+  useEffect(() => {
+    const debounce = (func, delay) => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        func();
+      }, delay);
+    };
+
+    const filterTasks = () => {
+      const filtered = tasks?.filter((task) => {
+        return task.task_name.toLowerCase().includes(search.toLowerCase()) || task.task_description.toLowerCase().includes(search.toLowerCase());
+      });
+      setFilteredTasks(filtered);
+    };
+
+    debounce(filterTasks, 300);
+
+    return () => {
+      clearTimeout(debounceTimer);
+    };
+  }, [search]);
+
   return (
     <>
       <ScrollView
@@ -52,9 +78,23 @@ export default function TaskScreen({ navigation }) {
             >
               All Tasks
             </Text>
+            <View>
+              <Input
+                placeholder="Search"
+                size="md"
+                isDisabled={isPending ? true : false}
+                width={'100%'}
+                backgroundColor={'#F2F2F2'}
+                borderRadius={'10px'}
+                paddingLeft={'10px'}
+                paddingRight={'10px'}
+                marginBottom={'20px'}
+                value={search}
+                onChangeText={(text) => setSearch(text)}
+              />
+            </View>
             <View flexDirection={'row'}>
               <TaskTagGrid selectedTags={selectedTags} pressfunc={setSelectedTags} />
-
             </View>
           </View>
           <View
@@ -64,8 +104,8 @@ export default function TaskScreen({ navigation }) {
           >
             {isPending && <ActivityIndicator style={{ marginTop: 50 }} />}
             {error && <Text>Error: {error.message}</Text>}
-            {tasks && tasks.length === 0 && <Text>No tasks found</Text>}
-            {tasks && tasks.map((item: ITask, index: number) =>
+            {fileteredTasks && fileteredTasks.length === 0 && <Text>No tasks found</Text>}
+            {fileteredTasks && fileteredTasks.map((item: ITask, index: number) =>
               <View key={index} mb={0}>
                 <HomeScreenTaskCard task={item} isAllTasks={false} />
               </View> 

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==