Merge pull request #8 from preprio/feature/graphql_segments

Update fetching to use Graphql
preprio · Feb 4, 2025 · ed72fb0 · ed72fb0
2 parents 7996766 + e5d1f63
commit ed72fb0
Show file tree

Hide file tree

Showing 20 changed files with 436 additions and 273 deletions.
diff --git a/README.md b/README.md
@@ -105,17 +105,9 @@ const getData = async () => {
 The preview bar component fetches all segments from the Prepr API. So, you need to give it access to do this as follows:
 
 1. In your Prepr environment, go to the  **Settings → Access tokens** page to view all the access tokens.
-2. Click the **Add access token** button to create a new access token, give it a name and choose the segments scope like in the image below.
+2. Click the *GraphQL Preview* access token to open it and tick the **Enable edit mode** checkbox and click the **Save** button.
 
-![Segments access token](https://assets-site.prepr.io//2mcoy87hhmfz-segments-access-token.png)
-
-3. Click the **Save** button and copy the generated *Access token*.
-
-4. Add a new variable `PREPR_SEGMENTS_ACCESS_TOKEN` to the `.env` file and paste the value you just copied.
-
-```bash
-PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR-SEGMENTS-ACCESS-TOKEN>
-```
+![Preview access token](https://assets-site.prepr.io/229kaekn7m96//preview-access-token-enable-edit-mode.png)
 
 To implement the *Adaptive Preview Bar* component, navigate to your root layout file, this is usually `layout.tsx`.
 
@@ -132,7 +124,7 @@ import '@preprio/prepr-nextjs/dist/components.css'
 
 export default async function RootLayout({children}: {children: React.ReactNode}) {
     // Get the props for the PreviewBar component, pass the access token as an argument
-    const previewBarProps = await getPreviewBarProps(process.env.PREPR_SEGMENTS_ACCESS_TOKEN)
+    const previewBarProps = await getPreviewBarProps(process.env.PREPR_GRAPHQL_URL)
 
     return (
         <html>

diff --git a/dist/components.d.mts b/dist/components.d.mts
@@ -1,9 +1,10 @@
 import React from 'react';
+import { P as PreprSegment } from './types-DmITW6Tn.mjs';
 
 declare function PreprPreviewBar(props: {
     activeSegment?: string | null;
     activeVariant?: string | null;
-    data?: any;
+    data?: PreprSegment[];
 }): React.JSX.Element;
 
 export { PreprPreviewBar };
diff --git a/dist/components.d.ts b/dist/components.d.ts
@@ -1,9 +1,10 @@
 import React from 'react';
+import { P as PreprSegment } from './types-DmITW6Tn.js';
 
 declare function PreprPreviewBar(props: {
     activeSegment?: string | null;
     activeVariant?: string | null;
-    data?: any;
+    data?: PreprSegment[];
 }): React.JSX.Element;
 
 export { PreprPreviewBar };
diff --git a/dist/components.js b/dist/components.js
diff --git a/dist/components.js.map b/dist/components.js.map
diff --git a/dist/components.mjs b/dist/components.mjs
@@ -107,28 +107,29 @@ function InfoPopover({ title, text }) {
 import { clsx } from "clsx";
 function PreprPreviewBar(props) {
   const { activeSegment, activeVariant, data } = props;
-  const [segmentList, setSegmentList] = useState(data == null ? void 0 : data.items);
+  const [segmentList, setSegmentList] = useState(data);
   const [isToggled, setIsToggled] = useState(false);
   const searchParams = useSearchParams();
+  console.log("SEGMENTS:", segmentList);
   if (searchParams.get("prepr_hide_bar") === "true") {
     return null;
   }
   if (typeof window !== "undefined" && (window == null ? void 0 : window.parent) !== window.self) {
     return null;
   }
-  if (segmentList && segmentList[0] && segmentList[0].reference_id !== "null") {
+  if (segmentList && segmentList[0] && segmentList[0]._id !== "null") {
     setSegmentList([
       {
-        id: "null",
-        reference_id: "null",
-        body: "All other users"
+        _id: "null",
+        name: "All other users"
       },
       ...segmentList
     ]);
   }
   const emptyVariant = "A";
   const emptySegment = {
-    body: "Choose segment"
+    name: "Choose segment",
+    _id: "null"
   };
   useEffect(() => {
     if (!window) {
@@ -140,7 +141,7 @@ function PreprPreviewBar(props) {
   });
   const [selectedSegment, setSelectedSegment] = useState(
     segmentList && segmentList.filter(
-      (segmentData) => segmentData === activeSegment
+      (segmentData) => segmentData.name === activeSegment
     )[0] || emptySegment
   );
   const [selectedVariant, setSelectedVariant] = useState(
@@ -156,7 +157,7 @@ function PreprPreviewBar(props) {
     }
     if (key === "prepr_preview_segment" && value) {
       setSelectedSegment(value);
-      params.set(key, value.reference_id);
+      params.set(key, value._id);
     }
     for (const [key2, value2] of params.entries()) {
       if (value2 === "null" || value2 === null || value2 === void 0) {
@@ -200,7 +201,7 @@ function PreprPreviewBar(props) {
     )), /* @__PURE__ */ React4.createElement(
       Listbox,
       {
-        value: selectedSegment.slug,
+        value: selectedSegment._id,
         onChange: (value) => handleSearchParams(
           "prepr_preview_segment",
           value
@@ -222,7 +223,7 @@ function PreprPreviewBar(props) {
             },
             className: "prp-w-full prp-overflow-hidden prp-mr-auto"
           },
-          segmentList.length > 0 ? selectedSegment.body : "No segments"
+          segmentList.length > 0 ? selectedSegment.name : "No segments"
         ),
         /* @__PURE__ */ React4.createElement("div", { className: "prp-text-gray-400" }, /* @__PURE__ */ React4.createElement(FaCaretDown, { className: "prp-w-3" }))
       ),
@@ -232,38 +233,40 @@ function PreprPreviewBar(props) {
           anchor: "top start",
           className: "prp-z-[9999] prp-rounded-md prp-bg-white prp-h-1/3 prp-mt-2 prp-shadow-xl"
         },
-        segmentList == null ? void 0 : segmentList.map((segment) => /* @__PURE__ */ React4.createElement(
-          ListboxOption,
-          {
-            key: segment.id,
-            value: segment,
-            className: clsx(
-              "prp-flex prp-items-center prp-p-2  prp-regular-text prp-z-[100] hover:prp-cursor-pointer prp-w-full prp-pr-4",
-              segment.reference_id === selectedSegment.reference_id ? "prp-bg-indigo-50 prp-text-indigo-700" : "hover:prp-bg-gray-100 prp-bg-white prp-text-gray-900"
-            )
-          },
-          /* @__PURE__ */ React4.createElement(
-            FaCheck,
+        segmentList == null ? void 0 : segmentList.map(
+          (segment) => /* @__PURE__ */ React4.createElement(
+            ListboxOption,
             {
+              key: segment._id,
+              value: segment,
               className: clsx(
-                "prp-size-3 prp-shrink-0 prp-mr-1",
-                segment.reference_id === selectedSegment.reference_id ? "prp-visible" : "prp-invisible"
+                "prp-flex prp-items-center prp-p-2  prp-regular-text prp-z-[100] hover:prp-cursor-pointer prp-w-full prp-pr-4",
+                segment._id === selectedSegment._id ? "prp-bg-indigo-50 prp-text-indigo-700" : "hover:prp-bg-gray-100 prp-bg-white prp-text-gray-900"
               )
-            }
-          ),
-          /* @__PURE__ */ React4.createElement(
-            "div",
-            {
-              style: {
-                textWrap: "nowrap",
-                textOverflow: "ellipsis",
-                textAlign: "left"
-              },
-              className: "prp-w-full prp-overflow-hidden prp-mr-auto"
             },
-            segment.body
+            /* @__PURE__ */ React4.createElement(
+              FaCheck,
+              {
+                className: clsx(
+                  "prp-size-3 prp-shrink-0 prp-mr-1",
+                  segment._id === selectedSegment._id ? "prp-visible" : "prp-invisible"
+                )
+              }
+            ),
+            /* @__PURE__ */ React4.createElement(
+              "div",
+              {
+                style: {
+                  textWrap: "nowrap",
+                  textOverflow: "ellipsis",
+                  textAlign: "left"
+                },
+                className: "prp-w-full prp-overflow-hidden prp-mr-auto"
+              },
+              segment.name
+            )
           )
-        ))
+        )
       )
     )), /* @__PURE__ */ React4.createElement("div", { className: "prp-flex prp-flex-initial prp-flex-col md:prp-flex-row prp-gap-2 md:prp-gap-4" }, /* @__PURE__ */ React4.createElement("div", { className: "prp-regular-text prp-text-white prp-items-center prp-gap-2 prp-hidden lg:prp-flex" }, /* @__PURE__ */ React4.createElement("span", { className: "prp-pb-0.5 prp-text-xs md:prp-text-base prp-block md:prp-hidden xl:prp-block" }, "Show A/B variant"), /* @__PURE__ */ React4.createElement(
       InfoPopover,
@@ -303,7 +306,7 @@ function PreprPreviewBar(props) {
       ResetButton,
       {
         handleClick: handleReset,
-        enabled: selectedSegment.reference_id || selectedVariant !== "A"
+        enabled: selectedSegment._id !== "null" || selectedVariant !== "A"
       }
     ))))
   ), /* @__PURE__ */ React4.createElement(

diff --git a/dist/components.mjs.map b/dist/components.mjs.map
diff --git a/dist/index.d.mts b/dist/index.d.mts
@@ -1,4 +1,5 @@
 import { NextResponse } from 'next/server';
+import { P as PreprSegment } from './types-DmITW6Tn.mjs';
 
 /**
  *
@@ -24,29 +25,12 @@ declare function getActiveVariant(): Promise<string>;
 declare function getPreprHeaders(): Promise<{
     [key: string]: string;
 }>;
-type PreprSegment = {
-    id: string;
-    created_on: string;
-    changed_on: string;
-    synced_on: string;
-    label: string;
-    reference_id: string;
-    body: string;
-    query: string;
-    count: number;
-};
-type PreprSegmentsResponse = {
-    total: number;
-    skip: number;
-    limit: number;
-    items: PreprSegment[];
-};
 /**
  * Fetches the segments from the Prepr API
  * @param token Prepr access token with scope 'segments'
- * @returns Object with total, skip, limit and items
+ * @returns Array of PreprSegmentResponse
  */
-declare function getPreprEnvironmentSegments(token: string): Promise<PreprSegmentsResponse>;
+declare function getPreprEnvironmentSegments(token: string): Promise<PreprSegment[]>;
 /**
  * Fetches all the necessary previewbar props
  * @param token Prepr access token with scope 'segments'
@@ -55,7 +39,7 @@ declare function getPreprEnvironmentSegments(token: string): Promise<PreprSegmen
 declare function getPreviewBarProps(token: string): Promise<{
     activeSegment: string | null;
     activeVariant: string | null;
-    data: PreprSegmentsResponse;
+    data: PreprSegment[];
 }>;
 
-export { PreprMiddleware, type PreprSegment, type PreprSegmentsResponse, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps };
+export { PreprMiddleware, getActiveSegment, getActiveVariant, getPreprEnvironmentSegments, getPreprHeaders, getPreprUUID, getPreviewBarProps };