React Native Navigation Listener. How to stop page refresh when coming back from certain pages

Viewed 209

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>
    )
}
0 Answers
Related