react-notify-sdk 1.0.63 → 1.0.65

package/dist/FeatureMessageProvider.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // src/FeatureMessageProvider.tsx
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import FeatureMessage from './FeatureMessage';
-import { getSupabaseClient } from './supabase/supabaseClient';
 import useDeviceDetection from './useDeviceDetection';
 import FadeWrapper from './FadeWrapper';
 // Wildcard route matching utility
@@ -26,12 +25,17 @@ const baseUrlMatches = (msgBaseUrl) => {
     return msgBaseUrl === window.location.origin;
 };
 export const FeatureMessageProvider = ({ projectKey, }) => {
+    const TTL = 30000; // 30 seconds
+    // Route-level cache (module scoped, persists across re-renders)
+    const routeCache = {};
     const [message, setMessage] = useState(null);
     const [messages, setMessages] = useState([]);
     const [visible, setVisible] = useState(false);
     const [pathname, setPathname] = useState(() => typeof window !== 'undefined' ? window.location.pathname : '');
     const device = useDeviceDetection();
-    //Dismiss message caching
+    // 🔹 Persist version across renders
+    const versionRef = useRef(0);
+    const intervalRef = useRef(null);
     //Dismissed message cached retrieval
     const DISMISSED_KEY = "__feature_messages_dismissed__";
     const getDismissedMessages = () => {
@@ -62,9 +66,9 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
         // Re-show if message changed
         return dismissed.messageUpdatedAt === message?.updated_at;
     };
-    // Create supabase client with project key header
-    const supabaseClient = getSupabaseClient(projectKey);
-    // Effect to track pathname changes
+    // --------------------------------------------
+    // PATHNAME TRACKING
+    // --------------------------------------------
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
@@ -90,47 +94,78 @@ export const FeatureMessageProvider = ({ projectKey, }) => {
             window.history.replaceState = originalReplaceState;
         };
     }, []);
+    // --------------------------------------------
+    // FETCH + VERSION DIFF POLLING
+    // --------------------------------------------
     // Your main effect - now uses the reactive pathname state
     useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
-        let fadeOutTimer = null; // Track the timer
         const origin = window.location.origin;
+        const cacheKey = `${projectKey}_${pathname}`;
+        // Track current version per route
+        //const versionRef = { current: 0 };
         // 🔹 1. Fetch ALL active messages once per project
-        const fetchMessages = async () => {
-            const { data } = await supabaseClient
-                .from("feature_messages")
-                .select("*")
-                .eq("project_key", projectKey)
-                .eq("is_active", true)
-                .order("created_at", { ascending: false });
-            if (data) {
-                setMessages(data);
-            }
-        };
-        fetchMessages();
-        // 🔹 2. Subscribe ONCE per project
-        const subscription = supabaseClient
-            .channel("feature_messages_channel")
-            .on("postgres_changes", { event: "*", schema: "public", table: "feature_messages" }, (payload) => {
-            const msg = payload.new;
-            if (msg.project_key !== projectKey)
+        const fetchMessages = async (force = false) => {
+            const now = Date.now();
+            const cacheKey = `${projectKey}_${pathname}`;
+            const cached = routeCache[cacheKey];
+            // ✅ TTL cache check
+            if (!force &&
+                cached &&
+                now - cached.timestamp < TTL) {
+                versionRef.current = cached.version;
+                setMessages(cached.data);
                 return;
-            setMessages((prev) => {
-                const filtered = prev.filter((m) => m.id !== msg.id);
-                if (msg.is_active) {
-                    return [msg, ...filtered];
+            }
+            try {
+                const response = await fetch("https://dhgnstjrkeuqnsapwcec.functions.supabase.co/get-feature-message", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        projectKey,
+                        pathname: pathname,
+                        origin: origin,
+                        version: versionRef.current, // 🔥 Send current version
+                    }),
+                });
+                if (!response.ok)
+                    return null;
+                const data = await response.json();
+                // 🔁 No changes — just bump timestamp
+                if (data.unchanged && cached) {
+                    routeCache[cacheKey].timestamp = Date.now();
+                    return;
                 }
-                return filtered;
-            });
-        })
-            .subscribe();
+                versionRef.current = data.version;
+                routeCache[cacheKey] = {
+                    data: data.messages,
+                    version: data.version,
+                    timestamp: Date.now(),
+                };
+                setMessages(data.messages);
+            }
+            catch (error) {
+                console.error("Failed to fetch feature messages:", error);
+            }
+        };
+        fetchMessages(true);
+        // 🔄 Poll every 30 seconds
+        intervalRef.current = setInterval(() => {
+            fetchMessages(false);
+        }, TTL);
         return () => {
-            if (fadeOutTimer)
-                clearTimeout(fadeOutTimer);
-            supabaseClient.removeChannel(subscription);
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
         };
-    }, [projectKey]);
+    }, [projectKey, pathname]);
+    // --------------------------------------------
+    // MATCH ROUTE → SHOW MESSAGE
+    // --------------------------------------------
+    // Effect to determine which message to show based on current pathname and messages
     useEffect(() => {
         if (!pathname || !messages.length)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",