no message

TraCloSo/components/Header.js

@@ -3,10 +3,8 @@ import { SearchBar, ButtonGroup } from 'react-native-elements';
 import { StyleSheet, Text, View, Image } from 'react-native';
 
 //view for the header component
-export default function HeaderComponent( { selectedIndex, setSelectedIndex }) {
+export default function HeaderComponent( { selectedIndex, setSelectedIndex, onChangeText, value }) {
    
-  const [searchValue, onChangeSearchValue] = React.useState("")
-
    return (	
     <View>    
       <View style={style.header}>
@@ -18,8 +16,8 @@ export default function HeaderComponent( { selectedIndex, setSelectedIndex }) {
         	containerStyle={style.searchbar}
         	inputContainerStyle={style.searchbarInput}
         	inputStyle={style.inputText}
-          onChangeText={onChangeSearchValue}
-          value={searchValue}
+          onChangeText={onChangeText}
+          value={value}
           placeholder="Search here..."
           lightTheme
           round

TraCloSo/scr/Brand.js

@@ -6,7 +6,6 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
 import MapView from 'react-native-maps';
 import { Overlay } from 'react-native-elements';
 import * as SQLite from 'expo-sqlite';
-import moment from 'moment';
 
 export default function BrandScreen({ navigation, route }) {
 	const {BrandName, Score, Logo, Summary, Updated} = route.params

TraCloSo/scr/Home.js

@@ -12,10 +12,16 @@ export default function Home({ navigation }) {
     setSelectedIndex
   ] = React.useState(0);
 
-  let [listDataAZ, setListDataAZ] = useState([]);
-  let [listDataHighest, setListDataHighest] = useState([]);
-  let [listDataSport, setListDataSport] = useState([]);
+  const [filteredDataSourceAZ, setFilteredDataSourceAZ] = useState([]);
+  const [masterDataSourceAZ, setMasterDataSourceAZ] = useState([]);
 
+  const [filteredDataSourceHighest, setFilteredDataSourceHighest] = useState([]);
+  const [masterDataSourceHighest, setMasterDataSourceHighest] = useState([]);
+
+  const [filteredDataSourceSport, setFilteredDataSourceSport] = useState([]);
+  const [masterDataSourceSport, setMasterDataSourceSport] = useState([]);
+
+  // connection with database
   const firebaseConfig = {
       apiKey: "AIzaSyDUlK-IJcotasPrL9WUqCO1Z86JufUNwJE",
       authDomain: "tracloso.firebaseapp.com",
@@ -31,6 +37,7 @@ export default function Home({ navigation }) {
     firebase.initializeApp(firebaseConfig)
   }
 
+  // retieving A-Z
   useEffect(() => {
   //retrieve record from firebase database
     firebase.firestore().collection('Brand').orderBy('brand_name').get().then((querySnapshot) => {
@@ -40,11 +47,13 @@ export default function Home({ navigation }) {
         let brandDetails = {};
         brandDetails = snapshot.data();
         temp.push(brandDetails);
-        setListDataAZ(temp)
+        setFilteredDataSourceAZ(temp);
+        setMasterDataSourceAZ(temp);
       });
     });
   }, []);
 
+  // retieving highest
   useEffect(() => {
   //retrieve record from firebase database
     firebase.firestore().collection('Brand').orderBy('brand_score', 'desc').get().then((querySnapshot) => {
@@ -54,11 +63,13 @@ export default function Home({ navigation }) {
         let brandDetails = {};
         brandDetails = snapshot.data();
         temp.push(brandDetails);
-        setListDataHighest(temp)
+        setFilteredDataSourceHighest(temp);
+        setMasterDataSourceHighest(temp);
       });
     });
   }, []);
 
+  // retieving only sport
   useEffect(() => {
   //retrieve record from firebase database
     firebase.firestore().collection("Brand").where("brand_sport", "==", true).get().then((querySnapshot) => {
@@ -68,19 +79,21 @@ export default function Home({ navigation }) {
         let brandDetails = {};
         brandDetails = snapshot.data();
         temp.push(brandDetails);
-        setListDataSport(temp)
+        setFilteredDataSourceSport(temp);
+        setMasterDataSourceSport(temp);
       });
     });
   }, []);
 
   if (selectedIndex == 0) {
-    var listToRender = listDataAZ
+    var listToRender = filteredDataSourceAZ
   } else if (selectedIndex == 1) {
-    var listToRender = listDataHighest
+    var listToRender = filteredDataSourceHighest
   } else {
-    var listToRender = listDataSport
+    var listToRender = filteredDataSourceSport
   }
 
+  // to display the cards with brands
   let renderCard = ({ item }) => {
     return(
       <Card
@@ -93,12 +106,83 @@ export default function Home({ navigation }) {
     );
   };
 
+  // search function 
+  const [search, setSearch] = useState('');
+
+  const searchFilterFunction = (text) => {
+    // Check if searched text is not blank
+    if (selectedIndex == 0) {
+      if (text) {
+        // Inserted text is not blank
+        // Filter the masterDataSource
+        // Update FilteredDataSource
+        const newData = masterDataSourceAZ.filter(function (item) {
+          const itemData = item.brand_name
+            ? item.brand_name.toUpperCase()
+            : ''.toUpperCase();
+          const textData = text.toUpperCase();
+          return itemData.indexOf(textData) > -1;
+        });
+        setFilteredDataSourceAZ(newData);
+        setSearch(text);
+      } else {
+        // Inserted text is blank
+        // Update FilteredDataSource with masterDataSource
+        setFilteredDataSourceAZ(masterDataSourceAZ);
+        setSearch(text);
+        }
+      }
+    else if (selectedIndex == 1) {
+      if (text) {
+        // Inserted text is not blank
+        // Filter the masterDataSource
+        // Update FilteredDataSource
+        const newData = masterDataSourceHighest.filter(function (item) {
+          const itemData = item.brand_name
+            ? item.brand_name.toUpperCase()
+            : ''.toUpperCase();
+          const textData = text.toUpperCase();
+          return itemData.indexOf(textData) > -1;
+        });
+        setFilteredDataSourceHighest(newData);
+        setSearch(text);
+      } else {
+        // Inserted text is blank
+        // Update FilteredDataSource with masterDataSource
+        setFilteredDataSourceHighest(masterDataSourceHighest);
+        setSearch(text);
+      }
+    } else {
+      if (text) {
+        // Inserted text is not blank
+        // Filter the masterDataSource
+        // Update FilteredDataSource
+        const newData = masterDataSourceSport.filter(function (item) {
+          const itemData = item.brand_name
+            ? item.brand_name.toUpperCase()
+            : ''.toUpperCase();
+          const textData = text.toUpperCase();
+          return itemData.indexOf(textData) > -1;
+        });
+        setFilteredDataSourceSport(newData);
+        setSearch(text);
+      } else {
+        // Inserted text is blank
+        // Update FilteredDataSource with masterDataSource
+        setFilteredDataSourceSport(masterDataSourceSport);
+        setSearch(text);
+        }
+    }
+  };
+
   return (
   	//this 'SafeAreaView' is required to render it safe on the screen, within the margins
   	<SafeAreaView forceInset={{ bottom: 'always' }} style={style.container}>
 	    <HeaderComponent 
 	    	selectedIndex={selectedIndex}   
 	    	setSelectedIndex={setSelectedIndex}
+        onChangeText={(text) => searchFilterFunction(text)}
+        value={search}
 	    />
     	<FlatList
         data={listToRender}