Issues with Previous Page losing State

Ionic Framework Ionic React
1

So, I’m working on an application that displays a list of online orders and allows the user to click a button to navigate to a new page to display the details of the order. The orders are stored in a list imported from a React Hook and there are a few other pieces of State that manage Filters. The issue that I’m having is that, when I navigate to the details page and press the back button, the state of the previous page (the order’s list page) has been discarded.

According to the React Navigation docs:

the IonRouterOutlet provides the appropriate platform page transition and keeps the state of the previous page intact so that when a user navigates back to the list page, it appears in the same state as when it left.

However, this doesn’t seem to be the case in my situation. Very rarely, the state will be properly maintained while I’m running the application through my web browser but it never works correctly in Android (which is where this application will be ran from).

Below is all the code that I believe to be relevant to the problem:

OrdersPage.tsx

const OrdersPage: React.FC = () => {
    const name = "Orders";

    const {orders, apiErrorMessage, getOrders, updateOrder} = useWooCommerceOrdersApi();

    const [orderId, setOrderId] = useState<number | null>(DEFAULT_ORDER_ID)
    const [date, setDate] = useState<string | null>(DEFAULT_DATE)
    const [viewActiveOrders, setViewActiveOrders] = useState<boolean>(DEFAULT_VIEW_ACTIVE_ORDERS);

    useIonViewDidEnter(() => {
        let currentFilters: filters = {id: orderId, date: date, activeOrders: viewActiveOrders}
        getOrders(currentFilters);
    })

    function loadData(event: any) {
        let currentFilters: filters = {id: orderId, date: date, activeOrders: viewActiveOrders}
        getOrders(currentFilters);
        (event.target as HTMLIonInfiniteScrollElement).complete().then();
    }

    function refreshData() {
        setOrderId(DEFAULT_ORDER_ID);
        setDate(DEFAULT_DATE);
        setViewActiveOrders(DEFAULT_VIEW_ACTIVE_ORDERS)
        let currentFilters: filters = {
            id: DEFAULT_ORDER_ID,
            date: DEFAULT_DATE,
            activeOrders: DEFAULT_VIEW_ACTIVE_ORDERS,
        }
        getOrders(currentFilters, true);
    }

    function refreshDataPulldown(event: CustomEvent<RefresherEventDetail>) {
        refreshData();
        event.detail.complete();
    }

    function refreshDataButton() {
        refreshData();
    }

    function loadFilteredData() {
        let currentFilters: filters = {id: orderId, date: date, activeOrders: viewActiveOrders}
        getOrders(currentFilters, true)
    }

    // @ts-ignore
    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonButtons slot="start">
                        <IonMenuButton/>
                    </IonButtons>
                    <IonTitle>{name}</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">{name}</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <IonButton onClick={(e) => refreshDataButton()} className={"refresh-button"}>
                    Refresh
                </IonButton>
                <FilterOptions
                    orderId={orderId}
                    setOrderId={setOrderId}
                    setDate={setDate}
                    viewActiveOrders={viewActiveOrders}
                    setViewActiveOrders={setViewActiveOrders}
                    applyFilters={loadFilteredData}/>
                <div>
                    {
                        apiErrorMessage !== "" &&
                        <p className={"page-message page-error-message"}>
                            {apiErrorMessage}
                        </p>
                    }
                    {
                        apiErrorMessage === "" && orders.length === 0 &&
                            <p className={"page-message"}>
                                You currently have no active orders!
                            </p>
                    }
                </div>
                <IonList>
                    {orders.map((order, index) => (
                        <OrderCard
                            id={order.id}
                            name={order.name}
                            status={order.status}
                            updateOrder={updateOrder}
                        />
                    ))}
                </IonList>
                <IonInfiniteScroll
                    threshold="50%"
                    onIonInfinite={(e: CustomEvent<void>) => loadData(e)}>
                    <IonInfiniteScrollContent
                        loadingText={"Fetching Orders..."}>
                    </IonInfiniteScrollContent>
                </IonInfiniteScroll>
                <IonRefresher slot="fixed" onIonRefresh={refreshDataPulldown}>
                    <IonRefresherContent/>
                </IonRefresher>
            </IonContent>
        </IonPage>
    );
};

export default OrdersPage;

OrderCard.tsx Navigation Button

<IonButton routerLink={"/order-details/" + props.id}>Details</IonButton>

App.tsx RouterOutlet

<IonRouterOutlet id="main">
    <Route path="/" exact={true}>
        <Redirect to="/orders-page"/>
    </Route>
    <Route path="/page/:name" exact={true}>
        <Page/>
    </Route>
    <Route path="/orders-page" exact={true}>
        <OrdersPage/>
    </Route>
    <Route path={"/order-details/:id"} exact={true}>
        <OrderDetailsPage/>
    </Route>
</IonRouterOutlet>