fix: remove abort handler from fetch util

.changeset/cuddly-camels-report.md

@@ -0,0 +1,6 @@
+---
+"@frigade/js": patch
+"@frigade/react": patch
+---
+
+Fixes an issue where anchor hashes causes network calls with state updates to be cancelled

apps/smithy/src/stories/Tour/TourInteractionTests.stories.tsx

@@ -0,0 +1,142 @@
+import { Box, Button, Tour, TourProps, useFlow } from "@frigade/react";
+import { type Meta, type StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { useEffect, useRef } from "react";
+
+type TourStory = StoryObj<typeof Tour>;
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const StoryMeta: Meta<typeof Tour> = {
+  title: "Components/Tour",
+  component: Tour,
+};
+
+export default StoryMeta;
+
+export const InteractionTests: TourStory = {
+  args: {
+    flowId: "flow_U63A5pndRrvCwxNs",
+  },
+
+  decorators: [
+    (Story, { args }) => {
+      const { flow } = useFlow(args.flowId);
+
+      const lateAnchorRef = useRef(null);
+
+      useEffect(() => {
+        // @ts-expect-error Shush TypeScript, it's a debug ref in a story, it's fine
+        lateAnchorRef.current = (
+          <Box
+            borderRadius="10px"
+            id="tooltip-storybook-0"
+            p={4}
+            style={{ background: "pink", width: "200px" }}
+          >
+            <Button.Primary
+              title="Anchor here"
+              onClick={() => {
+                // no-op
+              }}
+            />
+          </Box>
+        );
+      }, []);
+
+      return (
+        <>
+          <Story {...args} />
+          <button
+            id="reset-flow"
+            onClick={() => {
+              flow.restart();
+            }}
+            style={{ marginTop: "36px" }}
+          >
+            Reset Flow
+          </button>
+          <Box
+            style={{
+              alignItems: "center",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              height: "calc(100vh - 32px)",
+              // height: "1500px",
+            }}
+          >
+            <input
+              value="Restart Flow"
+              type="button"
+              onClick={() => {
+                // Do nothing, this is just to see if you can interact outside the overlay
+              }}
+            />
+
+            {lateAnchorRef.current}
+
+            <Box
+              id="tooltip-storybook-1"
+              p={4}
+              style={{ background: "fuchsia", width: "200px" }}
+            >
+              Second anchor
+            </Box>
+          </Box>
+
+          <Box
+            id="tooltip-storybook-2"
+            p={4}
+            style={{
+              background: "lightgreen",
+              width: "200px",
+              marginTop: "1400px", // Add significant margin to force scrolling
+            }}
+          >
+            Scroll to see this anchor
+          </Box>
+        </>
+      );
+    },
+  ],
+
+  play: async ({ step }) => {
+    await step("Test paginating through the Tour", async () => {
+      const canvas = within(document.body);
+      let TourElement = await canvas.findByRole("dialog");
+      let Tour = within(TourElement);
+
+      await userEvent.click(Tour.getByRole("button", { name: "Let's go!" }));
+      await sleep(100);
+
+      TourElement = await canvas.findByRole("dialog");
+      Tour = within(TourElement);
+
+      await userEvent.click(
+        Tour.getByRole("button", { name: "Scroll to the next step" })
+      );
+
+      await sleep(100);
+
+      TourElement = await canvas.findByRole("dialog");
+      Tour = within(TourElement);
+
+      await userEvent.click(Tour.getByRole("button", { name: "Continue" }));
+
+      await sleep(100);
+
+      await waitFor(async () => {
+        await expect(TourElement).not.toBeInTheDocument();
+      });
+
+      await sleep(1000);
+
+      await userEvent.click(canvas.getByText("Reset Flow"));
+
+      await sleep(1000);
+    });
+  },
+};

packages/js-api/src/core/frigade.ts

@@ -64,6 +64,14 @@ export class Frigade extends Fetchable {
             if (this.getGlobalState().currentUrl === event.destination.url) {
               return
             }
+            // if the new base url is the same but with a hashtag, don't refresh the state as the page has not changed.
+            if (
+              event.destination.url &&
+              this.getGlobalState().currentUrl &&
+              event.destination.url.split('#')[0] === this.getGlobalState().currentUrl.split('#')[0]
+            ) {
+              return
+            }
 
             this.getGlobalState().currentUrl = event.destination.url
             this.refreshStateFromAPI(true)

packages/js-api/src/shared/utils.ts

@@ -81,7 +81,6 @@ class CallQueue {
   }[] = []
   private readonly ttlInMS = 250
   private readonly cacheSize = 10
-  private controller: AbortController = new AbortController()
 
   public push(call: string, response?: Promise<Response>) {
     const now = new Date()
@@ -106,14 +105,7 @@ class CallQueue {
   }
 
   public cancelAllPendingRequests() {
-    // abort all requests
-    this.controller.abort(REDUNDANT_CALL_MESSAGE)
     this.queue = []
-    this.controller = new AbortController()
-  }
-
-  public getController() {
-    return this.controller
   }
 }
 
@@ -151,10 +143,7 @@ export async function gracefulFetch(
         callQueue.cancelAllPendingRequests()
       }
 
-      const pendingResponse = fetch(url, {
-        ...(options ?? {}),
-        signal: callQueue.getController().signal,
-      })
+      const pendingResponse = fetch(url, options)
 
       if (isWebPostRequest) {
         callQueue.push(
@@ -165,6 +154,9 @@ export async function gracefulFetch(
       }
 
       response = await pendingResponse
+      if (isWebPostRequest && !callQueue.hasCall(lastCallDataKey)) {
+        response = getEmptyResponse(REDUNDANT_CALL_MESSAGE)
+      }
     } catch (error) {
       return getEmptyResponse(error)
     }