Gracefully handle backend failures in Expo app

This commit is contained in:
Adolfo Reyna
2026-02-20 19:25:38 -05:00
parent fe9fc8e3e4
commit 009f1ec792
14 changed files with 205 additions and 97 deletions

View File

@@ -29,12 +29,16 @@ const getName = async (key) => {
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 (profileObj._id) return 0;
if (safeProfileObj._id) return 0;
let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} });
@@ -47,13 +51,13 @@ let CourseCard = ({ profileid, hideIcon, profileObj, twoCols }) => {
}
}, [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;
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: profile._id })
return navigation.navigate('Profile', { profileid: safeProfile._id })
}
return (
@@ -64,28 +68,28 @@ let CourseCard = ({ profileid, hideIcon, profileObj, twoCols }) => {
{!hideIcon ? <Icon name={icon} size={18} /> : <></>}
</Text>
<Text>
{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
{safeProfileInfo.firstName} {safeProfileInfo.lastName}
</Text>
</Title>
<Paragraph numberOfLines={2}>
{profileObj.profile.description ? profileObj.profile.description : "We are working on this course description, soon to come!"}
{safeProfileObjInfo.description ? safeProfileObjInfo.description : "We are working on this course description, soon to come!"}
</Paragraph>
{profile.data ?
{safeProfile.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>By: {safeProfile.data.author ? safeProfile.data.author : 'Working on this'}</Text>
<Text>
<Icon name="date-range" />
{profile.data.year ? profile.data.year : 'XXXX'}
{safeProfile.data.year ? safeProfile.data.year : 'XXXX'}
</Text>
<Text>
<Icon name="timer" />
{profile.data.duration ? profile.data.duration : '??'}
{safeProfile.data.duration ? safeProfile.data.duration : '??'}
</Text>
<Text>
<Icon name="language" />
{profile.data.language}
{safeProfile.data.language}
</Text>
</View>
</View>

View File

@@ -31,12 +31,16 @@ const getName = async (key) => {
let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
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 (profileObj._id) return 0;
if (safeProfileObj._id) return 0;
let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} });
@@ -49,14 +53,14 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
}
}, [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;
icon = icon === "group" && profile.isPrivate ? "screen-lock-portrait" : icon;
let photoUrl = profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
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;
icon = icon === "group" && safeProfile.isPrivate ? "screen-lock-portrait" : icon;
let photoUrl = safeProfileInfo.photo ? 'https://social.emmint.com/' + safeProfileInfo.photo : DefaultPhoto;
const onPress = () => {
return navigation.navigate('Profile', { profileid: profile._id })
return navigation.navigate('Profile', { profileid: safeProfile._id })
}
return (
@@ -70,7 +74,7 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
<List.Item
title={<ProfilePhotoCircle profileid={profile._id} />}
description={profileObj.profile.description}
description={safeProfileObjInfo.description || ""}
//left={props => <List.Icon {...props} icon={icon} />}
titleStyle={{fontWeight:"bold", fontSize:20}}
descriptionStyle={{}}

View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { Text, Pressable, FlatList, StyleSheet, View, Share, Alert, Linking } from 'react-native';
import Hyperlink from 'react-native-hyperlink'
import { Button, Card, Chip } from 'react-native-paper';
import API from './../API.js';
import UserName from './UserName.js';

View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { Text, ScrollView, FlatList, StyleSheet, View, Share } from 'react-native';
import Hyperlink from 'react-native-hyperlink'
import { Button, Card, Chip } from 'react-native-paper';
import API from '../API.js';
import UserName from './UserName.js';
@@ -44,17 +43,15 @@ let Post = (props) => {
margin: 0,
marginBottom: 0
}}>
<Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
<View>
<Text style={{ fontSize: 18 }}>{cleanContent}</Text>
<Media content={post.content} />
<FlatList data={userIds}
horizontal={true}
renderItem={renderPost}
//keyExtractor={item => item}
/>
</View>
</Hyperlink>
<View>
<Text style={{ fontSize: 18 }}>{cleanContent}</Text>
<Media content={post.content} />
<FlatList data={userIds}
horizontal={true}
renderItem={renderPost}
//keyExtractor={item => item}
/>
</View>
</Card.Content>
</Card>
);

View File

@@ -30,12 +30,16 @@ const getName = async (key) => {
let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
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 (profileObj._id) return 0;
if (safeProfileObj._id) return 0;
let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} });
@@ -48,13 +52,13 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
}
}, [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;
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 = safeProfileInfo.photo ? 'https://social.emmint.com/' + safeProfileInfo.photo : DefaultPhoto;
const onPress = () => {
return navigation.navigate('Profile', { profileid: profile._id })
return navigation.navigate('Profile', { profileid: safeProfile._id })
}
return (
@@ -63,11 +67,11 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
<Avatar.Image size={150} source={{ uri: photoUrl }} />
<Title onPress={onPress} numberOfLines={1}>
<Text>
{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
{safeProfileInfo.firstName} {safeProfileInfo.lastName}
</Text>
</Title>
<Paragraph numberOfLines={2}>{profileObj.profile.description}</Paragraph>
<FollowButton profile={profile} />
<Paragraph numberOfLines={2}>{safeProfileObjInfo.description || ""}</Paragraph>
<FollowButton profile={safeProfile} />
</Card.Content>
</Card>

View File

@@ -7,7 +7,9 @@ import FollowButton from './basics/FollowButton';
const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
const ProfileHeader = ({ profileObj }) => {
let photoUrl = profileObj.profile && profileObj.profile.photo ? 'https://social.emmint.com/' + profileObj.profile.photo + '?width=1000&height=1000' : DefaultPhoto;
const safeProfileObj = profileObj || {};
const safeProfile = safeProfileObj.profile || {};
let photoUrl = safeProfile.photo ? 'https://social.emmint.com/' + safeProfile.photo + '?width=1000&height=1000' : DefaultPhoto;
return (
<>
<Card elevation={3}>
@@ -16,9 +18,9 @@ const ProfileHeader = ({ profileObj }) => {
}} />
<Card.Content style={{}}>
<Title style={{ position: "absolute", top: -60, left: 10, backgroundColor: "rgba(255,255,255,0.4)", padding: 10 }}>
<UserName profileid={profileObj._id} />
<UserName profileid={safeProfileObj._id} />
</Title>
<Paragraph style={{ paddingTop: 10 }}>{profileObj.profile.description}</Paragraph>
<Paragraph style={{ paddingTop: 10 }}>{safeProfile.description || ""}</Paragraph>
<View style={{
position: "absolute",
top: -290,
@@ -29,7 +31,7 @@ const ProfileHeader = ({ profileObj }) => {
borderRadius: 25,
opacity: 0.7
}}>
<FollowButton profile={profileObj} />
<FollowButton profile={safeProfileObj} />
</View>
<View style={{
position: "absolute",
@@ -43,8 +45,8 @@ const ProfileHeader = ({ profileObj }) => {
}}>
<Button icon="ios-share" labelStyle={{ fontSize: 24, paddingTop:10 }} onPress={() => {
Share.share({
message: "https://social.emmint.com/feed/" + profileObj._id,
title: profileObj.profile.firstName + " " + profileObj.profile.lastName
message: "https://social.emmint.com/feed/" + safeProfileObj._id,
title: (safeProfile.firstName || "") + " " + (safeProfile.lastName || "")
});
}}></Button>
</View>
@@ -63,4 +65,4 @@ const ProfileHeader = ({ profileObj }) => {
}
export default React.memo(ProfileHeader);
export default React.memo(ProfileHeader);

View File

@@ -6,12 +6,14 @@ import UserName from './UserName';
const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
const ProfileSmallHeader = ({ profileObj }) => {
let photoUrl = profileObj.profile.photo ? 'https://social.emmint.com/' + profileObj.profile.photo : DefaultPhoto;
const safeProfileObj = profileObj || {};
const safeProfile = safeProfileObj.profile || {};
let photoUrl = safeProfile.photo ? 'https://social.emmint.com/' + safeProfile.photo : DefaultPhoto;
return (
<>
<Card.Title
title={<UserName profileid={profileObj._id} hideIcon={true} />}
subtitle={profileObj.profile.description}
title={<UserName profileid={safeProfileObj._id} hideIcon={true} />}
subtitle={safeProfile.description || ""}
left={(props) => <Avatar.Image {...props} source={{ uri: photoUrl}} />}
right={(props) => <IconButton {...props} icon="more-vert" onPress={() => { }} />}
/>
@@ -20,4 +22,4 @@ const ProfileSmallHeader = ({ profileObj }) => {
}
export default React.memo(ProfileSmallHeader);
export default React.memo(ProfileSmallHeader);