Add profile, group, and Courses cards

Views/Courses.js

@@ -1,23 +1,72 @@
 import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { Title } from 'react-native-paper';
 import API from "../API";
-import UserName from "../components/UserName";
-import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
+import CourseCard from "../components/CourseCard";
+
+
+const getCourses = async (profileObj) => {
+    let courses;
+    let popular;
+    await API.getCourses().then((data) => {
+        courses = data.groups;
+        popular = [...data.groups].sort((a, b) => {
+            return Object.keys(b.subscribed).length - Object.keys(a.subscribed).length;
+        });
+    });
+    let watching = {};
+    let watchingProms = [];
+    Object.keys(profileObj.data).forEach((videoId) => {
+        if (profileObj.data[videoId].profileId) {
+            let profileId = profileObj.data[videoId].profileId;
+            watchingProms.push(API.getUserProfile(profileId).then(profile => {
+                if (!profile.isCourse)
+                    return 0;
+                if (!watching[profileId])
+                    watching[profileId] = { profile, progress: [], mostRecent: 0 };
+                if (watching[profileId].mostRecent < profileObj.data[videoId].ts)
+                    watching[profileId].mostRecent = profileObj.data[videoId].ts;
+                watching[profileId].progress.push(profileObj.data[videoId]);
+            }));
+        }
+    });
+    let watchingArray = [];
+    await Promise.all(watchingProms).then(() => {
+        for (const courseId in watching) {
+            watchingArray.push(watching[courseId]);
+        }
+        watchingArray = watchingArray.sort((a, b) => {
+            return b.mostRecent - a.mostRecent;
+        });
+    });
+    return {
+        courses,
+        popular,
+        watching: watchingArray,
+    }
+}
 
 const Courses = () => {
+    const [Me, setMeProfile] = React.useState({});
     const [searchQuery, setSearchQuery] = React.useState('');
     const [groups, setGroups] = React.useState([]);
+    const [popular, setPopular] = React.useState([]);
+    const [watching, setWatching] = React.useState([]);
     const [queryTimer, setQueryTimer] = React.useState(0);
 
-    useEffect(() => {
-        API.getCourses('').then((data) => {
-            setGroups(data.groups || []);
-        });
+    useEffect(async () => {
+        let Me = await API.getMe();
+        setMeProfile(Me);
+        //API.getCourses('').then((data) => {
+        //    setGroups(data.groups || []);
+        //});
+        let r = await getCourses(Me);
+        setGroups(r.courses || []);
+        setPopular(r.popular || []);
+        setWatching(r.watching || []);
     }, [])
 
-
-
     const onChangeSearch = query => {
         setSearchQuery(query);
         if (queryTimer) clearTimeout(queryTimer);
@@ -35,7 +84,10 @@ const Courses = () => {
         setQueryTimer(timerId);
     };
     const renderProfile = (({ item }) => {
-        return (<ProfileSmallHeader profileObj={item} />);
+        return (<CourseCard profileObj={item} />);
+    });
+    const watchingCourse = (({ item }) => {
+        return (<CourseCard profileObj={item.profile} />);
     });
     return (
         <SafeAreaView style={styles.container}>
@@ -44,11 +96,30 @@ const Courses = () => {
                 onChangeText={onChangeSearch}
                 value={searchQuery}
             />
-            <FlatList
-                data={groups}
-                renderItem={renderProfile}
-                keyExtractor={item => item._id}
-            />
+            {groups.length ? <></> : <ActivityIndicator />}
+            <ScrollView>
+                <Title>Continue Watching:</Title>
+                <FlatList
+                    horizontal={true}
+                    data={watching}
+                    renderItem={watchingCourse}
+                    keyExtractor={item => item.profile._id}
+                />
+                <Title>Recently Added:</Title>
+                <FlatList
+                    horizontal={true}
+                    data={groups}
+                    renderItem={renderProfile}
+                    keyExtractor={item => item._id}
+                />
+                <Title>Popular:</Title>
+                <FlatList
+                    horizontal={true}
+                    data={popular}
+                    renderItem={renderProfile}
+                    keyExtractor={item => item._id}
+                />
+            </ScrollView>
         </SafeAreaView>
     )
 }
@@ -57,7 +128,5 @@ export default Courses;
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
-        backgroundColor: "#edf2f7",
     },
 });

Views/Groups.js

@@ -3,6 +3,7 @@ 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 GroupCard from "../components/GroupCard";
 import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
 
 const Groups = () => {
@@ -35,16 +36,19 @@ const Groups = () => {
         setQueryTimer(timerId);
     };
     const renderProfile = (({ item }) => {
-        return (<ProfileSmallHeader profileObj={item} />);
+        return (<GroupCard profileObj={item} />);
     });
     return (
-        <SafeAreaView style={styles.container}>
+        <SafeAreaView>
             <Searchbar
-                placeholder="Search Users"
+                placeholder="Search Groups"
                 onChangeText={onChangeSearch}
                 value={searchQuery}
             />
             <FlatList
+                contentContainerStyle={styles.container}
+                numColumns={2}
+                columnWrapperStyle={{justifyContent: "space-evenly"}}
                 data={groups}
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
@@ -57,7 +61,6 @@ export default Groups;
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
-        backgroundColor: "#edf2f7",
+        padding: 5,
     },
 });

Views/Search.js

@@ -1,8 +1,9 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { View, ScrollView, StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
 import UserName from "../components/UserName";
+import ProfileCard from "../components/ProfileCard";
 import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
 
 const Search = () => {
@@ -11,36 +12,40 @@ const Search = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(() => {
-        API.searchProfiles('').then((data)=>{
+        API.searchProfiles('').then((data) => {
             setProfiles(data.profiles || []);
         });
     }, [])
-    
+
     const onChangeSearch = query => {
         setSearchQuery(query);
-        if(queryTimer) clearTimeout(queryTimer);
-        let timerId = setTimeout(()=>{
-            API.searchProfiles(query).then((data)=>{
+        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 (<ProfileCard profileObj={item} />);
     });
     return (
-        <SafeAreaView style={styles.container}>
+        <SafeAreaView >
             <Searchbar
                 placeholder="Search Users"
                 onChangeText={onChangeSearch}
                 value={searchQuery}
+                elevation={3}
             />
             <FlatList
-                    data={profiles}
-                    renderItem={renderProfile}
-                    keyExtractor={item => item._id}
-                />
+                contentContainerStyle={styles.container}
+                numColumns={2}
+                columnWrapperStyle={{justifyContent: "space-evenly"}}
+                data={profiles}
+                renderItem={renderProfile}
+                keyExtractor={item => item._id}
+            />
         </SafeAreaView>
     )
 }
@@ -49,7 +54,6 @@ export default Search;
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
-        backgroundColor: "#edf2f7",
+        padding: 5,
     },
 });