Horizontal Users

Views/Menu.js

@@ -16,26 +16,23 @@ let MenuView = ()=>{
     
     return (
         <View>
-            <List.Section title="Settings">
+            <List.Section title="User Actions">
-                <List.Accordion
+                <List.Item title="Settings" left={props => <List.Icon {...props} icon="settings" />}  />
-                    title="User Actions"
+                <List.Item title="Sign out" left={props => <List.Icon {...props} icon="logout" />}  />
-                    left={props => <List.Icon {...props} icon="person" />}
-                    expanded={true}
-                >
-                    <List.Item title="Sign out" left={props => <List.Icon {...props} icon="logout" />}  />
-                </List.Accordion>
                 <List.Item title="About" left={props => <List.Icon {...props} icon="more" />} />
             </List.Section>
-            <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
+            <View>
-                <View>
+                <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
-                    <Text>Español</Text>
+                    <View>
-                    <RadioButton value="es" />
+                        <Text>Español</Text>
-                </View>
+                        <RadioButton value="es" />
-                <View>
+                    </View>
-                    <Text>English</Text>
+                    <View>
-                    <RadioButton value="en" />
+                        <Text>English</Text>
-                </View>
+                        <RadioButton value="en" />
-            </RadioButton.Group>
+                    </View>
+                </RadioButton.Group>
+            </View>
         </View>
     )
 }

Views/Search.js

@@ -1,10 +1,13 @@
 import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList, Text } from 'react-native';
 import API from "../API";
-import ProfileCard from "../components/ProfileCard";
+import ProfileCardHorizontal from "../components/ProfileCardHorizontal";
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
 
 const Search = () => {
+    const viewer = useSnapshot(GlobalState).me;
     const [searchQuery, setSearchQuery] = React.useState('');
     const [profiles, setProfiles] = React.useState([]);
     const [queryTimer, setQueryTimer] = React.useState(0);
@@ -31,7 +34,10 @@ const Search = () => {
         setQueryTimer(timerId);
     };
     const renderProfile = (({ item }) => {
-        return (<ProfileCard profileObj={item} />);
+        return (<ProfileCardHorizontal profileObj={item} />);
+    });
+    const renderFollowing = (({ item }) => {
+        return (<ProfileCardHorizontal profileid={item} />);
     });
     return (
         <SafeAreaView style={{ flex: 1 }}>
@@ -41,14 +47,26 @@ const Search = () => {
                 value={searchQuery}
                 elevation={3}
             />
+            {
+            searchQuery.length ? 
             <FlatList
                 contentContainerStyle={styles.container}
-                numColumns={2}
+                numColumns={1}
-                columnWrapperStyle={{ justifyContent: "space-evenly" }}
                 data={profiles}
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
+            /> :
+            <>
+            <Text>Current Following:</Text>
+            <FlatList
+                contentContainerStyle={styles.container}
+                numColumns={1}
+                data={viewer.following}
+                renderItem={renderFollowing}
+                keyExtractor={item => item}
             />
+            </>
+        }
         </SafeAreaView>
     )
 }

components/ProfileCardHorizontal.js

@@ -0,0 +1,91 @@
+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 API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import FollowButton from './basics/FollowButton.js';
+
+const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+
+const storeName = async (key, value) => {
+    try {
+        const jsonValue = JSON.stringify(value)
+        await AsyncStorage.setItem('Name_' + key, jsonValue)
+    } catch (e) {
+    }
+}
+
+const getName = async (key) => {
+    try {
+        const value = await AsyncStorage.getItem('Name_' + key)
+        if (value !== null) {
+            return JSON.parse(value);
+        }
+    } catch (e) {
+        return []
+    }
+}
+
+let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
+    let [profile, setProfile] = useState(profileObj || {});
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        let subscribed = true;
+        const getData = async () => {
+            if (profile?._id) return 0;
+            let cacheProfile = await getName(profileid);
+            if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile);
+            let p = await API.getUserProfile(profileid).catch(() => { return {} });
+            if (subscribed) setProfile(p);
+            storeName(profileid, p)
+        };
+        getData();
+        return () => {
+            subscribed = false;
+        }
+    }, [profileid]);
+
+    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;
+    let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
+
+    const onPress = () => {
+        return navigation.navigate('Profile', { profileid: profile._id })
+    }
+
+    return (
+        <Card style={styles.content} mode="elevated">
+            <Card.Content>
+                <View style={{ flexDirection: "row" }}>
+                    <View onPress={onPress}>
+                        <Avatar.Image size={100} source={{ uri: photoUrl }} />
+                        
+                    </View>
+                    <View style={{paddingLeft: 10}}>
+                        <Title onPress={onPress} numberOfLines={1}>
+                            <Text>
+                                {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
+                            </Text>
+                        </Title>
+                        <Paragraph lineBreakMode="clip" numberOfLines={3} style={{width:250}}>{profile.profile?.description}</Paragraph>
+                    </View>
+                    <View>
+                        <FollowButton profile={profile._id ? profile : {_id: profileid}} />
+                    </View>
+                </View>
+            </Card.Content>
+        </Card>
+    );
+}
+
+export default React.memo(ProfileCardHorizontal);
+
+const styles = StyleSheet.create({
+    content: {
+        margin: 4,
+    },
+});