Orders Screen not updating properly

[elizabethrakhibaby]

Currently confirm order screen navigates to orders screen. However, when navigated to orders screen, the orders do not initially show the JUST PLACED order. Only after switching to another screen and switchingback to orders screen, is the orders in orders screen updated. This is a bug. The orders need to be updated the first time when user is navigated from confirm order screen to orders screen.

[elizabethrakhibaby]

Evidence of bug: https://github.com/elizabethrakhibaby/DabaoBuddy/assets/133880422/07a66ee4-5d86-4db5-ac3b-c5f9a996dc08

[elizabethrakhibaby]

The issue was successfully resolved by adding a delay before calling the fetchOrderData() function. This delay is achieved using setTimeout with a timeout value of 100 milliseconds.

By introducing this delay, some time is allowed for the navigation transition(from ConfirmOrderScreen to OrdersScreen) to complete before fetching the order data. This can help ensure that the orders are updated and visible on the OrdersScreen when it is first navigated to, from the ConfirmOrderScreen.

The reason the old OrdersScreen might not have worked as expected could be because the fetchOrderData() function was called immediately when the component mounted or whenever the isFocused variable changed. This could result in the data not being updated in time for the initial rendering of the OrdersScreen.

By adding the delay, time is given for the navigation transition to complete, allowing the orders to be updated and fetched before rendering the screen. This delay can prevent the bug, where the orders were not initially showing up until switching to another screen and then back to the OrdersScreen.

Overall, the introduction of the delay resolved the issue by ensuring that the order data is fetched and updated before rendering the OrdersScreen.

[elizabethrakhibaby]

`import React, {useState, useEffect} from "react"; import { Text, StyleSheet, View, Button} from "react-native"; import { useIsFocused } from '@react-navigation/native';

const MessengerScreen = function() { const [val, setVal] = useState(10); const isFocused = useIsFocused();`

useEffect(() => { let isUnmounted = false; let timeoutId;

if (isFocused && !isUnmounted) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    makeTheChange();
  }, 100); // Delay to avoid rapid calls

  return () => {
    clearTimeout(timeoutId);
    isUnmounted = true;
  };
}

}, [isFocused]);

const makeTheChange = () => { setVal(val + 1); };

return (

This is the Messenger Screen The value is {val}

); };

const styles = StyleSheet.create({ textStyle: { fontSize: 30, }, });

export default MessengerScreen; `

Let's go through the code and understand how useEffect, isUnmounted, timeoutId, and isFocused work together in the MessengerScreen component.

The useEffect hook is used to handle side effects in functional components. In this code, it is used to perform an action when the screen is focused. It takes a callback function as its first argument and an array of dependencies as the second argument. The callback function is executed whenever any of the dependencies change.

The isUnmounted variable is a flag that keeps track of whether the component is unmounted or not. It is initially set to false.

The timeoutId variable is used to store the ID of the timeout created by setTimeout. It will be used to clear the timeout if the component is unmounted before the timeout is triggered.

The isFocused variable is obtained using the useIsFocused hook from the @react-navigation/native package. It returns a boolean value indicating whether the screen is currently focused or not.

Inside the useEffect hook, there is a conditional block that checks if the screen is focused (isFocused) and if the component is not unmounted (!isUnmounted).

If the conditions are met, a setTimeout function is called with a delay of 100 milliseconds. This delay is added to avoid rapid calls.

Inside the setTimeout callback function, the makeTheChange function is called, which updates the state variable val by incrementing it by 1 using setVal(val + 1).

The return statement in the useEffect hook is used to define the cleanup function. In this case, it clears the timeout by calling clearTimeout(timeoutId) and sets isUnmounted to true. This ensures that the cleanup function is executed if the component is unmounted before the timeout is triggered.

In the JSX code, there is a View component that contains two Text components. The first Text component displays the message "This is the Messenger Screen," and the second Text component displays the value of the val state variable.

To summarize, the code sets up a timeout that increments the value of val by 1 when the MessengerScreen component is focused. It avoids calling makeTheChange rapidly by adding a delay and clears the timeout and sets the isUnmounted flag to true if the component is unmounted before the timeout is triggered.