From 38ff1322c3007c944918dd0d8d68459b9b9e3e88 Mon Sep 17 00:00:00 2001
From: Jakob Stornig <jastornig@edu.aau.at>
Date: Thu, 7 Dec 2023 11:50:01 +0100
Subject: [PATCH] feat: searchbar

---
 app/index.tsx                             | 18 +++---
 components/common/searchBar/SearchBar.tsx | 68 +++++++++++++++++++++++
 components/index.jsx                      |  4 +-
 3 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 components/common/searchBar/SearchBar.tsx

diff --git a/app/index.tsx b/app/index.tsx
index 425af94..c9d4450 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,8 +1,8 @@
 import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { useThemeColor } from "../hooks/hooks";
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { ExpenseItem, Plus, Welcome } from '../components';
-import { FlatList } from 'react-native-gesture-handler';
+import { ExpenseItem, Plus, Welcome, SearchBar } from '../components';
+import { FlatList, TextInput } from 'react-native-gesture-handler';
 import { useRef, useState } from 'react';
 import React from 'react';
 
@@ -50,23 +50,25 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView>
+        <SafeAreaView style={{flex: 1}}>
            {plusShow && <Plus/>}
             {/* <Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome> */}
 
             <FlatList
             data={data}
-            ListHeaderComponent={<Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome>
-        }
+            ListHeaderComponent={
+                <>
+                <Welcome name="My Dude" image={profile} onPress={()=>console.log("hello")}></Welcome>
+                <SearchBar placeholder='Type to Search...'></SearchBar>
+                </>
+            }
             renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
             keyExtractor={item => item.id}
             ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
             onScroll={handleScroll}
             scrollEventThrottle={20}
-        
             >
-            </FlatList>
-            
+            </FlatList>            
         </SafeAreaView>
         
     );
diff --git a/components/common/searchBar/SearchBar.tsx b/components/common/searchBar/SearchBar.tsx
new file mode 100644
index 0000000..23c61cf
--- /dev/null
+++ b/components/common/searchBar/SearchBar.tsx
@@ -0,0 +1,68 @@
+import { View, Text, ViewProps, StyleSheet, Button } from 'react-native'
+import React from 'react'
+import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'
+import { AntDesign } from '@expo/vector-icons';
+import { useThemeColor } from '../../../hooks/hooks';
+import { SIZES } from '../../../constants/theme';
+
+type SearchBarProps = {placeholder: string} & ViewProps
+
+
+
+export default function SearchBar(props: SearchBarProps) {
+  const [isActive, setIsactive] = React.useState(false);
+
+  const backgroundColor = useThemeColor("backgroundColor");
+  const handleChange = (text:string) : void  =>  {
+    if(text !== ""){
+      if(!isActive){
+        setIsactive(true)
+      }
+    }else {
+      if(isActive){
+        setIsactive(false)
+      }
+    }
+  }
+
+//TODO: Handle textCancel
+  return (
+    <View style={styles.container}>
+        <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder}></TextInput>
+      
+        {isActive &&
+          <TouchableOpacity style={styles.cancel}>
+            <AntDesign size={15} name='closecircle'></AntDesign>
+          </TouchableOpacity>
+        }
+      </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginBottom: 20,
+    flexDirection: 'row',
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    backgroundColor: "red", //tochange
+    borderRadius: 10,
+    paddingHorizontal: 10
+  },
+  TextInput: {
+    flex: 1,
+    height: "100%",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row",
+    width: "100%",
+  },
+  cancel:{
+    height: "100%", 
+    width: 30, 
+    justifyContent: "center", 
+    alignItems:"center",
+  }
+})
diff --git a/components/index.jsx b/components/index.jsx
index 56bab55..403df5a 100644
--- a/components/index.jsx
+++ b/components/index.jsx
@@ -4,10 +4,12 @@ import Welcome from "./home/Welcome/Welcome"
 
 //common
 import Plus from "./common/plus/plus"
+import SearchBar from "./common/searchBar/SearchBar"
 
 export {
   ExpenseItem,
   Welcome,
-  Plus
+  Plus,
+  SearchBar
 }