adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add profile, group, and Courses cards

Browse Source
This commit is contained in:
aeroreyna
2022-03-19 09:28:02 -07:00
parent e5554c2f8e
commit 76ec6331f5
9 changed files with 401 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
components/CourseCard.js Normal file
View File

@@ -0,0 +1,104 @@
import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Avatar, 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';
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 CourseCard = ({ profileid, hideIcon, profileObj }) => {
let [profile, setProfile] = useState(profileObj || {});
const navigation = useNavigation();
useEffect(async () => {
if (profileObj._id) return 0;
let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} });
setProfile(p);
storeName(profileid, p)
}, [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.data && profile.data.profileImg ? profile.data.profileImg : DefaultPhoto;
const onPress = () => {
return navigation.navigate('Profile', { profileid: profile._id })
}
return (
<Card style={styles.content}>
<Card.Content>
<Title onPress={onPress} numberOfLines={2}>
<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={2}>
{profileObj.profile.description ? profileObj.profile.description : "We are working on this course description, soon to come!"}
</Paragraph>
{profile.data ?
<View style={{flexDirection: "row", marginTop:5}}>
<Avatar.Image size={64} source={{ uri: photoUrl }} />
<View>
<Text>By: {profile.data.author ? profile.data.author : 'Working on this'}</Text>
<Text>
<Icon name="date-range" />
{profile.data.year ? profile.data.year : 'XXXX'}
</Text>
<Text>
<Icon name="timer" />
{profile.data.duration ? profile.data.duration : '??'}
</Text>
<Text>
<Icon name="language" />
{profile.data.language}
</Text>
</View>
</View>
: <></>
}
</Card.Content>
</Card>
);
}
export default React.memo(CourseCard);
const styles = StyleSheet.create({
content: {
margin: 4,
width: 250,
},
centerItems: {
justifyContent: 'center',
alignItems: 'center',
}
});

86
components/GroupCard.js Normal file
View File

@@ -0,0 +1,86 @@
import React, { useState, useEffect } from 'react';
import { Text, StyleSheet } 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';
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 ProfileCard = ({ profileid, hideIcon, profileObj }) => {
let [profile, setProfile] = useState(profileObj || {});
const navigation = useNavigation();
useEffect(async () => {
if (profileObj._id) return 0;
let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} });
setProfile(p);
storeName(profileid, p)
}, [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}>
<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>
<Text>
<Button mode='outlined'>Follow</Button>
<Text><Icon name={"hail"} size={18} />
{Object.keys(profile.subscribed).length}</Text>
</Text>
</Card.Content>
</Card>
);
}
export default React.memo(ProfileCard);
const styles = StyleSheet.create({
content: {
margin: 4,
width: "50%",
},
centerItems: {
justifyContent: 'center',
alignItems: 'center',
}
});

18
components/Media.js
View File

@@ -3,6 +3,7 @@ import { Text, View, ScrollView, Image, StyleSheet } from 'react-native';
import API from './../API.js';
import VideoPlayer from './VideoPlayer.js';
import VimeoPlayer from './VimeoPlayer.js';
import { WebView } from 'react-native-webview';
const videoIdF = (content) => {
let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -28,7 +29,7 @@ const imagesTagF = (content) => {
const iframeTagF = (content) => {
let iframeMatch = content.match(/@iframe:.+\w/g);
if (!iframeMatch) return 0;
if (!iframeMatch) return [];
let tag = iframeMatch[0].substring(1);
let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
return parts;
@@ -39,14 +40,20 @@ let Media = (props) => {
const imagesTag = imagesTagF(props.content);
const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
const videosId = videoIdF(props.content);
const iframeSrc = iframeTagF(props.content) || [];
let [videosFiles, setVideosFiles] = useState([]);
useEffect(async () => {
if (!videosId[1]) return 0;
let videoObj = await API.getVideo(videosId[1]);
setVideosFiles(videoObj.files || []);
}, [props.content])
const vimeo = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> :
const video = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> :
(videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
const iframe = iframeSrc.length ?
<WebView
style={styles.iframe}
source={{ uri: iframeSrc[1] }}
/> : <></>;
return (
<View>
<View style={{ flexDirection: "row" }}>
@@ -59,7 +66,8 @@ let Media = (props) => {
})
}
</View>
{vimeo}
{video}
{iframe}
</View>
);
}
@@ -75,5 +83,9 @@ const styles = StyleSheet.create({
width: "49%",
aspectRatio: 1,
margin: 2,
},
iframe:{
width: "100%",
minHeight: 300,
}
});

80
components/ProfileCard.js Normal file
View File

@@ -0,0 +1,80 @@
import React, { useState, useEffect } from 'react';
import { Text, StyleSheet } 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';
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 ProfileCard = ({ profileid, hideIcon, profileObj }) => {
let [profile, setProfile] = useState(profileObj || {});
const navigation = useNavigation();
useEffect(async () => {
if (profileObj._id) return 0;
let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} });
setProfile(p);
storeName(profileid, p)
}, [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}>
<Card.Content>
<Avatar.Image size={150} source={{ uri: photoUrl }} />
<Title onPress={onPress} numberOfLines={1}>
<Text>
{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
</Text>
</Title>
<Paragraph numberOfLines={2}>{profileObj.profile.description}</Paragraph>
<Button mode='outlined'>Follow</Button>
</Card.Content>
</Card>
);
}
export default React.memo(ProfileCard);
const styles = StyleSheet.create({
content: {
margin: 4,
width: "50%",
},
centerItems:{
justifyContent: 'center',
alignItems: 'center',
}
});

2
components/ProfileHeader.js
View File

@@ -6,7 +6,7 @@ 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;
let photoUrl = profileObj.profile && profileObj.profile.photo ? 'https://social.emmint.com/' + profileObj.profile.photo : DefaultPhoto;
return (
<>
<Card elevation={3}>