fix removing toast correctly

src/App.tsx

@@ -30,7 +30,16 @@ const client = new QueryClient({
  }
  }),
 });
-
+const withDismiss = () => {
+ toast((t) => (
+ <span>
+ Custom and <b>bold</b>
+ <button onClick={() => toast.dismiss(t.id)}>
+ Dismiss2
+ </button>
+ </span>
+ ));
+}
 const App = () => {
  useQuery({
  queryKey: ['foo'],
@@ -39,9 +48,9 @@ const App = () => {
  });
  return (
  <div>
- <button onClick={() => {
-  promise()
- }}>Boom</button>
+ <button onClick={promise}>Boom</button>
+ <button onClick={withDismiss}>With Dismiss</button>
+ <MakeAndRemove />
  <Toaster />
  </div>
  );
@@ -52,3 +61,18 @@ export default () => (
  <App />
  </QueryClientProvider>
 );
+
+
+function MakeAndRemove() {
+
+ return <button onClick={ () => {
+ toast(
+ ({id}) => (
+ <div className="bg-green-500">
+ <p>Hello!</p>
+ <button onClick={() => toast.remove(id)}>Remove Me</button>
+ </div>
+ ),
+ {ttl: 3000}
+ )}}>Add And Remove</button>
+}

src/core/store.ts

@@ -93,12 +93,19 @@ export const reducer = (state: State, action: Action): State => {
  };
  }
  case ActionType.REMOVE_TOAST: {
+ const isPaused = state.pausedAt !== undefined
+ let toasts = state.toasts;
+ if (isPaused) {
+ toasts = compensateForPausedTime(state.toasts, state.pausedAt ?? 0)
+ }
+
+
  if (action.toastId === undefined) {
  return { ...state, toasts: [] };
  }
  return {
  ...state,
- toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ toasts: toasts.filter((t) => t.id !== action.toastId)
  };
  }
  case ActionType.START_PAUSE: {
@@ -108,19 +115,27 @@ export const reducer = (state: State, action: Action): State => {
  };
  }
  case ActionType.END_PAUSE: {
- const diff = action.time - (state.pausedAt || 0);
  return {
  ...state,
  pausedAt: undefined,
- toasts: state.toasts.map((t) => ({
- ...t,
- pauseDuration: t.pauseDuration + diff,
- })),
+ toasts: compensateForPausedTime(state.toasts, state.pausedAt ?? 0),
  };
  }
  }
 };
 
+function compensateForPausedTime(toasts: Toast[], pausedAt: number ) {
+ return toasts.map(t => {
+ const newToast = {
+ ...t,
+ // adding old pauseDuration allows for multiple pause-resume cycles
+ pauseDuration: Date.now() - pausedAt + t.pauseDuration
+ }
+ return newToast
+ })
+}
+
+
 export const dispatch = (action: Action) => {
  memoryState = reducer(memoryState, action);
  stateNotifier.notify(memoryState);

src/core/use-toaster.ts

@@ -12,8 +12,9 @@ export const useToaster = (toastOptions?: DefaultToastOptions) => {
  return true;
  }
 
+ const expiresAt = toast.createdAt + (toast.ttl || 0) + toast.pauseDuration;
  return (
- Date.now() < toast.createdAt + (toast.ttl || 0) + toast.pauseDuration
+  expiresAt >= Date.now()
  );
  }, []);