Add profile, group, and Courses cards

2022-03-19 09:28:02 -07:00
parent e5554c2f8e
commit 76ec6331f5
9 changed files with 401 additions and 43 deletions
--- a/components/CourseCard.js
+++ b/components/CourseCard.js
@@ -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',
+    }
+});