Commit fbe5d01c authored by Thomas's avatar Thomas
Browse files

no message

parent 2702ec3f
...@@ -3,9 +3,7 @@ import { SearchBar, ButtonGroup } from 'react-native-elements'; ...@@ -3,9 +3,7 @@ import { SearchBar, ButtonGroup } from 'react-native-elements';
import { StyleSheet, Text, View, Image } from 'react-native'; import { StyleSheet, Text, View, Image } from 'react-native';
//view for the header component //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 ( return (
<View> <View>
...@@ -18,8 +16,8 @@ export default function HeaderComponent( { selectedIndex, setSelectedIndex }) { ...@@ -18,8 +16,8 @@ export default function HeaderComponent( { selectedIndex, setSelectedIndex }) {
containerStyle={style.searchbar} containerStyle={style.searchbar}
inputContainerStyle={style.searchbarInput} inputContainerStyle={style.searchbarInput}
inputStyle={style.inputText} inputStyle={style.inputText}
onChangeText={onChangeSearchValue} onChangeText={onChangeText}
value={searchValue} value={value}
placeholder="Search here..." placeholder="Search here..."
lightTheme lightTheme
round round
......
...@@ -6,7 +6,6 @@ import { MaterialCommunityIcons } from '@expo/vector-icons'; ...@@ -6,7 +6,6 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
import MapView from 'react-native-maps'; import MapView from 'react-native-maps';
import { Overlay } from 'react-native-elements'; import { Overlay } from 'react-native-elements';
import * as SQLite from 'expo-sqlite'; import * as SQLite from 'expo-sqlite';
import moment from 'moment';
export default function BrandScreen({ navigation, route }) { export default function BrandScreen({ navigation, route }) {
const {BrandName, Score, Logo, Summary, Updated} = route.params const {BrandName, Score, Logo, Summary, Updated} = route.params
......
...@@ -12,10 +12,16 @@ export default function Home({ navigation }) { ...@@ -12,10 +12,16 @@ export default function Home({ navigation }) {
setSelectedIndex setSelectedIndex
] = React.useState(0); ] = React.useState(0);
let [listDataAZ, setListDataAZ] = useState([]); const [filteredDataSourceAZ, setFilteredDataSourceAZ] = useState([]);
let [listDataHighest, setListDataHighest] = useState([]); const [masterDataSourceAZ, setMasterDataSourceAZ] = useState([]);
let [listDataSport, setListDataSport] = useState([]);
const [filteredDataSourceHighest, setFilteredDataSourceHighest] = useState([]);
const [masterDataSourceHighest, setMasterDataSourceHighest] = useState([]);
const [filteredDataSourceSport, setFilteredDataSourceSport] = useState([]);
const [masterDataSourceSport, setMasterDataSourceSport] = useState([]);
// connection with database
const firebaseConfig = { const firebaseConfig = {
apiKey: "AIzaSyDUlK-IJcotasPrL9WUqCO1Z86JufUNwJE", apiKey: "AIzaSyDUlK-IJcotasPrL9WUqCO1Z86JufUNwJE",
authDomain: "tracloso.firebaseapp.com", authDomain: "tracloso.firebaseapp.com",
...@@ -31,6 +37,7 @@ export default function Home({ navigation }) { ...@@ -31,6 +37,7 @@ export default function Home({ navigation }) {
firebase.initializeApp(firebaseConfig) firebase.initializeApp(firebaseConfig)
} }
// retieving A-Z
useEffect(() => { useEffect(() => {
//retrieve record from firebase database //retrieve record from firebase database
firebase.firestore().collection('Brand').orderBy('brand_name').get().then((querySnapshot) => { firebase.firestore().collection('Brand').orderBy('brand_name').get().then((querySnapshot) => {
...@@ -40,11 +47,13 @@ export default function Home({ navigation }) { ...@@ -40,11 +47,13 @@ export default function Home({ navigation }) {
let brandDetails = {}; let brandDetails = {};
brandDetails = snapshot.data(); brandDetails = snapshot.data();
temp.push(brandDetails); temp.push(brandDetails);
setListDataAZ(temp) setFilteredDataSourceAZ(temp);
setMasterDataSourceAZ(temp);
}); });
}); });
}, []); }, []);
// retieving highest
useEffect(() => { useEffect(() => {
//retrieve record from firebase database //retrieve record from firebase database
firebase.firestore().collection('Brand').orderBy('brand_score', 'desc').get().then((querySnapshot) => { firebase.firestore().collection('Brand').orderBy('brand_score', 'desc').get().then((querySnapshot) => {
...@@ -54,11 +63,13 @@ export default function Home({ navigation }) { ...@@ -54,11 +63,13 @@ export default function Home({ navigation }) {
let brandDetails = {}; let brandDetails = {};
brandDetails = snapshot.data(); brandDetails = snapshot.data();
temp.push(brandDetails); temp.push(brandDetails);
setListDataHighest(temp) setFilteredDataSourceHighest(temp);
setMasterDataSourceHighest(temp);
}); });
}); });
}, []); }, []);
// retieving only sport
useEffect(() => { useEffect(() => {
//retrieve record from firebase database //retrieve record from firebase database
firebase.firestore().collection("Brand").where("brand_sport", "==", true).get().then((querySnapshot) => { firebase.firestore().collection("Brand").where("brand_sport", "==", true).get().then((querySnapshot) => {
...@@ -68,19 +79,21 @@ export default function Home({ navigation }) { ...@@ -68,19 +79,21 @@ export default function Home({ navigation }) {
let brandDetails = {}; let brandDetails = {};
brandDetails = snapshot.data(); brandDetails = snapshot.data();
temp.push(brandDetails); temp.push(brandDetails);
setListDataSport(temp) setFilteredDataSourceSport(temp);
setMasterDataSourceSport(temp);
}); });
}); });
}, []); }, []);
if (selectedIndex == 0) { if (selectedIndex == 0) {
var listToRender = listDataAZ var listToRender = filteredDataSourceAZ
} else if (selectedIndex == 1) { } else if (selectedIndex == 1) {
var listToRender = listDataHighest var listToRender = filteredDataSourceHighest
} else { } else {
var listToRender = listDataSport var listToRender = filteredDataSourceSport
} }
// to display the cards with brands
let renderCard = ({ item }) => { let renderCard = ({ item }) => {
return( return(
<Card <Card
...@@ -93,12 +106,83 @@ export default function Home({ navigation }) { ...@@ -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 ( return (
//this 'SafeAreaView' is required to render it safe on the screen, within the margins //this 'SafeAreaView' is required to render it safe on the screen, within the margins
<SafeAreaView forceInset={{ bottom: 'always' }} style={style.container}> <SafeAreaView forceInset={{ bottom: 'always' }} style={style.container}>
<HeaderComponent <HeaderComponent
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex} setSelectedIndex={setSelectedIndex}
onChangeText={(text) => searchFilterFunction(text)}
value={search}
/> />
<FlatList <FlatList
data={listToRender} data={listToRender}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment