Searchs views for users, groups and courses

App.js

@@ -8,6 +8,9 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
 import Profile from "./Views/Profile.js"
+import Search from './Views/Search.js';
+import Groups from './Views/Groups.js';
+import Courses from './Views/Courses.js';
 import NotificationsView from './Views/NotificationsView.js';
 import SinglePost from './Views/SinglePost.js'
 import * as Device from 'expo-device';
@@ -131,8 +134,51 @@ const MainNavigation = () => {
                     tabBarBadge: false
                 }}
             />
+            <Tab.Screen
+                name="Search"
+                component={Search}
+                options={{
+                    tabBarLabel: 'Search',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="search" color={color} size={26} />
+                    ),
+                    tabBarBadge: false
+                }}
+            />
+            <Tab.Screen
+                name="Groups"
+                component={Groups}
+                options={{
+                    tabBarLabel: 'Groups',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="groups" color={color} size={26} />
+                    ),
+                    tabBarBadge: false
+                }}
+            />
+            <Tab.Screen
+                name="Courses"
+                component={Courses}
+                options={{
+                    tabBarLabel: 'Courses',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="subscriptions" color={color} size={26} />
+                    ),
+                    tabBarBadge: false
+                }}
+            />
 
-            <Tab.Screen name="Logout" component={Login} />
+            <Tab.Screen 
+                name="Logout" 
+                component={Login} 
+                options={{
+                    tabBarLabel: 'Logout',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="logout" color={color} size={26} />
+                    ),
+                    tabBarBadge: false
+                }}
+            />
         </Tab.Navigator>
     )
 }

Views/Courses.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 Courses = () => {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [groups, setGroups] = React.useState([]);
+    const [queryTimer, setQueryTimer] = React.useState(0);
+
+    useEffect(() => {
+        API.getCourses('').then((data) => {
+            setGroups(data.groups || []);
+        });
+    }, [])
+
+
+
+    const onChangeSearch = query => {
+        setSearchQuery(query);
+        if (queryTimer) clearTimeout(queryTimer);
+        let timerId = setTimeout(() => {
+            if (!query) {
+                return API.getCourses('').then((data) => {
+                    setGroups(data.groups || []);
+                });
+            }
+            API.searchCourses(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 Courses;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#edf2f7",
+    },
+});

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",
+    },
+});

Views/Search.js

@@ -0,0 +1,55 @@
+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 Search = () => {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [profiles, setProfiles] = React.useState([]);
+    const [queryTimer, setQueryTimer] = React.useState(0);
+
+    useEffect(() => {
+        API.searchProfiles('').then((data)=>{
+            setProfiles(data.profiles || []);
+        });
+    }, [])
+    
+    const onChangeSearch = query => {
+        setSearchQuery(query);
+        if(queryTimer) clearTimeout(queryTimer);
+        let timerId = setTimeout(()=>{
+            API.searchProfiles(query).then((data)=>{
+                setProfiles(data.profiles || []);
+            });
+        }, 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={profiles}
+                    renderItem={renderProfile}
+                    keyExtractor={item => item._id}
+                />
+        </SafeAreaView>
+    )
+}
+
+export default Search;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#edf2f7",
+    },
+});

components/ProfileSmallHeader.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { Text } from 'react-native';
+import { Avatar, IconButton, Card, Title, Paragraph } from 'react-native-paper';
+import UserName from './UserName';
+
+const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+
+const ProfileSmallHeader = ({ profileObj }) => {
+    let photoUrl = profileObj.profile.photo ? 'https://social.emmint.com/' + profileObj.profile.photo : DefaultPhoto;
+    return (
+        <>
+            <Card.Title
+                title={<UserName profileid={profileObj._id} hideIcon={true} />}
+                subtitle={profileObj.profile.description}
+                left={(props) => <Avatar.Image {...props} source={{ uri: photoUrl}} />}
+                right={(props) => <IconButton {...props} icon="more-vert" onPress={() => { }} />}
+            />
+        </>
+    );
+
+}
+
+export default React.memo(ProfileSmallHeader);

components/UserName.js

@@ -24,7 +24,7 @@ const getName = async (key) => {
     }
 }
 
-let UserName = ({ profileid }) => {
+let UserName = ({ profileid, hideIcon }) => {
     let [profile, setProfile] = useState({});
     const navigation = useNavigation();
 
@@ -47,7 +47,7 @@ let UserName = ({ profileid }) => {
     return (
         <Text onPress={onPress}>
             <Text style={{ paddingTop: 10 }}>
-                <Icon name={icon} size={18} />
+                {!hideIcon ? <Icon name={icon} size={18} /> : <></>}
             </Text>
             <Text> {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>