From 5cf38ae6d392786dc3e562efcfddc728a4e7e30d Mon Sep 17 00:00:00 2001 From: Adolfo Reyna Date: Mon, 21 Nov 2022 17:25:44 -0500 Subject: [PATCH] Last update to useEffect methods --- Views/Courses.js | 43 +++++++++++++++++++++++---------------- Views/Groups.js | 15 ++++++++------ Views/Search.js | 11 +++++++--- components/CourseCard.js | 21 ++++++++++++------- components/GroupCard.js | 23 +++++++++++++-------- components/ProfileCard.js | 25 +++++++++++++++-------- 6 files changed, 88 insertions(+), 50 deletions(-) diff --git a/Views/Courses.js b/Views/Courses.js index 41169ce..ed29b58 100644 --- a/Views/Courses.js +++ b/Views/Courses.js @@ -43,9 +43,9 @@ const getCourses = async (profileObj) => { }); }); return { - courses: courses.slice(0,10), - popular: popular.slice(0,10), - watching: watchingArray.slice(0,10), + courses: courses.slice(0, 10), + popular: popular.slice(0, 10), + watching: watchingArray.slice(0, 10), } } @@ -57,7 +57,7 @@ const storeCoursesCache = async (value) => { } } -const getCoursesCache= async () => { +const getCoursesCache = async () => { try { const value = await AsyncStorage.getItem('courses') if (value !== null) { @@ -77,19 +77,28 @@ const Courses = () => { const [watching, setWatching] = React.useState([]); const [queryTimer, setQueryTimer] = React.useState(0); - useEffect(async () => { - await getCoursesCache().then((r)=>{ - console.log("Courses Cache"); - setGroups(r.courses || []); - setPopular(r.popular || []); - setWatching(r.watching || []); - }); - let r = await getCourses(viewer); - console.log("Courses Live"); - setGroups(r.courses || []); - setPopular(r.popular || []); - setWatching(r.watching || []); - storeCoursesCache(r); + useEffect(() => { + let subscribed = true; + const getData = async () => { + await getCoursesCache().then((r) => { + console.log("Courses Cache"); + setGroups(r.courses || []); + setPopular(r.popular || []); + setWatching(r.watching || []); + }); + let r = await getCourses(viewer); + console.log("Courses Live"); + if(subscribed){ + setGroups(r.courses || []); + setPopular(r.popular || []); + setWatching(r.watching || []); + } + storeCoursesCache(r); + }; + getData(); + return () => { + subscribed = false; + } }, []) const onChangeSearch = query => { diff --git a/Views/Groups.js b/Views/Groups.js index 1542ba8..cea077a 100644 --- a/Views/Groups.js +++ b/Views/Groups.js @@ -1,10 +1,8 @@ import React, { useEffect } from "react"; 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 UserName from "../components/UserName"; import GroupCard from "../components/GroupCard"; -import ProfileSmallHeader from '../components/ProfileSmallHeader.js' const Groups = () => { const [searchQuery, setSearchQuery] = React.useState(''); @@ -12,9 +10,14 @@ const Groups = () => { const [queryTimer, setQueryTimer] = React.useState(0); useEffect(() => { + let subscribed = true; API.getRecentGroups('').then((data) => { - setGroups(data.groups || []); + if (subscribed) + setGroups(data.groups || []); }); + return () => { + subscribed = false; + } }, []) @@ -39,7 +42,7 @@ const Groups = () => { return (); }); return ( - + { item._id} diff --git a/Views/Search.js b/Views/Search.js index 658d11a..f10d7fb 100644 --- a/Views/Search.js +++ b/Views/Search.js @@ -12,9 +12,14 @@ const Search = () => { const [queryTimer, setQueryTimer] = React.useState(0); useEffect(() => { + let subscribed = true; API.searchProfiles('').then((data) => { - setProfiles(data.profiles || []); + if (subscribed) + setProfiles(data.profiles || []); }); + return () => { + subscribed = false; + } }, []) const onChangeSearch = query => { @@ -31,7 +36,7 @@ const Search = () => { return (); }); return ( - + { item._id} diff --git a/components/CourseCard.js b/components/CourseCard.js index 57205e5..0a19f80 100644 --- a/components/CourseCard.js +++ b/components/CourseCard.js @@ -31,13 +31,20 @@ 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) + useEffect(() => { + let subscribed = true; + const getData = 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 {} }); + if(subscribed) setProfile(p); + storeName(profileid, p); + } + getData(); + return () => { + subscribed = false; + } }, [profileid]); let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; diff --git a/components/GroupCard.js b/components/GroupCard.js index cc1a3d8..f331cf9 100644 --- a/components/GroupCard.js +++ b/components/GroupCard.js @@ -32,13 +32,20 @@ let ProfileCard = ({ 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) + useEffect(() => { + let subscribed = true; + const getData = 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 {} }); + if (subscribed) setProfile(p); + storeName(profileid, p); + }; + getData(); + return () => { + subscribed = false; + } }, [profileid]); let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; @@ -65,7 +72,7 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => { - {Object.keys(profile.subscribed).length} + {Object.keys(profile.subscribed).length} diff --git a/components/ProfileCard.js b/components/ProfileCard.js index 9cf1e94..1181d42 100644 --- a/components/ProfileCard.js +++ b/components/ProfileCard.js @@ -32,13 +32,20 @@ let ProfileCard = ({ 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) + useEffect(() => { + let subscribed = true; + const getData = async () => { + if (profileObj._id) return 0; + let cacheProfile = await getName(profileid); + if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile); + let p = await API.getUserProfile(profileid).catch(() => { return {} }); + if (subscribed) setProfile(p); + storeName(profileid, p) + }; + getData(); + return () => { + subscribed = false; + } }, [profileid]); let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : ''; @@ -53,7 +60,7 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => { return ( - + <Text> {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName} @@ -74,7 +81,7 @@ const styles = StyleSheet.create({ margin: 4, width: "50%", }, - centerItems:{ + centerItems: { justifyContent: 'center', alignItems: 'center', }