I have logic that makes my home page refresh every time the component is mounted. I do want it to refresh every time I go from the home screen to the profile screen of my app for example, but I do not want it to reload when I open the search modal page and just dismiss it.. or click on an item in the home page and dismiss it.. its a bit excessive. My question is how would I be able to do this in an elegant way where I can pick and choose when I want the page to reload based on which page I'm going back from.
const HomeScreen = (props) => {
let TouchableCmp = TouchableOpacity
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback
}
const [isLoading, setIsLoading] = useState(false)
const [httpError, setHttpError] = useState(false)
const homeTickets = useSelector((state) => state.tickets.homeTickets)
const dispatch = useDispatch()
const loadTickets = useCallback(async () => {
setHttpError(false)
setIsLoading(true)
try {
await dispatch(setTickets())
setIsLoading(false)
} catch (err) {
setHttpError(err.message)
setIsLoading(false)
}
}, [dispatch])
useEffect(() => {
const willFocusListener = props.navigation.addListener(
'willFocus',
loadTickets
)
return () => {
willFocusListener.remove()
}
}, [loadTickets])
useEffect(() => {
setIsLoading(true)
loadTickets().then(() => {
setIsLoading(false)
})
}, [dispatch, loadTickets])
if (isLoading)
return (
<View style={styles.center}>
<LottieView
source={require('../assets/srSPININGcompatibility.json')}
style={{ height: 60, width: 60 }}
autoPlay
loop
></LottieView>
</View>
)
if (httpError)
return (
<View style={styles.center}>
<Text style={styles.errorStyle}>{`${httpError}`}</Text>
<View style={styles.refreshCont}>
<TouchableCmp onPress={loadTickets} activeOpacity={0.5}>
<Text
style={{
fontSize: 17,
color: 'white',
fontWeight: 'bold',
}}
>
Refresh
</Text>
</TouchableCmp>
</View>
</View>
)
return (
<View style={styles.screen}>
<View style={styles.screen}>
<FlatList
showsVerticalScrollIndicator={false}
onRefresh={loadTickets}
refreshing={isLoading}
style={styles.flatList}
data={homeTickets}
keyExtractor={(item) => item.ticketID}
renderItem={(itemData) => (
<TicketCell
companyName={itemData.item.company}
requestor={itemData.item.requestedBy}
dateStamp={itemData.item.workLogDate}
issue={itemData.item.issue}
companyPhone={itemData.item.businessPhone}
navigation={props.navigation}
ticketID={itemData.item.ticketID}
goToDetails={() => {
props.navigation.navigate({
routeName: 'HomeDetail',
params: { id: itemData.item.ticketID },
})
}}
/>
)}
/>
</View>
</View>
)
}