feat: chunk data hook

Author: drew-harris

clients/trieve-shopify-extension/extensions/enrich-content-block/src/ActionExtension.tsx

@@ -7,25 +7,37 @@ import {
   useApi,
 } from "@shopify/ui-extensions-react/admin";
 import { TrieveProvider, useTrieve } from "./TrieveProvider";
+import { useChunkExtraContent } from "./useChunkExtraContent";
 
 const TARGET = "admin.product-details.block.render";
 
+function extractShopifyProductId(gid: string): string | undefined {
+  const parts = gid.substring(6).split("/"); // Remove "gid://" and then split
+  if (parts.length === 3 && parts[0] === "shopify" && parts[1] === "Product") {
+    return parts[2];
+  }
+  return undefined;
+}
+
 export default reactExtension(TARGET, () => (
   <TrieveProvider>
     <App />
   </TrieveProvider>
 ));
 
 function App() {
-  const trieve = useTrieve();
   const { data } = useApi(TARGET);
   const productId = data.selected[0].id;
+  const simplifiedProductId = extractShopifyProductId(productId);
+
+  const { extraContent, loading, updateContent } =
+    useChunkExtraContent(simplifiedProductId);
 
   return (
     <AdminBlock title="Enrich Content">
       <BlockStack>
         <Text fontWeight="bold">Hi</Text>
-        <Text>Current product:{productId}</Text>
+        <Text>Current product:{simplifiedProductId}</Text>
       </BlockStack>
     </AdminBlock>
   );

clients/trieve-shopify-extension/extensions/enrich-content-block/src/useChunkExtraContent.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { useTrieve } from "./TrieveProvider";
+
+export const useChunkExtraContent = (productId: string | undefined) => {
+  const trieve = useTrieve();
+  const [extraContent, setExtraContent] = useState<string | null>(null);
+
+  const [loading, setLoading] = useState(true);
+
+  // Fetch current product extra content chunk
+  const getData = async () => {
+    if (!productId) {
+      console.info("Tried to fetch product content without id");
+      return;
+    }
+    const result = await trieve.getChunkByTrackingId({
+      trackingId: `${productId}-pdp-content`,
+    });
+    if (!result.chunk_html) {
+      return;
+    }
+    setExtraContent(result.chunk_html);
+  };
+
+  const updateContent = async (content: string) => {
+    if (!productId) {
+      console.info("Tried to update product content without id");
+      return;
+    }
+
+    // const result = await trieve.updateChunkByTrackingId({
+    //   trackingId: `${productId}-pdp-content`,
+    //   chunk_html: content,
+    // });
+    //
+    // if (!result.chunk_html) {
+    //   return;
+    // }
+    // setExtraContent(result.chunk_html);
+  };
+
+  useEffect(() => {
+    if (!productId) {
+      return;
+    }
+    getData();
+  }, [productId]);
+
+  return {
+    extraContent,
+    loading,
+    updateContent,
+  };
+};