Searchs views for users, groups and courses

Views/Groups.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+import { Searchbar } from 'react-native-paper';
+import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import API from "../API";
+import UserName from "../components/UserName";
+import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
+
+const Groups = () => {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [groups, setGroups] = React.useState([]);
+    const [queryTimer, setQueryTimer] = React.useState(0);
+
+    useEffect(() => {
+        API.getRecentGroups('').then((data) => {
+            setGroups(data.groups || []);
+        });
+    }, [])
+
+
+
+    const onChangeSearch = query => {
+        setSearchQuery(query);
+        if (queryTimer) clearTimeout(queryTimer);
+        let timerId = setTimeout(() => {
+            if (!query) {
+                return API.getRecentGroups('').then((data) => {
+                    setGroups(data.groups || []);
+                });
+            }
+            API.searchGroups(query).then((data) => {
+                setGroups(data.groups || []);
+            })
+
+        }, 300);
+        setQueryTimer(timerId);
+    };
+    const renderProfile = (({ item }) => {
+        return (<ProfileSmallHeader profileObj={item} />);
+    });
+    return (
+        <SafeAreaView style={styles.container}>
+            <Searchbar
+                placeholder="Search Users"
+                onChangeText={onChangeSearch}
+                value={searchQuery}
+            />
+            <FlatList
+                data={groups}
+                renderItem={renderProfile}
+                keyExtractor={item => item._id}
+            />
+        </SafeAreaView>
+    )
+}
+
+export default Groups;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#edf2f7",
+    },
+});