fix(react,js): blocks sometimes not showing up during initial request (#394)

* feat(react,js): fix blocks state

* feat: update version to latest canary

* @flows/react@1.9.1-canary.3

* test: that the blocks don't get overwritten

---------

Co-authored-by: flows-bot[bot] <170794745+flows-bot[bot]@users.noreply.github.com>

Author: VojtechVidra

workspaces/e2e/tests/init.spec.ts

@@ -1,12 +1,28 @@
-import { test } from "@playwright/test";
+import { Block, BlockUpdatesPayload } from "@flows/shared";
+import { expect, Route, test, WebSocketRoute } from "@playwright/test";
+import { randomUUID } from "crypto";
 
+let ws: WebSocketRoute | null = null;
 test.beforeEach(async ({ page }) => {
   await page.routeWebSocket(
     (url) => url.pathname === "/ws/sdk/block-updates",
-    () => {},
+    (_ws) => {
+      ws = _ws;
+    },
   );
 });
 
+const getBlock = (): Block => ({
+  id: randomUUID(),
+  workflowId: randomUUID(),
+  type: "component",
+  componentType: "Modal",
+  data: { title: "Hello world", body: "" },
+  exitNodes: [],
+  slottable: false,
+  propertyMeta: [],
+});
+
 const run = (packageName: string) => {
   test(`${packageName} - should call blocks with correct parameters`, async ({ page }) => {
     await page.route("**/v2/sdk/blocks", (route) => {
@@ -50,6 +66,23 @@ const run = (packageName: string) => {
     );
     await blocksReq;
   });
+  test(`${packageName} - shouldn't overwrite blocks state by /blocks result`, async ({ page }) => {
+    let blocksRoute: Route | null = null;
+    await page.route("**/v2/sdk/blocks", (route) => {
+      blocksRoute = route;
+    });
+    await page.goto(`/${packageName}.html`);
+    await expect(page.locator(".current-blocks")).toHaveText(JSON.stringify([]));
+    const block = getBlock();
+    const payload: BlockUpdatesPayload = {
+      exitedBlockIds: [],
+      updatedBlocks: [block],
+    };
+    ws?.send(JSON.stringify(payload));
+    await expect(page.getByText("Hello world", { exact: true })).toBeVisible();
+    (blocksRoute as Route | null)?.fulfill({ json: { blocks: [] } });
+    await expect(page.getByText("Hello world", { exact: true })).toBeVisible();
+  });
 };
 
 run("js");

workspaces/js/src/lib/blocks.ts

@@ -1,4 +1,10 @@
-import { type BlockUpdatesPayload, getApi, log, type UserProperties } from "@flows/shared";
+import {
+  type BlockUpdatesPayload,
+  getApi,
+  log,
+  deduplicateBlocks,
+  type UserProperties,
+} from "@flows/shared";
 import { blocks } from "../store";
 import { type Disconnect, websocket } from "./websocket";
 import { packageAndVersion } from "./constants";
@@ -25,7 +31,7 @@ export const connectToWebsocketAndFetchBlocks = (props: Props): void => {
     void getApi(apiUrl, packageAndVersion)
       .getBlocks({ ...params, userProperties: props.userProperties })
       .then((res) => {
-        blocks.value = res.blocks;
+        blocks.value = deduplicateBlocks(blocks.value, res.blocks);
         // Disconnect if the user is usage limited
         if (res.meta?.usage_limited) disconnect?.();
       })
@@ -35,14 +41,9 @@ export const connectToWebsocketAndFetchBlocks = (props: Props): void => {
   };
   const onMessage = (event: MessageEvent<unknown>): void => {
     const data = JSON.parse(event.data as string) as BlockUpdatesPayload;
-    const exitedOrUpdatedBlockIdsSet = new Set([
-      ...data.exitedBlockIds,
-      ...data.updatedBlocks.map((b) => b.id),
-    ]);
-    blocks.value = [
-      ...blocks.value.filter((block) => !exitedOrUpdatedBlockIdsSet.has(block.id)),
-      ...data.updatedBlocks,
-    ];
+    const exitedBlockIdsSet = new Set(data.exitedBlockIds);
+    const filteredBlocks = blocks.value.filter((b) => !exitedBlockIdsSet.has(b.id));
+    blocks.value = deduplicateBlocks(filteredBlocks, data.updatedBlocks);
   };
 
   // Disconnect previous connection if it exists

workspaces/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flows/react",
-  "version": "1.9.0",
+  "version": "1.9.1-canary.3",
   "description": "Flows React SDK – Build native product growth experiences, your way",
   "keywords": [
     "react",

workspaces/react/src/hooks/use-blocks.ts

@@ -6,6 +6,7 @@ import {
   type Block,
   type TourStep,
   type BlockUpdatesPayload,
+  deduplicateBlocks,
 } from "@flows/shared";
 import { packageAndVersion } from "../lib/constants";
 import { type RemoveBlock, type UpdateBlock } from "../flows-context";
@@ -49,7 +50,7 @@ export const useBlocks = ({
     void getApi(apiUrl, packageAndVersion)
       .getBlocks({ ...params, userProperties: userPropertiesRef.current })
       .then((res) => {
-        setBlocks(res.blocks);
+        setBlocks((prevBlocks) => deduplicateBlocks(prevBlocks, res.blocks));
         if (res.meta?.usage_limited) setUsageLimited(true);
       })
       .catch((err: unknown) => {
@@ -67,14 +68,11 @@ export const useBlocks = ({
     // TODO: add debug logging
     // console.log("Message from server", event.data);
     const data = JSON.parse(event.data as string) as BlockUpdatesPayload;
-    const exitedOrUpdatedBlockIdsSet = new Set([
-      ...data.exitedBlockIds,
-      ...data.updatedBlocks.map((b) => b.id),
-    ]);
-    setBlocks((prevBlocks) => [
-      ...prevBlocks.filter((block) => !exitedOrUpdatedBlockIdsSet.has(block.id)),
-      ...data.updatedBlocks,
-    ]);
+    const exitedBlockIdsSet = new Set(data.exitedBlockIds);
+    setBlocks((prevBlocks) => {
+      const filteredBlocks = prevBlocks.filter((b) => !exitedBlockIdsSet.has(b.id));
+      return deduplicateBlocks(filteredBlocks, data.updatedBlocks);
+    });
   }, []);
   useWebsocket({ url: websocketUrl, onMessage, onOpen: fetchBlocks });
 

workspaces/shared/src/blocks.ts

@@ -0,0 +1,9 @@
+import { type Block } from "./types";
+
+export const deduplicateBlocks = (prevBlocks: Block[], updatedBlocks: Block[]): Block[] => {
+  const blocksById = new Map(prevBlocks.map((b) => [b.id, b]));
+  updatedBlocks.forEach((updatedBlock) => {
+    blocksById.set(updatedBlock.id, updatedBlock);
+  });
+  return Array.from(blocksById.values());
+};

workspaces/shared/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./api";
+export * from "./blocks";
 export * from "./component-props";
 export * from "./log";
 export * from "./matchers";