Search for Staff + small style change

app/Staff.js

@@ -6,6 +6,7 @@ import {
   View,
   Text,
   StatusBar,
+  ActivityIndicator, 
   FlatList,
   TouchableOpacity
 } from 'react-native';
@@ -17,61 +18,86 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-
-import { url } from './resources/fetchInfo.json'
+import { SearchBar } from 'react-native-elements';
 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
-		}
+      data: [],
+      dataSearch:[],
+      isLoading: true,
+      search:""
+    };
   }
 
   componentDidMount() {
+    
     fetch(`${url}/api/en/teachers`,{
       headers: {
         'Cache-Control': 'no-cache'
-			}
-			}
-		)
+      } })
       .then((response) => {
         return response.text();
       })
       .then((json) => {
-			this.setState({data: JSON.parse(json).data});
+        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}))
-	}
+      .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() {
-		if(this.state.isLoading) return (<View/>)
+    const { data , dataSearch, isLoading,search} = this.state;
+    console.log(data)
 
     return (
-			<View style={styles.container}>
+      <SafeAreaView style={styles.container}>
+        <SearchBar
+        lightTheme
+        placeholder="Search Staff"
+        onChangeText={this.updateSearch}
+        onCancel={this.clearSearch}
+        onClear={this.clearSearch}
+        value={this.state.search}/>
       <FlatList
-					data={this.state.data}
-					renderItem={item=><TeacherElement item={item} />}
-					keyExtractor={(item,index)=>JSON.stringify(item)+index}
+        data={dataSearch}
+        renderItem={item => <StaffElement item={item}/>}
+        keyExtractor={item => JSON.stringify(item)}
       />
-			</View>
-		)
+    </SafeAreaView>
+    );
   }
 }
 

app/styles/liststyles.js

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