code-forge-io / code-forge-io/remix-toast

[replaceWithToast] is required

Open
#41 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
262
Forks
16
PR merge metrics
No merged PRs in 30d

Description

`redirectWithToast` uses `history.pushState`, which causes the redirected URL to be added to the browser history. However, in some cases, we need to use `history.replaceState` instead while redirecting.

Example use case:
Let's say we have a products page at `/products`. We open the `/products/new` URL to add a new product. When the product is successfully created, we redirect to `/products/{product_id}`. However, in this case, pressing the back button on the product page brings the user back to `/products/new`, which is not desirable. Or think of I deleted `/products/{product_id}` and redirected to `/products`, now back navigation will bring me to a non-existing product.

If we try to solve this by returning jsonWithToast and then navigating manually using `navigate('...', { replace: true })`, we encounter duplicated toasts because the page navigates to the new URL very shortly after the toast cookie is flashed.

Proposal:
I would like to propose creating a `replaceWithToast` utility, which works exactly the same as `redirectWithToast`, but uses [replace](https://remix.run/docs/en/main/utils/replace) instead of [redirect](https://remix.run/docs/en/main/utils/redirect).

Note: I still use remix-toast@1.2.0 because some of our dependencies doesn't allow my switch to react-router@7. So I would be appreciated if you could also implement this feature for remix-toast@1.2.0 which is still the latest stable version for "remix" users.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the redirectWithToast utility and compare its behavior with the Remix replace utility referenced in the issue. Verify the new replaceWithToast behavior for both the current Remix users and the newer React Router version, including toast delivery without duplication; the payload does not name specific files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
backend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.