Improve feed/profile cache logs and add Expo app agent notes
This commit is contained in:
Adolfo Reyna
@@ -10,6 +10,11 @@ import * as Updates from 'expo-updates';
|
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
const FEED_LOG_PREFIX = '[Feed]';
|
||||
const logFeed = (...args) => {
|
||||
if (__DEV__) console.log(FEED_LOG_PREFIX, ...args);
|
||||
};
|
||||
|
||||
const storeFeed = async (value) => {
|
||||
try {
|
||||
const jsonValue = JSON.stringify(value)
|
||||
@@ -66,26 +71,38 @@ async function onFetchUpdateAsync() {
|
||||
let Feed = ({ navigation, route }) => {
|
||||
let [Posts, setPosts] = useState([]);
|
||||
const flatListRef = React.useRef()
|
||||
console.log("Render Feed");
|
||||
logFeed('render', {
|
||||
posts: Posts.length,
|
||||
hasRouteParams: !!route?.params,
|
||||
reRender: !!route?.params?.reRender,
|
||||
targetProfile: route?.params?.profileid || null,
|
||||
});
|
||||
const url = Linking.useURL();
|
||||
useEffect(() => {
|
||||
if (prevLink === url || !url) return;
|
||||
prevLink = url;
|
||||
logFeed('deep-link', url);
|
||||
handleURL(url, navigation);
|
||||
}, [url]);
|
||||
useEffect(() => {
|
||||
let subscribed = true;
|
||||
const getData = async () => {
|
||||
logFeed('load:start', {
|
||||
reRender: !!route?.params?.reRender,
|
||||
targetProfile: route?.params?.profileid || null,
|
||||
});
|
||||
// TODO: Check for internet connection
|
||||
const internet = true;
|
||||
if (internet) {
|
||||
//byPass and load
|
||||
let loggedIn = await API.isLoggedIn();
|
||||
logFeed('session:checked', { loggedIn });
|
||||
if (!loggedIn) return navigation.reset({
|
||||
index: 0,
|
||||
routes: [{ name: 'Login' }],
|
||||
});
|
||||
if (route.params && route.params.profileid) {
|
||||
logFeed('redirect:profile', { profileid: route.params.profileid });
|
||||
return navigation.navigate('Profile', { profileid: route.params.profileid });
|
||||
}
|
||||
}
|
||||
@@ -103,10 +120,9 @@ let Feed = ({ navigation, route }) => {
|
||||
posthog.capture('login');
|
||||
}
|
||||
});
|
||||
console.log("Feed from cache")
|
||||
let cacheFeed = await getFeed() || [];
|
||||
logFeed('cache:read', { count: cacheFeed.length });
|
||||
if (cacheFeed.length && subscribed) setPosts(cacheFeed);
|
||||
console.log("Feed from server")
|
||||
}
|
||||
await onFetchUpdateAsync();
|
||||
flatListRef.current?.scrollToOffset({ animated: true, offset: 0 })
|
||||
@@ -115,12 +131,14 @@ let Feed = ({ navigation, route }) => {
|
||||
const safePosts = Array.isArray(posts) ? posts : [];
|
||||
setPosts(safePosts);
|
||||
storeFeed(safePosts);
|
||||
logFeed('network:loaded', { count: safePosts.length, cached: true });
|
||||
}
|
||||
console.log("Feed, end useEffect")
|
||||
logFeed('load:end');
|
||||
}
|
||||
getData()
|
||||
return () => {
|
||||
subscribed = false;
|
||||
logFeed('load:cleanup');
|
||||
}
|
||||
}, [route.params]);
|
||||
const renderPost = (({ item }) => {
|
||||
@@ -143,7 +161,13 @@ let Feed = ({ navigation, route }) => {
|
||||
//ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
|
||||
refreshing={Posts.length === 0}
|
||||
onRefresh={() => {
|
||||
API.getPosts().then((data) => setPosts(Array.isArray(data) ? data : []));
|
||||
logFeed('refresh:start');
|
||||
API.getPosts().then((data) => {
|
||||
const safePosts = Array.isArray(data) ? data : [];
|
||||
setPosts(safePosts);
|
||||
storeFeed(safePosts);
|
||||
logFeed('refresh:end', { count: safePosts.length, cached: true });
|
||||
});
|
||||
}}
|
||||
initialNumToRender={3}
|
||||
maxToRenderPerBatch={3}
|
||||
|
||||
@@ -8,6 +8,11 @@ import NewPost from "./../components/NewPost.js";
|
||||
import ProfileHeader from '../components/ProfileHeader.js';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
const PROFILE_LOG_PREFIX = '[Profile]';
|
||||
const logProfile = (...args) => {
|
||||
if (__DEV__) console.log(PROFILE_LOG_PREFIX, ...args);
|
||||
};
|
||||
|
||||
const storeProfilePosts = async (profileid, value) => {
|
||||
try {
|
||||
const jsonValue = JSON.stringify(value)
|
||||
@@ -39,41 +44,74 @@ let Profile = ({ navigation, route }) => {
|
||||
useEffect(() => {
|
||||
let subscribed = true;
|
||||
const getData = async () => {
|
||||
logProfile('load:start', {
|
||||
profileid: route?.params?.profileid || null,
|
||||
tag,
|
||||
});
|
||||
setLoading(true);
|
||||
setPosts([]);
|
||||
if (route.params && route.params.profileid && tag == '') {
|
||||
console.log('Loading Cache Profile:' + route.params.profileid);
|
||||
logProfile('cache:read:start', { profileid: route.params.profileid });
|
||||
await API.getUserProfile(route.params.profileid).then((profileObj) => {
|
||||
if(!subscribed) return 0;
|
||||
const nextProfile = profileObj && profileObj._id ? profileObj : {};
|
||||
const profileData = nextProfile.profile || {};
|
||||
setProfile(nextProfile);
|
||||
navigation.setOptions({ title: (profileData.firstName || "") + " " + (profileData.lastName || "") });
|
||||
logProfile('profile:loaded', {
|
||||
profileid: nextProfile._id || route.params.profileid,
|
||||
hasName: !!(profileData.firstName || profileData.lastName),
|
||||
});
|
||||
});
|
||||
await getProfilePosts(route.params.profileid).then((cachedPosts) => {
|
||||
const safeCachedPosts = Array.isArray(cachedPosts) ? cachedPosts : [];
|
||||
setPosts(safeCachedPosts);
|
||||
logProfile('cache:read:end', {
|
||||
profileid: route.params.profileid,
|
||||
count: safeCachedPosts.length,
|
||||
});
|
||||
});
|
||||
await getProfilePosts(route.params.profileid).then(setPosts);
|
||||
console.log('Loaded Cache Profile:' + route.params.profileid);
|
||||
API.getPosts(route.params.profileid).then((data) => {
|
||||
setLoading(false);
|
||||
if(!subscribed) return 0;
|
||||
setPosts(Array.isArray(data) ? data : []);
|
||||
storeProfilePosts(route.params.profileid, data);
|
||||
console.log('Store Cache Profile:' + route.params.profileid);
|
||||
const safePosts = Array.isArray(data) ? data : [];
|
||||
setPosts(safePosts);
|
||||
storeProfilePosts(route.params.profileid, safePosts);
|
||||
setLoading(false);
|
||||
logProfile('network:loaded', {
|
||||
profileid: route.params.profileid,
|
||||
count: safePosts.length,
|
||||
cached: true,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
if(route.params && route.params.profileid){
|
||||
console.log('Getting posts with tag', tag)
|
||||
logProfile('tag:load:start', {
|
||||
profileid: route.params.profileid,
|
||||
tag,
|
||||
});
|
||||
API.getPostsWithTag(route.params.profileid, tag).then((data) => {
|
||||
if(!subscribed) return 0;
|
||||
setPosts(Array.isArray(data?.posts) ? data.posts : []);
|
||||
const safeTagPosts = Array.isArray(data?.posts) ? data.posts : [];
|
||||
setPosts(safeTagPosts);
|
||||
setLoading(false);
|
||||
logProfile('tag:load:end', {
|
||||
profileid: route.params.profileid,
|
||||
tag,
|
||||
count: safeTagPosts.length,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// if no profile information is pressent should load feed
|
||||
logProfile('redirect:feed');
|
||||
navigation.navigate('Feed')
|
||||
}
|
||||
}
|
||||
logProfile('load:end');
|
||||
}
|
||||
getData();
|
||||
return ()=>{
|
||||
subscribed = false;
|
||||
logProfile('load:cleanup');
|
||||
}
|
||||
}, [tag, route.params?.profileid]);
|
||||
|
||||
@@ -149,7 +187,22 @@ let Profile = ({ navigation, route }) => {
|
||||
maxToRenderPerBatch={3}
|
||||
removeClippedSubviews={true}
|
||||
onRefresh={() => {
|
||||
API.getPosts(route.params.profileid).then((data) => setPosts(Array.isArray(data) ? data : []));
|
||||
logProfile('refresh:start', {
|
||||
profileid: route?.params?.profileid || null,
|
||||
tag,
|
||||
});
|
||||
setLoading(true);
|
||||
API.getPosts(route.params.profileid).then((data) => {
|
||||
const safePosts = Array.isArray(data) ? data : [];
|
||||
setPosts(safePosts);
|
||||
storeProfilePosts(route.params.profileid, safePosts);
|
||||
setLoading(false);
|
||||
logProfile('refresh:end', {
|
||||
profileid: route.params.profileid,
|
||||
count: safePosts.length,
|
||||
cached: true,
|
||||
});
|
||||
});
|
||||
}}
|
||||
/> :
|
||||
<></> //TODO: Add empty profile card here
|
||||
|
||||
Reference in New Issue
Block a user