Fix rendering in view mode

Author: thachnd

samples/musicfestival-frontend-react/.env

@@ -1,4 +1,4 @@
-REACT_APP_CG_PROXY_URL=http://localhost:8082/EpiServer/ContentGraph/CGProxy/Query
+REACT_APP_CG_PREVIEW_URL=https://cg.optimizely.com/content/v2
 REACT_APP_CONTENT_GRAPH_GATEWAY_URL=https://cg.optimizely.com/content/v2?auth=INPUT_SINGLE_KEY_HERE
 
 REACT_APP_LOGIN_AUTHORITY=http://localhost:8082

samples/musicfestival-frontend-react/src/App.tsx

@@ -16,7 +16,7 @@ import { BlockPage } from './pages/BlockPage';
 
 let previousSavedMessage: any = null;
 const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
-const hmacKeyUrl = process.env.REACT_APP_CG_CONTENT_URL as string
+const hmacKeyUrl = process.env.REACT_APP_CG_PREVIEW_URL as string
 
 const App = () => {
     const queryClient = useQueryClient();

samples/musicfestival-frontend-react/src/helpers/urlHelper.ts

@@ -18,9 +18,16 @@ const getImageUrl = (path = "") => {
 }
 
 const extractParams = (token: string, urlPath: string) => {
-    const base64String = token.substring(token.indexOf('.') + 1, token.lastIndexOf('.'));
-    const payload: Payload = JSON.parse(Buffer.from(base64String, 'base64').toString());
+    var payload: Payload = {
+        c_id: undefined,
+        c_ver: undefined
+    };
 
+    if (token) {
+        const base64String = token.substring(token.indexOf('.') + 1, token.lastIndexOf('.'));
+        payload = JSON.parse(Buffer.from(base64String, 'base64').toString());
+    }
+    
     let relativePath = (urlPath.length > 1 && urlPath != "/search") ? urlPath : '/en'
 
     const epiContentPrefix = "/EPiServer/CMS/Content/";
@@ -43,7 +50,10 @@ const extractParams = (token: string, urlPath: string) => {
     const urlSegments = relativePath.split('/')
     const language = urlSegments.length ? urlSegments.find(s => s.length === 2) : "en"
 
-    return { relativePath, locales: language, language, contentId: parseInt(payload.c_id.toString()) , workId: parseInt(payload.c_ver.toString()) }
+    const contentId = payload.c_id && parseInt(payload.c_id!.toString());
+    const workId = payload.c_ver && parseInt(payload.c_ver!.toString());
+
+    return { relativePath, locales: language, language, contentId: contentId, workId: workId }
 }
 
 const getRankingFromSearchParams = (searchParams: URLSearchParams): Ranking => {

samples/musicfestival-frontend-react/src/models/Payload.ts

@@ -1,4 +1,4 @@
 export interface Payload {
-    c_id: number;
-    c_ver: number;
+    c_id?: number;
+    c_ver?: number;
 }

samples/musicfestival-frontend-react/src/pages/SearchPage.tsx

@@ -21,7 +21,7 @@ import { subcribeContentSavedEvent } from "../helpers/contentSavedEvent";
 
 let previousSavedMessage: any = null;
 const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
-const hmacKeyUrl = process.env.REACT_APP_CG_CONTENT_URL as string
+const hmacKeyUrl = process.env.REACT_APP_CG_PREVIEW_URL as string
 
 function SearchPage() {
     console.log("Start")