From 9a037e92a6087897c87ff0835fb7dfb6400e6648 Mon Sep 17 00:00:00 2001
From: M10T <milantenn@gmail.com>
Date: Mon, 10 Aug 2020 15:25:00 -0400
Subject: [PATCH] Improved the clubs interface

---
 app/Clubs.js | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/Clubs.js b/app/Clubs.js
index f415419..be69279 100644
--- a/app/Clubs.js
+++ b/app/Clubs.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -8,6 +8,7 @@ import {
   StatusBar,
   ActivityIndicator, 
   FlatList,
+  TouchableOpacity
 } from 'react-native';
 
 import {
@@ -20,12 +21,15 @@ import {
 import { SearchBar } from 'react-native-elements';
 
 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(
-  <View style={styles.item}>
-    <Text style={styles.title}>{item.item.name}</Text>
-    <Text>Location: {item.item.loc} {"\n"}Sponsor: {item.item.sponsor}</Text>
-  </View>
+	<View>
+	  <TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)}>
+		<Text style={styles.title}>{item.item.name}</Text>
+		{extra}
+	  </TouchableOpacity>
+	</View>
   )
 }
 class Clubs extends React.Component {
@@ -66,14 +70,12 @@ class Clubs extends React.Component {
   }
   updateSearch = (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})
-    if (search == ""){
-      this.setState({dataSearch:this.state.data})
-    }
   };
   clearSearch  = (search)=>{
-    ds = this.state.data;
+    const ds = this.state.data;
     this.setState({dataSearch:ds})
   }
   render() {
@@ -85,7 +87,7 @@ class Clubs extends React.Component {
       <SafeAreaView style={styles.container}>
         <SearchBar
         lightTheme
-        placeholder="Type Here..."
+        placeholder="Search Clubs"
         onChangeText={this.updateSearch}
         onCancel={this.clearSearch}
         onClear={this.clearSearch}