Profile Cache and Profile Header Started

components/Media.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Text, View, ScrollView, Image, StyleSheet } from 'react-native';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
+import VimeoPlayer from './VimeoPlayer.js';
 
 const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -39,13 +40,13 @@ let Media = (props) => {
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
     let [videosFiles, setVideosFiles] = useState([]);
-    useEffect(async ()=>{
-        if(!videosId[1]) return 0;
+    useEffect(async () => {
+        if (!videosId[1]) return 0;
         let videoObj = await API.getVideo(videosId[1]);
-        setVideosFiles(videoObj.files);
+        setVideosFiles(videoObj.files || []);
     }, [props.content])
-    //const vimeo = videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : undefined;
-    const vimeo = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> : null;
+    const vimeo = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> :
+        (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
     return (
         <View>
             <View style={{ flexDirection: "row" }}>

components/Post.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Text, ScrollView, FlatList, StyleSheet, View } from 'react-native';
+import { Text, ScrollView, FlatList, StyleSheet, View, Linking } from 'react-native';
+import Hyperlink from 'react-native-hyperlink'
 import { Avatar, Button, Card, Title, Chip } from 'react-native-paper';
 import API from './../API.js';
 import UserName from './UserName.js';
@@ -8,7 +9,6 @@ import Comment from "./Comment";
 import NewComment from './NewComment.js';
 import Moment from 'moment';
 
-
 let Post = (props) => {
     const viewer = props.viewer;
     let [showCommentsB, changeshowCommentsB] = useState(false);
@@ -18,6 +18,7 @@ let Post = (props) => {
     let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
         <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
     let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
+    //cleanContent = convertLinks(cleanContent);
     const newComentAdded = (commentData) => {
         let newPostObj = { ...post };
         newPostObj.comments.push(commentData);
@@ -54,23 +55,25 @@ let Post = (props) => {
     return (
         <Card style={styles.card}>
             <Card.Content>
-                {!post.nonOrganicType ?
-                    <View>
-                        <Text style={styles.userName}>
-                            <UserName profileid={post.profileid} />
-                            {toProfileText}
-                            <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
-                                {" " + Moment(post.createdAt).fromNow()}
+                <Hyperlink linkDefault={ true }>
+                    {!post.nonOrganicType ?
+                        <View>
+                            <Text style={styles.userName}>
+                                <UserName profileid={post.profileid} />
+                                {toProfileText}
+                                <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
+                                    {" " + Moment(post.createdAt).fromNow()}
+                                </Text>
                             </Text>
-                        </Text>
-                        <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
-                        <Media content={post.content} />
-                    </View> :
-                    <View>
-                        <Chip icon="new-releases" style={{ width: 100 }} >News</Chip>
-                        <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
-                    </View>
-                }
+                            <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
+                            <Media content={post.content} />
+                        </View> :
+                        <View>
+                            <Chip icon="new-releases" style={{ width: 100 }} >News</Chip>
+                            <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
+                        </View>
+                    }
+                </Hyperlink>
             </Card.Content>
             <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly', fontSize: 18 }}>
                 <Button

components/ProfileHeader.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { Text } from 'react-native';
+import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
+import UserName from './UserName';
+
+const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+
+const ProfileHeader = ({ profileObj }) => {
+    let photoUrl = profileObj.profile.photo ? 'https://social.emmint.com/' + profileObj.profile.photo : DefaultPhoto;
+    return (
+        <>
+            <Card elevation={3}>
+                <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} />
+                <Card.Content>
+                    <Title>
+                        <UserName profileid={profileObj._id} />
+                    </Title>
+                    <Paragraph>{profileObj.profile.description}</Paragraph>
+                    <Button mode='outlined'>Follow</Button>
+                </Card.Content>
+            </Card>
+            {/*
+            <Card.Title
+                title={<UserName profileid={profileObj._id} />}
+                subtitle={profileObj.profile.description}
+                left={(props) => <Avatar.Image {...props} source={{ uri: 'https://social.emmint.com/' + profileObj.profile.photo }} />}
+                right={(props) => <IconButton {...props} icon="more-vert" onPress={() => { }} />}
+            />
+            */}
+        </>
+    );
+
+}
+
+export default React.memo(ProfileHeader);

components/UserName.js

@@ -1,21 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';
+import { Text, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
-
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const storeName = async (key, value) => {
     try {
         const jsonValue = JSON.stringify(value)
-        await AsyncStorage.setItem('Name_'+key, jsonValue)
+        await AsyncStorage.setItem('Name_' + key, jsonValue)
     } catch (e) {
     }
 }
 
 const getName = async (key) => {
     try {
-        const value = await AsyncStorage.getItem('Name_'+key)
+        const value = await AsyncStorage.getItem('Name_' + key)
         if (value !== null) {
             return JSON.parse(value);
         }
@@ -24,25 +24,33 @@ const getName = async (key) => {
     }
 }
 
-let UserName = ({profileid}) => {
+let UserName = ({ profileid }) => {
     let [profile, setProfile] = useState({});
     const navigation = useNavigation();
 
     useEffect(async () => {
         let cacheProfile = await getName(profileid);
-        if(cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
+        if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
         let p = await API.getUserProfile(profileid).catch(() => { return {} });
         setProfile(p);
         storeName(profileid, p)
     }, [profileid]);
 
-    const onPress = ()=>{
-        return navigation.navigate('Profile', { 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;
+
+    const onPress = () => {
+        return navigation.navigate('Profile', { profileid })
     }
 
     return (
         <Text onPress={onPress}>
-            {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
+            <Text style={{ paddingTop: 10 }}>
+                <Icon name={icon} size={18} />
+            </Text>
+            <Text> {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
+
         </Text>
     );
 }