Search for Staff + small style change

app/Staff.js

@@ -6,6 +6,7 @@ import {
   View,
   Text,
   StatusBar,
+  ActivityIndicator, 
   FlatList,
   TouchableOpacity
 } from 'react-native';
@@ -17,62 +18,87 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-
+import { SearchBar } from 'react-native-elements';
-import { url } from './resources/fetchInfo.json'
 import styles from './styles/liststyles'
+import { url } from './resources/fetchInfo.json'
 
-const TeacherElement = ({item}) => {
+const StaffElement = ({item}) => {
+  console.log(item)
   const [visible, setVisible] = useState(0)
-  const extra = [...item.item.emails.map(email=>(<Text key={email}>Email: {email}</Text>))]
+  const extra = visible?(<Text>{'\n'}Email: {item.item.emails}</Text>):(<></>);
   return(
 	<View>
 	  <TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
 		<Text style={styles.title}>{item.item.name}</Text>
-		{visible?extra:<></>}
+		{extra}
 	  </TouchableOpacity>
 	</View>
   )
 }
-
 class Staff extends React.Component {
 
+  
 	constructor(props) {
-		super(props)
+    super(props);
-		this.state = {
-			isLoading: true
-		}
-	}
 
-	componentDidMount() {
+    this.state = {
-		fetch(`${url}/api/en/teachers`,{
+      data: [],
-			headers: {
+      dataSearch:[],
-				'Cache-Control': 'no-cache'
+      isLoading: true,
-			}
+      search:""
-			}
+    };
-		)
+  }
-		.then((response) => {
-			return response.text();
-		})
-		.then((json) => {
-			this.setState({data: JSON.parse(json).data});
-		})
-		.catch((error) => console.error(error))
-		.finally(()=>this.setState({isLoading:false}))
-	}
 
-	render() {
+  componentDidMount() {
-		if(this.state.isLoading) return (<View/>)
     
-		return (
+    fetch(`${url}/api/en/teachers`,{
-			<View style={styles.container}>
+      headers: {
-				<FlatList
+        'Cache-Control': 'no-cache'
-					data={this.state.data}
+      } })
-					renderItem={item=><TeacherElement item={item} />}
+      .then((response) => {
-					keyExtractor={(item,index)=>JSON.stringify(item)+index}
+        return response.text();
-				/>
+      })
-			</View>
+      .then((json) => {
-		)
+        this.setState({data: JSON.parse(json).data[0].staff});
-	}
+        this.setState({dataSearch:JSON.parse(json).data[0].staff});
+      })
+      .catch((error) => console.error(error))
+      .finally(() => {
+        this.setState({ isLoading: false });
+      });
+      
+  }
+  updateSearch = (search) => {
+    this.setState({ search: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})
+  };
+  clearSearch  = (search)=>{
+    const ds = this.state.data;
+    this.setState({dataSearch:ds})
+  }
+  render() {
+    const { data , dataSearch, isLoading,search} = this.state;
+    console.log(data)
+
+    return (
+      <SafeAreaView style={styles.container}>
+        <SearchBar
+        lightTheme
+        placeholder="Search Staff"
+        onChangeText={this.updateSearch}
+        onCancel={this.clearSearch}
+        onClear={this.clearSearch}
+        value={this.state.search}/>
+      <FlatList
+        data={dataSearch}
+        renderItem={item => <StaffElement item={item}/>}
+        keyExtractor={item => JSON.stringify(item)}
+      />
+    </SafeAreaView>
+    );
+  }
 }
 
 export default Staff;

app/styles/liststyles.js

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
     padding: 20,
     marginVertical: 8,
     marginHorizontal: 16,
+    borderRadius: 8,
   },
   title: {
     fontSize: 32,