Improving groups

API.js

@@ -257,6 +257,9 @@ const API = {
     getRecentGroups() {
         return getCall("/user/groups");
     },
+    getFollowingGroups() {
+        return getCall("/user/groups/following");
+    },
     searchGroups(query){
         return getCall("/user/groups/search", query ? {query} : {}).then((data)=>{
             if(data.status == "ok"){

Views/Groups.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Searchbar } from 'react-native-paper';
+import { Searchbar, Title } from 'react-native-paper';
 import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
 import GroupCard from "../components/GroupCard";
@@ -11,9 +11,9 @@ const Groups = () => {
 
     useEffect(() => {
         let subscribed = true;
-        API.getRecentGroups('').then((data) => {
+        API.getFollowingGroups('').then((data) => {
             if (subscribed)
-                setGroups(data.groups || []);
+                setGroups(data?.groups || []);
         });
         return () => {
             subscribed = false;
@@ -27,7 +27,7 @@ const Groups = () => {
         if (queryTimer) clearTimeout(queryTimer);
         let timerId = setTimeout(() => {
             if (!query) {
-                return API.getRecentGroups('').then((data) => {
+                return API.getFollowingGroups('').then((data) => {
                     setGroups(data.groups || []);
                 });
             }
@@ -50,11 +50,11 @@ const Groups = () => {
             />
             <FlatList
                 contentContainerStyle={styles.container}
-                numColumns={2}
-                columnWrapperStyle={{ justifyContent: "space-evenly" }}
+                numColumns={1}
                 data={groups}
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
+                ListHeaderComponent={searchQuery ? <></> : <Title style={styles.title} >Groups you follow:</Title>}
             />
         </SafeAreaView>
     )
@@ -66,4 +66,11 @@ const styles = StyleSheet.create({
     container: {
         padding: 5,
     },
+    title: {
+        padding: 10,
+        fontSize: 30,
+        marginTop: 15,
+        fontWeight: "bold",
+        color: "#777"
+    }
 });

components/GroupCard.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Text, StyleSheet, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
+import { List, IconButton, Card, Chip, Badge } from 'react-native-paper';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -51,6 +51,7 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
     let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';
     icon = icon === "person-outline" && profile.subscription && profile.subscription > (new Date() - 0) ? "assignment-ind" : icon;
     icon = icon === "group" && profile.isCourse ? "subscriptions" : icon;
+    icon = icon === "group" && profile.isPrivate ? "screen-lock-portrait" : icon;
     let photoUrl = profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
 
     const onPress = () => {
@@ -60,22 +61,20 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
     return (
         <Card style={styles.content}>
             <Card.Content>
-                <Title onPress={onPress} numberOfLines={1}>
-                    <Text style={{ paddingTop: 10 }}>
-                        {!hideIcon ? <Icon name={icon} size={18} /> : <></>}
-                    </Text>
-                    <Text>
-                        {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
-                    </Text>
-                </Title>
-                <Paragraph numberOfLines={4}>{profileObj.profile.description}</Paragraph>
-                <View style={{flexDirection: "row", justifyContent:"space-evenly"}}>
-                    <FollowButton profile={profile} />
-                    <Text>
-                        <Icon name={"hail"} size={18} />
-                        {Object.keys(profile.subscribed).length}
-                    </Text>
-                </View>
+                <IconButton icon={icon}  style={{
+                    position: "absolute",
+                    right: 5,
+                    top: 5,
+                }} />
+                <List.Item
+                    title={profile.profile?.firstName + " " + profile.profile?.lastName}
+                    description={profileObj.profile.description}
+                    //left={props => <List.Icon {...props} icon={icon} />}
+                    titleStyle={{fontWeight:"bold", fontSize:20}}
+                    descriptionStyle={{}}
+                    onPress={onPress}
+                    descriptionNumberOfLines={4}
+                />
             </Card.Content>
         </Card>
 
@@ -87,7 +86,6 @@ export default React.memo(ProfileCard);
 const styles = StyleSheet.create({
     content: {
         margin: 4,
-        width: "50%",
     },
     centerItems: {
         justifyContent: 'center',