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

Last update to useEffect methods

Browse Source
This commit is contained in:
Adolfo Reyna
2022-11-21 17:25:44 -05:00
parent 7586a20447
commit 5cf38ae6d3
6 changed files with 88 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Views/Courses.js
View File

@@ -43,9 +43,9 @@ const getCourses = async (profileObj) => {
}); });
}); });
return { return {
courses: courses.slice(0,10), courses: courses.slice(0, 10),
popular: popular.slice(0,10), popular: popular.slice(0, 10),
watching: watchingArray.slice(0,10), watching: watchingArray.slice(0, 10),
} }
} }
@@ -57,7 +57,7 @@ const storeCoursesCache = async (value) => {
} }
} }
const getCoursesCache= async () => { const getCoursesCache = async () => {
try { try {
const value = await AsyncStorage.getItem('courses') const value = await AsyncStorage.getItem('courses')
if (value !== null) { if (value !== null) {
@@ -77,8 +77,10 @@ const Courses = () => {
const [watching, setWatching] = React.useState([]); const [watching, setWatching] = React.useState([]);
const [queryTimer, setQueryTimer] = React.useState(0); const [queryTimer, setQueryTimer] = React.useState(0);
useEffect(async () => { useEffect(() => {
await getCoursesCache().then((r)=>{ let subscribed = true;
const getData = async () => {
await getCoursesCache().then((r) => {
console.log("Courses Cache"); console.log("Courses Cache");
setGroups(r.courses || []); setGroups(r.courses || []);
setPopular(r.popular || []); setPopular(r.popular || []);
@@ -86,10 +88,17 @@ const Courses = () => {
}); });
let r = await getCourses(viewer); let r = await getCourses(viewer);
console.log("Courses Live"); console.log("Courses Live");
if(subscribed){
setGroups(r.courses || []); setGroups(r.courses || []);
setPopular(r.popular || []); setPopular(r.popular || []);
setWatching(r.watching || []); setWatching(r.watching || []);
}
storeCoursesCache(r); storeCoursesCache(r);
};
getData();
return () => {
subscribed = false;
}
}, []) }, [])
const onChangeSearch = query => { const onChangeSearch = query => {

13
Views/Groups.js
View File

@@ -1,10 +1,8 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Searchbar } from 'react-native-paper'; import { Searchbar } from 'react-native-paper';
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native'; import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from "../API"; import API from "../API";
import UserName from "../components/UserName";
import GroupCard from "../components/GroupCard"; import GroupCard from "../components/GroupCard";
import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
const Groups = () => { const Groups = () => {
const [searchQuery, setSearchQuery] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState('');
@@ -12,9 +10,14 @@ const Groups = () => {
const [queryTimer, setQueryTimer] = React.useState(0); const [queryTimer, setQueryTimer] = React.useState(0);
useEffect(() => { useEffect(() => {
let subscribed = true;
API.getRecentGroups('').then((data) => { API.getRecentGroups('').then((data) => {
if (subscribed)
setGroups(data.groups || []); setGroups(data.groups || []);
}); });
return () => {
subscribed = false;
}
}, []) }, [])
@@ -39,7 +42,7 @@ const Groups = () => {
return (<GroupCard profileObj={item} />); return (<GroupCard profileObj={item} />);
}); });
return ( return (
<SafeAreaView style={{flex: 1}}> <SafeAreaView style={{ flex: 1 }}>
<Searchbar <Searchbar
placeholder="Search Groups" placeholder="Search Groups"
onChangeText={onChangeSearch} onChangeText={onChangeSearch}
@@ -48,7 +51,7 @@ const Groups = () => {
<FlatList <FlatList
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
numColumns={2} numColumns={2}
columnWrapperStyle={{justifyContent: "space-evenly"}} columnWrapperStyle={{ justifyContent: "space-evenly" }}
data={groups} data={groups}
renderItem={renderProfile} renderItem={renderProfile}
keyExtractor={item => item._id} keyExtractor={item => item._id}

9
Views/Search.js
View File

@@ -12,9 +12,14 @@ const Search = () => {
const [queryTimer, setQueryTimer] = React.useState(0); const [queryTimer, setQueryTimer] = React.useState(0);
useEffect(() => { useEffect(() => {
let subscribed = true;
API.searchProfiles('').then((data) => { API.searchProfiles('').then((data) => {
if (subscribed)
setProfiles(data.profiles || []); setProfiles(data.profiles || []);
}); });
return () => {
subscribed = false;
}
}, []) }, [])
const onChangeSearch = query => { const onChangeSearch = query => {
@@ -31,7 +36,7 @@ const Search = () => {
return (<ProfileCard profileObj={item} />); return (<ProfileCard profileObj={item} />);
}); });
return ( return (
<SafeAreaView style={{flex:1}}> <SafeAreaView style={{ flex: 1 }}>
<Searchbar <Searchbar
placeholder="Search Users" placeholder="Search Users"
onChangeText={onChangeSearch} onChangeText={onChangeSearch}
@@ -41,7 +46,7 @@ const Search = () => {
<FlatList <FlatList
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
numColumns={2} numColumns={2}
columnWrapperStyle={{justifyContent: "space-evenly"}} columnWrapperStyle={{ justifyContent: "space-evenly" }}
data={profiles} data={profiles}
renderItem={renderProfile} renderItem={renderProfile}
keyExtractor={item => item._id} keyExtractor={item => item._id}

13
components/CourseCard.js
View File

@@ -31,13 +31,20 @@ let CourseCard = ({ profileid, hideIcon, profileObj }) => {
let [profile, setProfile] = useState(profileObj || {}); let [profile, setProfile] = useState(profileObj || {});
const navigation = useNavigation(); const navigation = useNavigation();
useEffect(async () => { useEffect(() => {
let subscribed = true;
const getData = async () => {
if (profileObj._id) return 0; if (profileObj._id) return 0;
let cacheProfile = await getName(profileid); let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile); if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} }); let p = await API.getUserProfile(profileid).catch(() => { return {} });
setProfile(p); if(subscribed) setProfile(p);
storeName(profileid, p) storeName(profileid, p);
}
getData();
return () => {
subscribed = false;
}
}, [profileid]); }, [profileid]);
let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';

13
components/GroupCard.js
View File

@@ -32,13 +32,20 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
let [profile, setProfile] = useState(profileObj || {}); let [profile, setProfile] = useState(profileObj || {});
const navigation = useNavigation(); const navigation = useNavigation();
useEffect(async () => { useEffect(() => {
let subscribed = true;
const getData = async () => {
if (profileObj._id) return 0; if (profileObj._id) return 0;
let cacheProfile = await getName(profileid); let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile); if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} }); let p = await API.getUserProfile(profileid).catch(() => { return {} });
setProfile(p); if (subscribed) setProfile(p);
storeName(profileid, p) storeName(profileid, p);
};
getData();
return () => {
subscribed = false;
}
}, [profileid]); }, [profileid]);
let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';

15
components/ProfileCard.js
View File

@@ -32,13 +32,20 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
let [profile, setProfile] = useState(profileObj || {}); let [profile, setProfile] = useState(profileObj || {});
const navigation = useNavigation(); const navigation = useNavigation();
useEffect(async () => { useEffect(() => {
let subscribed = true;
const getData = async () => {
if (profileObj._id) return 0; if (profileObj._id) return 0;
let cacheProfile = await getName(profileid); let cacheProfile = await getName(profileid);
if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile); if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile);
let p = await API.getUserProfile(profileid).catch(() => { return {} }); let p = await API.getUserProfile(profileid).catch(() => { return {} });
setProfile(p); if (subscribed) setProfile(p);
storeName(profileid, p) storeName(profileid, p)
};
getData();
return () => {
subscribed = false;
}
}, [profileid]); }, [profileid]);
let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';
@@ -74,7 +81,7 @@ const styles = StyleSheet.create({
margin: 4, margin: 4,
width: "50%", width: "50%",
}, },
centerItems:{ centerItems: {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
} }