mirror of
https://github.com/Blair-SGA-Dev-Team/blazerapp.git
synced 2024-11-12 08:41:16 -05:00
Improved the clubs interface
This commit is contained in:
parent
fbcd10dec0
commit
9a037e92a6
26
app/Clubs.js
26
app/Clubs.js
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import {
|
import {
|
||||||
SafeAreaView,
|
SafeAreaView,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
|
@ -8,6 +8,7 @@ import {
|
||||||
StatusBar,
|
StatusBar,
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
FlatList,
|
FlatList,
|
||||||
|
TouchableOpacity
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -20,12 +21,15 @@ import {
|
||||||
import { SearchBar } from 'react-native-elements';
|
import { SearchBar } from 'react-native-elements';
|
||||||
|
|
||||||
const ClubElement = ({item}) => {
|
const ClubElement = ({item}) => {
|
||||||
//console.log(item)
|
const [visible, setVisible] = useState(0)
|
||||||
|
const extra = visible?(<Text>{'\n'}Location: {item.item.loc} {"\n\n"}Sponsor: {item.item.sponsor}</Text>):(<></>);
|
||||||
return(
|
return(
|
||||||
<View style={styles.item}>
|
<View>
|
||||||
<Text style={styles.title}>{item.item.name}</Text>
|
<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)}>
|
||||||
<Text>Location: {item.item.loc} {"\n"}Sponsor: {item.item.sponsor}</Text>
|
<Text style={styles.title}>{item.item.name}</Text>
|
||||||
</View>
|
{extra}
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
class Clubs extends React.Component {
|
class Clubs extends React.Component {
|
||||||
|
@ -66,14 +70,12 @@ class Clubs extends React.Component {
|
||||||
}
|
}
|
||||||
updateSearch = (search) => {
|
updateSearch = (search) => {
|
||||||
this.setState({ search:search });
|
this.setState({ search:search });
|
||||||
ds = this.state.dataSearch.filter((thing)=>{return thing.name.startsWith(search)})
|
const searchPool = search.startsWith(this.state.search)?this.state.dataSearch:this.state.data;
|
||||||
|
const ds = searchPool.filter((thing)=>{return thing.name.toLowerCase().startsWith(search.toLowerCase())})
|
||||||
this.setState({dataSearch: ds})
|
this.setState({dataSearch: ds})
|
||||||
if (search == ""){
|
|
||||||
this.setState({dataSearch:this.state.data})
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
clearSearch = (search)=>{
|
clearSearch = (search)=>{
|
||||||
ds = this.state.data;
|
const ds = this.state.data;
|
||||||
this.setState({dataSearch:ds})
|
this.setState({dataSearch:ds})
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
|
@ -85,7 +87,7 @@ class Clubs extends React.Component {
|
||||||
<SafeAreaView style={styles.container}>
|
<SafeAreaView style={styles.container}>
|
||||||
<SearchBar
|
<SearchBar
|
||||||
lightTheme
|
lightTheme
|
||||||
placeholder="Type Here..."
|
placeholder="Search Clubs"
|
||||||
onChangeText={this.updateSearch}
|
onChangeText={this.updateSearch}
|
||||||
onCancel={this.clearSearch}
|
onCancel={this.clearSearch}
|
||||||
onClear={this.clearSearch}
|
onClear={this.clearSearch}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user