How to properly integrate stacked drawers with react-router

[owenallenaz]

The application I'm working on has the ability to open drawers. What we would like to have happen is that when a user uses the native browser back button that it closes one level of the drawer system. We've tried a bunch of different ways to accomplish this task, but nearly all of them end up mired in complexity in hacks.

With 1 drawer open:

With 2 drawers open:

Some things we've tried:

• Overwriting window.addEventListener that we pass to <BrowserRouter> in order to use our own event handler to intercept the popstate event that router router registers.
• Having each drawer open push a new state entry. This works except when the user does a hard refresh they are left with multiple dead state entries.

The challenge is that each new drawer often has callbacks associated with the previous drawer. Due to the serializable nature of the History.state we can't store the callbacks in the state itself. This means we can't just the callbacks to the state object. There doesn't appear to be a clean way to differentiate between an action that triggers back via the UI navigate(-1) which makes it difficult for us.

Any advice on tackling this problem?

[jeiemgi]

Hello @owenallenaz , Did you find a solution to this problem?

I have a similar use case, I have to dismiss a modal when the user press the browser back button, I've been trying with window.addEventListener("'popstate') but it's pretty inconsistent in my Remix app

[owenallenaz]

We did not. We tried a bunch of variants of hackery and until it's a first-class feature in react-router it felt like we were fighting the technology. Implementing with the trade-offs we experienced wasn't worth it for our app so we opted to keep it simple and hope that react-router makes this easier in the future. We had a variant that might have worked, when you initialize the react-router you can pass it a custom window object... if you overwrite the addEventListener method on your custom window object, it will result in their registration method calling your method, instead of the native one, giving you a loop hole to do some hackery. It's dirty, and that's why we opted not to keep it... but it worked.

[jeiemgi]

Thanks so much for the rply!

[sourcec0de]

We ran into the same issue while building a similar stacked drawer system.

Our solution was to track a navigation delta in the URL.

1. __delta_root the distance to the root where the dialog was originally opened
2. __delta_next the distance to the previous drawer, usually 1

In our loaders and actions, we used an extended URL class with a set of increment/decrement functions to track it.
Then we call navigate using the root delta if the user is canceling the action or next delta if they successfully completed an action and need to go back to the previous drawer.

The response from our actions return a navDelta.
We watch the result with a useEffect and if the fetcher.state is idle and the navDelta is greater than 0 we call navigate.

Definitely, more complicated than it feels like it should be, given this could likely be implemented more easily in the client using something like xstate or even a basic react context.

We wanted to use actions and loaders to keep our data flow consistent with the rest of our app.

class URLWithNavDelta extends URL {
  incRootDelta() // manipulates this.searchParams
  incNextDelta()
  getRootDelta()
  getNextDelta()
}

export async function loader({ request}) {
  const url = new URLWithNavDelta(request.url)
  return json({ 
    rootDelta: url.getRootDelta()
  })
}

export async function action({request}) {
  const url = new URLWithNavDelta(request.url)
  return json({
    navDelta: url.getNextDelta()
  })
}


function Route() {
  const navigate = useNavigate()
  const data = useLoaderData()
  const onCancel = () => navigate(-data.rootDelta)
  const fetcher = useFecter()
  const actionData = fetcher.data

  useEffect(() => {
     if (fetcher.state !== 'idle') return
     if (actionData?.navDelta > 0) navigate(-actionData?.navDelta)
  }, [actionData, fetcher, navigate])
}

To initialize this URL.

// initializes the url with a root / next as 1 if the URL doesn't contain these values
<Link to={new URLWithNavDelta('path-to-open-drawer').toString()} />