Generalized the useLiveify hook

client/src/components/liveify.ts

@@ -0,0 +1,62 @@
+import { LiveEvent } from "@refinedev/core";
+import React from "react";
+import liveProvider from "./liveProvider";
+
+const liveProviderInstance = liveProvider(import.meta.env.VITE_APIURL);
+
+/**
+ * Hook that subscribes to live updates for the items in the dataSource
+ * @param dataSource Original dataSource
+ * @returns dataSource that is updated with live data
+ */
+export function useLiveify<Data extends { id: number }>(
+  resource: string,
+  dataSource: Data[],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  transformPayload: (payload: any) => Data
+) {
+  // TODO: The hooks in this function is quite janky, and should be refactored to be more efficient
+  // New state that holds the dataSource with updated values from the live provider
+  const [updatedDataSource, setUpdatedDataSource] = React.useState<Data[]>(dataSource);
+
+  // If the original dataSource changes, update the updatedDataSource
+  React.useEffect(() => {
+    setUpdatedDataSource(dataSource);
+  }, [dataSource]);
+
+  // Create a constant reference to itemIds. This is to prevent the useEffect below from triggering extra times.
+  const itemIds = dataSource.map((item) => item.id);
+  const [prevItemIds, setPrevItemIds] = React.useState<number[]>(itemIds);
+  if (JSON.stringify(itemIds) !== JSON.stringify(prevItemIds)) {
+    setPrevItemIds(itemIds);
+  }
+
+  // Subscribe to changes for all items in the dataSource
+  React.useEffect(() => {
+    const subscription = liveProviderInstance?.subscribe({
+      channel: `${resource}-list`,
+      params: {
+        resource: resource,
+        ids: prevItemIds,
+        subscriptionType: "useList",
+      },
+      types: ["update"],
+      callback: (event: LiveEvent) => {
+        setUpdatedDataSource((prev) =>
+          prev.map((item) => {
+            return item.id === event.payload.data.id ? transformPayload(event.payload.data) : item;
+          })
+        );
+      },
+    });
+
+    // Unsubscribe when the component unmounts
+    return () => {
+      if (subscription) {
+        liveProviderInstance?.unsubscribe(subscription);
+      }
+    };
+  }, [resource, prevItemIds, transformPayload]);
+
+  return updatedDataSource;
+}