From e48a9535efe85becac9e461c1f6c7a73b80ad035 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 7 Feb 2024 15:10:02 +0100
Subject: [PATCH] fix: add sdk as script

---
 app/[lang]/(preview)/layout.tsx               | 13 ++--
 app/[lang]/(preview)/preview/page.tsx         |  6 ++
 components/Current/LivePreview/index.tsx      | 13 ++++
 lib/previewRequest.ts                         | 60 ++++++++++---------
 middleware.ts                                 |  6 +-
 types/requests/blocks/hero.ts                 |  2 +-
 .../utils/{pagelink.ts => pageLink.ts}        |  0
 7 files changed, 62 insertions(+), 38 deletions(-)
 create mode 100644 components/Current/LivePreview/index.tsx
 rename types/requests/utils/{pagelink.ts => pageLink.ts} (100%)
diff --git a/app/[lang]/(preview)/layout.tsx b/app/[lang]/(preview)/layout.tsx
index 7d3d7086f..ab1c948e8 100644
--- a/app/[lang]/(preview)/layout.tsx
+++ b/app/[lang]/(preview)/layout.tsx
@@ -8,15 +8,13 @@ import SkipToMainContent from "@/components/SkipToMainContent";
 
 import type { Metadata } from "next";
 import type { LangParams, LayoutArgs } from "@/types/params";
-import ContentstackLivePreview from "@contentstack/live-preview-utils";
+import InitLivePreview from "@/components/Current/LivePreview";
 
 export const metadata: Metadata = {
   description: "New web",
   title: "Scandic Hotels New Web",
 };
 
