Horizontal Users

2022-12-22 17:52:04 -05:00
parent 7bf7d8feae
commit 3d50977520
3 changed files with 129 additions and 23 deletions
--- a/components/ProfileCardHorizontal.js
+++ b/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,
+    },
+});