@foxpixel/react 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -124,7 +124,8 @@ function FoxPixelProvider({ children, config = {}, queryClient }) {
   const value = useMemo(() => ({
     client,
     config,
-    queryClient: queryClient ?? null
+    queryClient: queryClient ?? null,
+    locale: config?.locale
   }), [client, config, queryClient]);
   return /* @__PURE__ */ jsx(FoxPixelContext.Provider, { value, children });
 }
@@ -399,19 +400,18 @@ function useEditModeMessaging() {
       if (!queryClient) return;
       const { type, payload } = event.data || {};
       if (type !== "FOXPIXEL_CONTENT_UPDATED" || !payload?.contentKey) return;
-      const { contentKey, newValue } = payload;
+      const { contentKey, newValue, locale } = payload;
+      const cacheKey2 = locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
       if (typeof newValue === "string") {
         queryClient.setQueryData(
-          [SITE_CONTENT_QUERY_KEY, contentKey],
+          cacheKey2,
           (prev) => ({
             value: newValue,
             contentType: prev?.contentType ?? "TEXT"
           })
         );
       }
-      queryClient.invalidateQueries({
-        queryKey: [SITE_CONTENT_QUERY_KEY, contentKey]
-      });
+      queryClient.invalidateQueries({ queryKey: cacheKey2 });
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
@@ -421,20 +421,19 @@ function useEditModeMessaging() {
 function useSendEditRequest() {
   const isEditMode = useEditMode();
   return useCallback2(
-    (contentKey, currentValue, contentType = "text", section, description) => {
+    (contentKey, currentValue, contentType = "text", section, description, locale) => {
       if (!isEditMode) return;
       if (typeof window !== "undefined" && window.parent !== window) {
+        const payload = {
+          contentKey,
+          currentValue,
+          contentType,
+          section,
+          description
+        };
+        if (locale != null && locale !== "") payload.locale = locale;
         window.parent.postMessage(
-          {
-            type: "FOXPIXEL_EDIT_CONTENT",
-            payload: {
-              contentKey,
-              currentValue,
-              contentType,
-              section,
-              description
-            }
-          },
+          { type: "FOXPIXEL_EDIT_CONTENT", payload },
           "*"
         );
       }
@@ -445,20 +444,23 @@ function useSendEditRequest() {
 
 // src/hooks/useSiteContentQuery.ts
 import { useState as useState6, useEffect as useEffect6, useRef } from "react";
-function getCached(queryClient, contentKey) {
-  const data = queryClient.getQueryData([
-    SITE_CONTENT_QUERY_KEY,
-    contentKey
-  ]);
+function queryKey(contentKey, locale) {
+  return locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
+}
+function getCached(queryClient, contentKey, locale) {
+  const data = queryClient.getQueryData(
+    queryKey(contentKey, locale)
+  );
   if (data == null) return void 0;
   return { value: data.value ?? "", contentType: data.contentType ?? "TEXT" };
 }
 function useSiteContentQuery(contentKey, options) {
-  const { defaultValue } = options;
+  const { defaultValue, locale } = options;
+  const loc = locale != null && locale !== "" ? locale : void 0;
   const { client, queryClient } = useFoxPixelContext();
   const [state, setState] = useState6(() => {
     if (queryClient) {
-      const cached = getCached(queryClient, contentKey);
+      const cached = getCached(queryClient, contentKey, loc);
       if (cached) {
         return { value: cached.value, isLoading: false, contentType: cached.contentType };
       }
@@ -467,18 +469,20 @@ function useSiteContentQuery(contentKey, options) {
   });
   const contentKeyRef = useRef(contentKey);
   contentKeyRef.current = contentKey;
+  const localeRef = useRef(loc);
+  localeRef.current = loc;
   useEffect6(() => {
     if (!queryClient) {
       setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
       return;
     }
     const key = contentKeyRef.current;
-    const queryKey = [SITE_CONTENT_QUERY_KEY, key];
+    const locCurrent = localeRef.current;
+    const qKey = queryKey(key, locCurrent);
     const queryFn = async () => {
       try {
-        const content = await client.get(
-          `/api/site/content/${encodeURIComponent(key)}`
-        );
+        const url = `/api/site/content/${encodeURIComponent(key)}` + (locCurrent ? `?locale=${encodeURIComponent(locCurrent)}` : "");
+        const content = await client.get(url);
         if (!content) return null;
         return {
           value: content.value ?? "",
@@ -492,7 +496,7 @@ function useSiteContentQuery(contentKey, options) {
     };
     let cancelled = false;
     queryClient.fetchQuery({
-      queryKey,
+      queryKey: qKey,
       queryFn,
       staleTime: 1e3 * 60 * 5,
       retry: 1
@@ -508,8 +512,11 @@ function useSiteContentQuery(contentKey, options) {
       setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
     });
     const unsub = queryClient.getQueryCache().subscribe((event) => {
-      if (event?.type === "updated" && event?.query?.queryKey[1] === key) {
-        const cached = getCached(queryClient, key);
+      const q = event?.query;
+      const keyMatch = q?.queryKey?.[1] === key;
+      const locMatch = (q?.queryKey?.[2] ?? void 0) === locCurrent;
+      if (event?.type === "updated" && q && keyMatch && locMatch) {
+        const cached = getCached(queryClient, key, locCurrent);
         if (cached && !cancelled) {
           setState({
             value: cached.value,
@@ -523,7 +530,7 @@ function useSiteContentQuery(contentKey, options) {
       cancelled = true;
       unsub();
     };
-  }, [queryClient, contentKey, defaultValue, client]);
+  }, [queryClient, contentKey, defaultValue, client, loc]);
   return state;
 }
 
@@ -601,13 +608,17 @@ function Editable({
   defaultValue,
   as = "span",
   multiline = false,
-  className
+  className,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = useState7(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading, contentType } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
   useEffect7(() => {
@@ -625,11 +636,13 @@ function Editable({
           contentKey,
           value,
           contentType?.toLowerCase() || "text",
-          section
+          section,
+          void 0,
+          locale
         );
       }
     },
-    [isEditMode, contentKey, value, contentType, section, sendEditRequest]
+    [isEditMode, contentKey, value, contentType, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return createElement(as, {
@@ -702,13 +715,17 @@ function EditableHTML({
   contentKey,
   defaultValue,
   as = "div",
-  className
+  className,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = useState7(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
   useEffect7(() => {
@@ -722,10 +739,10 @@ function EditableHTML({
       if (isEditMode) {
         e.preventDefault();
         e.stopPropagation();
-        sendEditRequest(contentKey, value, "html", section);
+        sendEditRequest(contentKey, value, "html", section, void 0, locale);
       }
     },
-    [isEditMode, contentKey, value, section, sendEditRequest]
+    [isEditMode, contentKey, value, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return createElement(as, {
@@ -774,13 +791,17 @@ function EditableImage({
   className,
   width,
   height,
-  priority = false
+  priority = false,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = useState7(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value: src, isLoading } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
   useEffect7(() => {
@@ -794,10 +815,10 @@ function EditableImage({
       if (isEditMode) {
         e.preventDefault();
         e.stopPropagation();
-        sendEditRequest(contentKey, src, "image", section);
+        sendEditRequest(contentKey, src, "image", section, void 0, locale);
       }
     },
-    [isEditMode, contentKey, src, section, sendEditRequest]
+    [isEditMode, contentKey, src, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return /* @__PURE__ */ jsx6(
@@ -943,20 +964,20 @@ function useContactCapture() {
 // src/hooks/useSiteContent.ts
 import { useState as useState11, useEffect as useEffect9, useCallback as useCallback4 } from "react";
 function useSiteContent(contentKey, options = {}) {
-  const { defaultValue = "", fetchOnMount = true } = options;
+  const { defaultValue = "", fetchOnMount = true, locale } = options;
   const { client } = useFoxPixelContext();
   const { user, hasPermission } = useAuth();
   const [data, setData] = useState11(null);
   const [isLoading, setIsLoading] = useState11(fetchOnMount);
   const [error, setError] = useState11(null);
   const canEdit = user !== null && hasPermission("site:content:update");
+  const queryLocale = locale != null && locale !== "" ? locale : void 0;
   const fetchContent = useCallback4(async () => {
     try {
       setIsLoading(true);
       setError(null);
-      const content = await client.get(
-        `/api/site/content/${encodeURIComponent(contentKey)}`
-      );
+      const url = `/api/site/content/${encodeURIComponent(contentKey)}` + (queryLocale ? `?locale=${encodeURIComponent(queryLocale)}` : "");
+      const content = await client.get(url);
       setData(content);
     } catch (err) {
       if (err?.status === 404) {
@@ -967,20 +988,22 @@ function useSiteContent(contentKey, options = {}) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, contentKey]);
+  }, [client, contentKey, queryLocale]);
   const updateContent = useCallback4(async (newValue) => {
     try {
       setError(null);
+      const body = { value: newValue };
+      if (queryLocale) body.locale = queryLocale;
       const updated = await client.put(
         `/api/site/content/${encodeURIComponent(contentKey)}`,
-        { value: newValue }
+        body
       );
       setData(updated);
     } catch (err) {
       setError(err);
       throw err;
     }
-  }, [client, contentKey]);
+  }, [client, contentKey, queryLocale]);
   useEffect9(() => {
     if (fetchOnMount) {
       fetchContent();
@@ -998,11 +1021,12 @@ function useSiteContent(contentKey, options = {}) {
   };
 }
 function useSiteContents(contentKeys, options = {}) {
-  const { defaults = {} } = options;
+  const { defaults = {}, locale } = options;
   const { client } = useFoxPixelContext();
   const [data, setData] = useState11({});
   const [isLoading, setIsLoading] = useState11(true);
   const [error, setError] = useState11(null);
+  const body = locale != null && locale !== "" ? { keys: contentKeys, locale } : contentKeys;
   const fetchContents = useCallback4(async () => {
     if (contentKeys.length === 0) {
       setData({});
@@ -1014,7 +1038,7 @@ function useSiteContents(contentKeys, options = {}) {
       setError(null);
       const contents = await client.post(
         "/api/site/content/batch",
-        contentKeys
+        body
       );
       setData(contents);
     } catch (err) {
@@ -1022,7 +1046,7 @@ function useSiteContents(contentKeys, options = {}) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, contentKeys.join(",")]);
+  }, [client, contentKeys.join(","), locale]);
   useEffect9(() => {
     fetchContents();
   }, [fetchContents]);
@@ -1041,25 +1065,25 @@ function useSiteContents(contentKeys, options = {}) {
     refetch: fetchContents
   };
 }
-function useSiteContentSection(section) {
+function useSiteContentSection(section, options = {}) {
+  const { locale } = options;
   const { client } = useFoxPixelContext();
   const [contents, setContents] = useState11([]);
   const [isLoading, setIsLoading] = useState11(true);
   const [error, setError] = useState11(null);
+  const url = `/api/site/content/section/${encodeURIComponent(section)}` + (locale != null && locale !== "" ? `?locale=${encodeURIComponent(locale)}` : "");
   const fetchContents = useCallback4(async () => {
     try {
       setIsLoading(true);
       setError(null);
-      const data = await client.get(
-        `/api/site/content/section/${encodeURIComponent(section)}`
-      );
+      const data = await client.get(url);
       setContents(data);
     } catch (err) {
       setError(err);
     } finally {
       setIsLoading(false);
     }
-  }, [client, section]);
+  }, [client, section, locale]);
   useEffect9(() => {
     fetchContents();
   }, [fetchContents]);
@@ -1072,33 +1096,39 @@ function useSiteContentSection(section) {
 }
 
 // src/prefetchSiteContent.ts
+function cacheKey(contentKey, locale) {
+  return locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
+}
 async function prefetchSiteContent(queryClient, options) {
-  const { apiUrl, apiKey, tenantId, contentKeys } = options;
+  const { apiUrl, apiKey, tenantId, contentKeys, locale } = options;
   const client = new FoxPixelHttpClient({ apiUrl, apiKey, tenantId });
-  await Promise.all(
-    contentKeys.map(async (contentKey) => {
-      try {
-        const content = await client.get(
-          `/api/site/content/${encodeURIComponent(contentKey)}`
-        );
-        queryClient.setQueryData(
-          [SITE_CONTENT_QUERY_KEY, contentKey],
-          {
-            value: content?.value ?? "",
-            contentType: content?.contentType ?? "TEXT"
+  const locales = locale == null ? [void 0] : Array.isArray(locale) ? locale : [locale];
+  const tasks = [];
+  for (const contentKey of contentKeys) {
+    for (const loc of locales) {
+      tasks.push(
+        (async () => {
+          try {
+            const url = `/api/site/content/${encodeURIComponent(contentKey)}` + (loc != null && loc !== "" ? `?locale=${encodeURIComponent(loc)}` : "");
+            const content = await client.get(url);
+            queryClient.setQueryData(cacheKey(contentKey, loc), {
+              value: content?.value ?? "",
+              contentType: content?.contentType ?? "TEXT"
+            });
+          } catch (err) {
+            const status = err?.response?.status;
+            if (status === 404) {
+              queryClient.setQueryData(cacheKey(contentKey, loc), {
+                value: "",
+                contentType: "TEXT"
+              });
+            }
           }
-        );
-      } catch (err) {
-        const status = err?.response?.status;
-        if (status === 404) {
-          queryClient.setQueryData([SITE_CONTENT_QUERY_KEY, contentKey], {
-            value: "",
-            contentType: "TEXT"
-          });
-        }
-      }
-    })
-  );
+        })()
+      );
+    }
+  }
+  await Promise.all(tasks);
 }
 
 // src/blog/hooks.ts