-ContentstackLivePreview.init();
-
 export default function RootLayout({
   children,
   params,
@@ -24,10 +22,10 @@ export default function RootLayout({
   return (
     <html lang={params.lang}>
       <head>
-        <Script
+        {/* <Script
           data-cookieconsent="ignore"
           src="/Static/dist/js/head.js?85c84c9e24ae8da3e7af"
-        />
+        /> */}
         <Script
           data-cookieconsent="ignore"
           src="/Static/dist/js/inline.js?00133e5a37de35c51a5d"
@@ -48,13 +46,14 @@ export default function RootLayout({
           data-cookieconsent="ignore"
           src="/Static/dist/js/ng/main.js?1705409330990"
         />
-        <Script
+        {/* <Script
           data-cookieconsent="ignore"
           src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
           strategy="lazyOnload"
-        />
+        /> */}
       </head>
       <body>
+        <InitLivePreview />
         <LangPopup lang={params.lang} />
         <SkipToMainContent lang={params.lang} />
         {children}
diff --git a/app/[lang]/(preview)/preview/page.tsx b/app/[lang]/(preview)/preview/page.tsx
index 0ff60d881..63b3bae06 100644
--- a/app/[lang]/(preview)/preview/page.tsx
+++ b/app/[lang]/(preview)/preview/page.tsx
@@ -10,6 +10,7 @@ import Hero from "@/components/Current/Hero";
 
 import type { PageArgs, LangParams, UriParams } from "@/types/params";
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
 
 export default async function CurrentContentPage({
   params,
@@ -17,6 +18,7 @@ export default async function CurrentContentPage({
 }: PageArgs<LangParams, UriParams>) {
   try {
     console.log({ searchParams });
+    ContentstackLivePreview.setConfigFromParams(searchParams);
     if (!searchParams.uri) {
       throw new Error("Bad URI");
     }
@@ -26,6 +28,10 @@ export default async function CurrentContentPage({
       { locale: params.lang, url: searchParams.uri }
     );
 
+    if (!response) {
+      return <h1>No Hash recieved! Hash: {ContentstackLivePreview.hash}</h1>;
+    }
+
     if (!response.data?.all_current_blocks_page?.total) {
       console.log("#### DATA ####");
       console.log(response.data);
diff --git a/components/Current/LivePreview/index.tsx b/components/Current/LivePreview/index.tsx
new file mode 100644
index 000000000..e26f47162
--- /dev/null
+++ b/components/Current/LivePreview/index.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+import { useEffect } from "react";
+
+export default function InitLivePreview() {
+  useEffect(() => {
+    console.log("INIT");
+    ContentstackLivePreview.init();
+  }, []);
+
+  return null;
+}
diff --git a/lib/previewRequest.ts b/lib/previewRequest.ts
index 605836c90..c1de460f5 100644
--- a/lib/previewRequest.ts
+++ b/lib/previewRequest.ts
@@ -10,34 +10,38 @@ import ContentstackLivePreview from "@contentstack/live-preview-utils";
 export async function previewRequest<T>(
   query: string | DocumentNode,
   variables?: {}
-): Promise<Data<T>> {
-  try {
-    const hash = ContentstackLivePreview.hash;
+): Promise<Data<T> | null> {
+  const hash = ContentstackLivePreview.hash;
 
-    if (!env.CMS_PREVIEW_URL || !env.CMS_PREVIEW_TOKEN) {
-      throw new Error("No preview URL");
-    }
-    const headers = new Headers();
-
-    headers.append("access_token", env.CMS_ACCESS_TOKEN);
-    headers.append("Content-Type", "application/json");
-    headers.append("preview_token", env.CMS_PREVIEW_TOKEN);
-    headers.append("live_preview", hash);
-
-    const response = await fetch(env.CMS_PREVIEW_URL.toString(), {
-      method: "POST",
-      headers,
-      body: JSON.stringify({
-        query,
-        variables,
-      }),
-    });
-
-    const { data } = await response.json();
-
-    return data as Data<T>;
-  } catch (error) {
-    console.error(error);
-    throw new Error("Something went wrong");
+  if (!hash) {
+    return null;
   }
+
+  if (!env.CMS_PREVIEW_URL || !env.CMS_PREVIEW_TOKEN) {
+    throw new Error("No preview URL");
+  }
+  const headers = new Headers();
+
+  headers.append("access_token", env.CMS_ACCESS_TOKEN);
+  headers.append("Content-Type", "application/json");
+  headers.append("preview_token", env.CMS_PREVIEW_TOKEN);
+  headers.append("live_preview", hash);
+
+  const response = await fetch(env.CMS_PREVIEW_URL, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  });
+
+  if (!response.ok) {
+    console.log(response);
+    throw new Error("Cound not fetch preview content");
+  }
+
+  const { data } = await response.json();
+
+  return data as Data<T>;
 }
diff --git a/middleware.ts b/middleware.ts
index a1411be5f..14c780c71 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -34,16 +34,18 @@ export async function middleware(request: NextRequest) {
   );
 
   const searchParams = new URLSearchParams(request.nextUrl.searchParams);
-  searchParams.set("uri", pathNameWithoutLocale);
 
   if (request.nextUrl.pathname.includes("preview")) {
+    searchParams.set("uri", pathNameWithoutLocale.replace("/preview", ""));
+
+
     console.log("IN PREVIEW! Search params: ", request.nextUrl.searchParams);
 
-    ContentstackLivePreview.setConfigFromParams(request.nextUrl.searchParams);
     return NextResponse.rewrite(
       new URL(`/${locale}/preview?${searchParams.toString()}`, request.url)
     );
   }
+  searchParams.set("uri", pathNameWithoutLocale);
 
   switch (contentType) {
     case "currentContentPage":
diff --git a/types/requests/blocks/hero.ts b/types/requests/blocks/hero.ts
index 7c6762c70..be8b1bbb2 100644
--- a/types/requests/blocks/hero.ts
+++ b/types/requests/blocks/hero.ts
@@ -1,7 +1,7 @@
 import type { SysAsset } from "../utils/asset"
 import type { Edges } from "../utils/edges"
 import type { ExternalLink } from "../utils/externalLink"
-import type { PageLink } from "../utils/pagelink";
+import type { PageLink } from "../utils/pageLink";
 import type { Typename } from "../utils/typename"
 
 export type Hero = {
diff --git a/types/requests/utils/pagelink.ts b/types/requests/utils/pageLink.ts
similarity index 100%
rename from types/requests/utils/pagelink.ts
rename to types/requests/utils/pageLink.ts
