fix: made live preview as default option

Author: Amitkanswal

pages/about-us.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import getConfig from 'next/config';
 import { onEntryChange } from '../sdk-plugin/index';
 import Layout from '../components/layout';
 import RenderComponents from '../components/render-components';
@@ -8,7 +9,7 @@ export default function About(props) {
   const {
     header, footer, result, entryUrl,
   } = props;
-
+  const { CONTENTSTACK_LIVE_PREVIEW } = getConfig().publicRuntimeConfig;
   const [getHeader, setHeader] = useState(header);
   const [getFooter, setFooter] = useState(footer);
   const [getEntry, setEntry] = useState(result);
@@ -28,7 +29,9 @@ export default function About(props) {
   }
 
   useEffect(() => {
-    onEntryChange(() => fetchData());
+    onEntryChange(() => {
+      if (CONTENTSTACK_LIVE_PREVIEW === 'true') fetchData();
+    });
   }, []);
 
   return (

pages/blog/[...post].jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import getConfig from 'next/config';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Layout from '../../components/layout';
@@ -17,7 +18,7 @@ export default function BlogPost(props) {
   const {
     header, banner, footer, result, entryUrl,
   } = props;
-
+  const { CONTENTSTACK_LIVE_PREVIEW } = getConfig().publicRuntimeConfig;
   const [getHeader, setHeader] = useState(header);
   const [getFooter, setFooter] = useState(footer);
   const [getEntry, setEntry] = useState(result);
@@ -40,7 +41,9 @@ export default function BlogPost(props) {
   }
 
   useEffect(() => {
-    onEntryChange(() => fetchData());
+    onEntryChange(() => {
+      if (CONTENTSTACK_LIVE_PREVIEW === 'true') fetchData();
+    });
   }, []);
 
   return (

pages/blog/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import getConfig from 'next/config';
 import moment from 'moment';
 import Link from 'next/link';
 import parse from 'html-react-parser';
@@ -19,7 +20,7 @@ export default function Blog(props) {
     archived, blog, blogList, header, footer, entryUrl,
   } = props;
   const list = blogList.concat(archived);
-
+  const { CONTENTSTACK_LIVE_PREVIEW } = getConfig().publicRuntimeConfig;
   const [getHeader, setHeader] = useState(header);
   const [getFooter, setFooter] = useState(footer);
   const [getArchived, setArchived] = useState(archived);
@@ -41,7 +42,9 @@ export default function Blog(props) {
   }
 
   useEffect(() => {
-    onEntryChange(() => fetchData());
+    onEntryChange(() => {
+      if (CONTENTSTACK_LIVE_PREVIEW === 'true') fetchData();
+    });
   }, []);
 
   return (

pages/contact-us.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import getConfig from 'next/config';
 import { onEntryChange } from '../sdk-plugin/index';
 import Layout from '../components/layout';
 import RenderComponents from '../components/render-components';
@@ -8,7 +9,7 @@ export default function Contact(props) {
   const {
     header, footer, result, entryUrl,
   } = props;
-
+  const { CONTENTSTACK_LIVE_PREVIEW } = getConfig().publicRuntimeConfig;
   const [getHeader, setHeader] = useState(header);
   const [getFooter, setFooter] = useState(footer);
   const [getEntry, setEntry] = useState(result);
@@ -28,7 +29,9 @@ export default function Contact(props) {
   }
 
   useEffect(() => {
-    onEntryChange(() => fetchData());
+    onEntryChange(() => {
+      if (CONTENTSTACK_LIVE_PREVIEW === 'true') fetchData();
+    });
   }, []);
 
   return (

pages/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import getConfig from 'next/config';
 import { onEntryChange } from '../sdk-plugin/index';
 import Layout from '../components/layout';
 import RenderComponents from '../components/render-components';
@@ -8,7 +9,7 @@ export default function Home(props) {
   const {
     header, footer, result, entryUrl,
   } = props;
-
+  const { CONTENTSTACK_LIVE_PREVIEW } = getConfig().publicRuntimeConfig;
   const [getHeader, setHeader] = useState(header);
   const [getFooter, setFooter] = useState(footer);
   const [getEntry, setEntry] = useState(result);
@@ -28,7 +29,9 @@ export default function Home(props) {
   }
 
   useEffect(() => {
-    onEntryChange(fetchData);
+    onEntryChange(() => {
+      if (CONTENTSTACK_LIVE_PREVIEW === 'true') fetchData();
+    });
   }, []);
 
   return (

sdk-plugin/index.js

@@ -20,24 +20,19 @@ const Stack = contentstack.Stack({
     enable: true,
     management_token: envConfig.CONTENTSTACK_MANAGEMENT_TOKEN,
     host: envConfig.CONTENTSTACK_API_HOST,
-    ssr: true,
-  },
-  stackDetails: {
-    apiKey: envConfig.CONTENTSTACK_API_KEY,
-    environment: envConfig.CONTENTSTACK_ENVIRONMENT,
-  },
-  clientUrlParams: {
-    protocol: 'https',
-    host: envConfig.CONTENTSTACK_APP_HOST,
-    port: 443,
   },
 });
 
 if (envConfig.CONTENTSTACK_API_HOST) {
   Stack.setHost(envConfig.CONTENTSTACK_API_HOST);
 }
-ContentstackLivePreview.init(Stack, {
-  enable: envConfig.CONTENTSTACK_LIVE_PREVIEW,
+
+ContentstackLivePreview.init({
+  stackSdk: Stack,
+  clientUrlParams: {
+    host: envConfig.CONTENTSTACK_APP_HOST,
+  },
+  ssr: false,
 });
 
 export const { onEntryChange } = ContentstackLivePreview;