feat: Add expense screen

components/home/addItem/CategorySelectorModal.tsx

@@ -0,0 +1,93 @@
+import { Modal, NativeSyntheticEvent, StyleSheet, Text, View, FlatList } from 'react-native'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Category } from '../../../types/dbItems';
+import { useTheme } from '../../../app/contexts/ThemeContext';
+import CategoryListItem from '../../common/CategoryListItem';
+import { SIZES } from '../../../constants/theme';
+import useFetch from '../../../hooks/useFetch';
+import TextInputBar from '../../common/TextInputBar';
+
+
+interface CategorySelectorModalProps{
+  visible: boolean;
+  onCategoryTap?: (category : Category) => void | undefined;
+  selectMulitple?: boolean;
+  onRequestClose?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
+}
+
+//TODO: select Multiple
+
+const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : CategorySelectorModalProps) => {
+  const {visible, onCategoryTap, selectMulitple} = props;
+  const {data, reFetch} = useFetch({sql: "SELECT * FROM category;", args:[]});
+  const {colors} = useTheme();
+  const [searchtext, setSearchtext] = useState<string>("");
+
+  const handleSearchText = (text : string) => {
+    setSearchtext(text);
+  }
+
+  const categories = useMemo<Category[]>(()=>{
+    return data.map((elem) => {
+      return {name: elem["name"], color: elem["color"], guid: elem["guid"]}
+    })
+  }, [data])
+
+  const filteredCategories = categories.filter((category) => category.name?.toLowerCase().includes(searchtext.toLowerCase()))
+  
+  useEffect(()=>{
+    if(visible){
+      //reFetch(); Uncomment if newly added categories do not appear 
+      handleSearchText("");
+    }
+  }, [visible])
+
+  return (
+    <Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose}>
+      <View style={styles.main}>
+        <View style={[styles.modal, {backgroundColor: colors.containerColor}]}>
+          <View>
+            <Text style={[styles.heading, {color: colors.primaryText}]}>{selectMulitple ? "Categories" : "Category"}</Text>
+          </View>
+          <TextInputBar placeholder='TypeToSearch' onChangeText={handleSearchText}></TextInputBar>
+          <FlatList
+            data={filteredCategories}
+            keyExtractor={(item) => item.guid!}
+            renderItem={({item})=> <CategoryListItem category={item} onPress={onCategoryTap}/>}
+            ItemSeparatorComponent={() => <View style={styles.itemSeperatorStyle}/>}
+            ListFooterComponent={() => <View style={styles.itemSeperatorStyle}/>}
+            keyboardShouldPersistTaps="always"
+          >
+          </FlatList>
+
+        </View>
+      </View>
+    </Modal>
+  )
+}
+
+export default CategorySelectorModal
+
+const styles = StyleSheet.create({
+  main: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    height: "100%",
+    width: "100%",
+    alignItems: "center",
+  },
+  modal: {
+    height: "70%",
+    width: "90%",
+    top: "10%",
+    borderRadius: 30,
+    paddingVertical: 20,
+    paddingHorizontal: 20
+  },
+  heading: {
+    fontSize: SIZES.xlarge,
+    fontWeight: "bold"
+  },
+  itemSeperatorStyle: {
+    paddingBottom: 10
+  }
+})