Adolfo Reyna
120 lines
4.3 KiB
JavaScript
120 lines
4.3 KiB
JavaScript
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, twoCols }) => {
|
|
let [profile, setProfile] = useState(profileObj || {});
|
|
const safeProfile = profile || {};
|
|
const safeProfileInfo = safeProfile.profile || {};
|
|
const safeProfileObj = profileObj || {};
|
|
const safeProfileObjInfo = safeProfileObj.profile || {};
|
|
const navigation = useNavigation();
|
|
|
|
useEffect(() => {
|
|
let subscribed = true;
|
|
const getData = async () => {
|
|
if (safeProfileObj._id) return 0;
|
|
let cacheProfile = await getName(profileid);
|
|
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
|
|
let p = await API.getUserProfile(profileid).catch(() => { return {} });
|
|
if(subscribed) setProfile(p);
|
|
storeName(profileid, p);
|
|
}
|
|
getData();
|
|
return () => {
|
|
subscribed = false;
|
|
}
|
|
}, [profileid]);
|
|
|
|
let icon = safeProfile._id ? (!safeProfile.isGroup ? "person-outline" : "group") : '';
|
|
icon = icon === "person-outline" && safeProfile.subscription && safeProfile.subscription > (new Date() - 0) ? "assignment-ind" : icon;
|
|
icon = icon === "group" && safeProfile.isCourse ? "subscriptions" : icon;
|
|
let photoUrl = safeProfile.data && safeProfile.data.profileImg ? safeProfile.data.profileImg : DefaultPhoto;
|
|
|
|
const onPress = () => {
|
|
return navigation.navigate('Profile', { profileid: safeProfile._id })
|
|
}
|
|
|
|
return (
|
|
<Card style={twoCols ? styles.contentCols : styles.content}>
|
|
<Card.Content>
|
|
<Title onPress={onPress} numberOfLines={2}>
|
|
<Text style={{ paddingTop: 10 }}>
|
|
{!hideIcon ? <Icon name={icon} size={18} /> : <></>}
|
|
</Text>
|
|
<Text>
|
|
{safeProfileInfo.firstName} {safeProfileInfo.lastName}
|
|
</Text>
|
|
</Title>
|
|
<Paragraph numberOfLines={2}>
|
|
{safeProfileObjInfo.description ? safeProfileObjInfo.description : "We are working on this course description, soon to come!"}
|
|
</Paragraph>
|
|
{safeProfile.data ?
|
|
<View style={{flexDirection: "row", marginTop:5}}>
|
|
<Avatar.Image size={64} source={{ uri: photoUrl }} />
|
|
<View>
|
|
<Text>By: {safeProfile.data.author ? safeProfile.data.author : 'Working on this'}</Text>
|
|
<Text>
|
|
<Icon name="date-range" />
|
|
{safeProfile.data.year ? safeProfile.data.year : 'XXXX'}
|
|
</Text>
|
|
<Text>
|
|
<Icon name="timer" />
|
|
{safeProfile.data.duration ? safeProfile.data.duration : '??'}
|
|
</Text>
|
|
<Text>
|
|
<Icon name="language" />
|
|
{safeProfile.data.language}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
: <></>
|
|
}
|
|
</Card.Content>
|
|
</Card>
|
|
|
|
);
|
|
}
|
|
|
|
export default React.memo(CourseCard);
|
|
|
|
const styles = StyleSheet.create({
|
|
content: {
|
|
margin: 4,
|
|
width: 250,
|
|
},
|
|
contentCols: {
|
|
margin: 4,
|
|
width: "48%",
|
|
},
|
|
centerItems: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}
|
|
});
|