From e5554c2f8eaf3b0739db0092b5b07437aa54f312 Mon Sep 17 00:00:00 2001 From: aeroreyna Date: Wed, 16 Mar 2022 23:02:17 -0700 Subject: [PATCH] Searchs views for users, groups and courses --- App.js | 48 +++++++++++++++++++++++- Views/Courses.js | 63 ++++++++++++++++++++++++++++++++ Views/Groups.js | 63 ++++++++++++++++++++++++++++++++ Views/Search.js | 55 ++++++++++++++++++++++++++++ components/ProfileSmallHeader.js | 23 ++++++++++++ components/UserName.js | 4 +- 6 files changed, 253 insertions(+), 3 deletions(-) create mode 100644 Views/Courses.js create mode 100644 Views/Groups.js create mode 100644 Views/Search.js create mode 100644 components/ProfileSmallHeader.js diff --git a/App.js b/App.js index 90dcc52..4995ea0 100644 --- a/App.js +++ b/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 }} /> + ( + + ), + tabBarBadge: false + }} + /> + ( + + ), + tabBarBadge: false + }} + /> + ( + + ), + tabBarBadge: false + }} + /> - + ( + + ), + tabBarBadge: false + }} + /> ) } diff --git a/Views/Courses.js b/Views/Courses.js new file mode 100644 index 0000000..a2132f4 --- /dev/null +++ b/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 (); + }); + return ( + + + item._id} + /> + + ) +} + +export default Courses; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#edf2f7", + }, +}); diff --git a/Views/Groups.js b/Views/Groups.js new file mode 100644 index 0000000..62c776c --- /dev/null +++ b/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 (); + }); + return ( + + + item._id} + /> + + ) +} + +export default Groups; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#edf2f7", + }, +}); diff --git a/Views/Search.js b/Views/Search.js new file mode 100644 index 0000000..7659c6a --- /dev/null +++ b/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 (); + }); + return ( + + + item._id} + /> + + ) +} + +export default Search; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#edf2f7", + }, +}); diff --git a/components/ProfileSmallHeader.js b/components/ProfileSmallHeader.js new file mode 100644 index 0000000..979f7cc --- /dev/null +++ b/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 ( + <> + } + subtitle={profileObj.profile.description} + left={(props) => } + right={(props) => { }} />} + /> + + ); + +} + +export default React.memo(ProfileSmallHeader); \ No newline at end of file diff --git a/components/UserName.js b/components/UserName.js index 60e6ccf..74ee0d0 100644 --- a/components/UserName.js +++ b/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 ( - + {!hideIcon ? : <>} {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}