From 4d13d8f833ea98e84578cb2a77ddd6862eb7e6b0 Mon Sep 17 00:00:00 2001 From: Rajnish Dargan Date: Fri, 11 Oct 2024 11:13:58 +0530 Subject: [PATCH 1/3] Issue #PS-2166 feat: Fix app build --- src/components/GenericEditor.tsx | 217 ++++++++++++++-------------- src/pages/upload-editor.tsx | 7 +- src/services/LocalStorageService.ts | 18 ++- 3 files changed, 124 insertions(+), 118 deletions(-) diff --git a/src/components/GenericEditor.tsx b/src/components/GenericEditor.tsx index 8153ad4..f7beace 100644 --- a/src/components/GenericEditor.tsx +++ b/src/components/GenericEditor.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from "react"; import { useRouter } from 'next/router'; import $ from 'jquery'; import _ from 'lodash'; @@ -7,125 +7,126 @@ import 'izimodal/js/iziModal.js'; import editorConfig from './editor.config.json'; import { getLocalStoredUserData } from "@/services/LocalStorageService"; +const GenericEditor: React.FC = () => { + let userId: any; + const router = useRouter(); + const { identifier } = router.query; + const [showLoader, setShowLoader] = useState(true); + const buildNumber = ''; + const extContWhitelistedDomains = 'youtube.com,youtu.be'; + const videoMaxSize = "150"; + const defaultContentFileSize = "150"; -const GenericEditor = () => { - const userId = getLocalStoredUserData(); - const router = useRouter(); - const { identifier } = router.query; - const [showLoader, setShowLoader] = useState(true); - const buildNumber = ''; - const extContWhitelistedDomains = 'youtube.com,youtu.be'; - const videoMaxSize = "150"; - const defaultContentFileSize = "150"; + useEffect(() => { + userId = getLocalStoredUserData(); + if (typeof window !== 'undefined') { + console.log('editorConfig ==>', editorConfig); + getContentDetails(identifier) + .then((data: any) => { + initEditor(); + setWindowContext(data); + setWindowConfig(); + console.log('window.config ==>', window.config); + console.log('window.context ==>', window.context); + $('#genericEditor').iziModal('open'); + setShowLoader(false); + }) + .catch((error) => { + console.error('Error:', error); + closeModal(); + }); + } + }, [identifier]); - useEffect(() => { - if (typeof window !== 'undefined') { - console.log('editorConfig ==>', editorConfig); - getContentDetails(identifier) - .then((data: any) => { - initEditor(); - setWindowContext(data); - setWindowConfig(); - console.log('window.config ==>', window.config); - console.log('window.context ==>', window.context); - $('#genericEditor').iziModal('open'); - setShowLoader(false); - }) - .catch((error) => { - console.error('Error:', error); - closeModal(); - }); - } - }, [identifier]); + const getContentDetails = async (contentId: any) => { + if (!contentId) { + return {}; // Return empty object if contentId is undefined + } - const getContentDetails = async (contentId: any) => { - if (!contentId) { - return {}; // Return empty object if contentId is undefined - } + try { + const response = await fetch(`/action/content/v3/read/${contentId}?fields=createdBy,status,mimeType,contentType,resourceType,collaborators,contentDisposition,primaryCategory,framework,targetFWIds&mode=edit`); - try { - const response = await fetch(`/action/content/v3/read/${contentId}?fields=createdBy,status,mimeType,contentType,resourceType,collaborators,contentDisposition,primaryCategory,framework,targetFWIds&mode=edit`); + if (!response.ok) { + throw new Error('Failed to fetch content'); + } - if (!response.ok) { - throw new Error('Failed to fetch content'); - } + const data = await response.json(); + return data.result.content; + } catch (err: any) { + console.error(err); + return null; + } + }; - const data = await response.json(); - return data.result.content; - } catch (err: any) { - console.error(err); - return null; - } - }; + // Initialize the modal and open iframe + const initEditor = () => { + if (typeof window !== 'undefined') { + $('#genericEditor').iziModal({ + title: '', + iframe: true, + iframeURL: `generic-editor/index.html?${buildNumber}`, + navigateArrows: false, + fullscreen: true, + openFullscreen: true, + closeOnEscape: true, + overlayClose: false, + overlay: false, + history: false, + closeButton: true, + onClosing: () => { + closeModal(); + } + }); + } + }; - // Initialize the modal and open iframe - const initEditor = () => { - if (typeof window !== 'undefined') { - $('#genericEditor').iziModal({ - title: '', - iframe: true, - iframeURL: `generic-editor/index.html?${buildNumber}`, - navigateArrows: false, - fullscreen: true, - openFullscreen: true, - closeOnEscape: true, - overlayClose: false, - overlay: false, - history: false, - closeButton: true, - onClosing: () => { - closeModal(); + // Set window context for the iframe + const setWindowContext = (data: any) => { + if (typeof window !== 'undefined') { + window['context'] = _.cloneDeep(editorConfig.GENERIC_EDITOR.WINDOW_CONTEXT); + if (identifier) { + window['context'].contentId = identifier; + } + window['context'].user.id = userId || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" + window['context'].uid = userId || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" } - }); - } - }; + }; - // Set window context for the iframe - const setWindowContext = (data: any) => { - if (typeof window !== 'undefined') { - window['context'] = _.cloneDeep(editorConfig.GENERIC_EDITOR.WINDOW_CONTEXT); - if (identifier) { - window['context'].contentId = identifier; - } - window['context'].user.id = userId || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" - window['context'].uid = userId || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" - } - }; + // Set window config for the iframe + const setWindowConfig = () => { + if (typeof window !== 'undefined') { + window['config'] = _.cloneDeep(editorConfig.GENERIC_EDITOR.WINDOW_CONFIG); + window['config'].build_number = buildNumber; + window['config'].headerLogo = 'https://staging.sunbirded.org/assets/images/sunbird_logo.png'; + window['config'].lock = {}; + window['config'].extContWhitelistedDomains = extContWhitelistedDomains; + window['config'].enableTelemetryValidation = false; + window['config'].videoMaxSize = videoMaxSize; + window['config'].defaultContentFileSize = defaultContentFileSize; + window['config'].cloudStorage = { + provider: 'aws', + presigned_headers: {} + }; + } + }; - // Set window config for the iframe - const setWindowConfig = () => { - if (typeof window !== 'undefined') { - window['config'] = _.cloneDeep(editorConfig.GENERIC_EDITOR.WINDOW_CONFIG); - window['config'].build_number = buildNumber; - window['config'].headerLogo = 'https://staging.sunbirded.org/assets/images/sunbird_logo.png'; - window['config'].lock = {}; - window['config'].extContWhitelistedDomains = extContWhitelistedDomains; - window['config'].enableTelemetryValidation = false; - window['config'].videoMaxSize = videoMaxSize; - window['config'].defaultContentFileSize = defaultContentFileSize; - window['config'].cloudStorage = { - provider: 'aws', - presigned_headers: {} - }; - } - }; + // Function to close the modal and navigate away + const closeModal = () => { + setShowLoader(false); + const editorElement = document.getElementById('genericEditor'); + if (editorElement) { + editorElement.remove(); + } + router.push('/'); + }; - // Function to close the modal and navigate away - const closeModal = () => { - setShowLoader(false); - const editorElement = document.getElementById('genericEditor'); - if (editorElement) { - editorElement.remove(); - } - router.push('/'); - }; + return ( +
+
+ {showLoader &&
Loading.....
} +
+ ); - return ( -
-
- {showLoader &&
Loading.....
} -
- ); }; export default GenericEditor; diff --git a/src/pages/upload-editor.tsx b/src/pages/upload-editor.tsx index 31bb0f1..bf5b6bb 100644 --- a/src/pages/upload-editor.tsx +++ b/src/pages/upload-editor.tsx @@ -1,5 +1,8 @@ -import React from "react"; -import GenericEditor from "../components/GenericEditor"; +import dynamic from 'next/dynamic'; + +const GenericEditor = dynamic(() => import('../components/GenericEditor'), { + ssr: false, +}); const UploadEditor = () => { return ; diff --git a/src/services/LocalStorageService.ts b/src/services/LocalStorageService.ts index eab96a1..7f3ad45 100644 --- a/src/services/LocalStorageService.ts +++ b/src/services/LocalStorageService.ts @@ -1,13 +1,15 @@ export const getLocalStoredUserData = () => { - try { - const userId = localStorage.getItem("userId"); - - if (userId) { - return userId; + if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') { + try { + const userId = localStorage.getItem("userId"); + return userId ? userId : null; + } catch (error) { + console.error("Error retrieving user data from local storage:", error); + return null; } - return null; - } catch (error) { - console.error("Error retrieving user data from local storage:", error); + } else { + // Running in SSR, return null + console.warn("Local storage is not available (SSR)"); return null; } }; From 604f499cb0ecd17bc7aa8f6459717587ccd87c39 Mon Sep 17 00:00:00 2001 From: Rajnish Dargan Date: Fri, 11 Oct 2024 11:24:14 +0530 Subject: [PATCH 2/3] Issue #PS-2166 feat: Fix app build --- src/components/GenericEditor.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/GenericEditor.tsx b/src/components/GenericEditor.tsx index f7beace..b8dad73 100644 --- a/src/components/GenericEditor.tsx +++ b/src/components/GenericEditor.tsx @@ -8,7 +8,6 @@ import editorConfig from './editor.config.json'; import { getLocalStoredUserData } from "@/services/LocalStorageService"; const GenericEditor: React.FC = () => { - let userId: any; const router = useRouter(); const { identifier } = router.query; const [showLoader, setShowLoader] = useState(true); @@ -18,7 +17,6 @@ const GenericEditor: React.FC = () => { const defaultContentFileSize = "150"; useEffect(() => { - userId = getLocalStoredUserData(); if (typeof window !== 'undefined') { console.log('editorConfig ==>', editorConfig); getContentDetails(identifier) @@ -87,8 +85,8 @@ const GenericEditor: React.FC = () => { if (identifier) { window['context'].contentId = identifier; } - window['context'].user.id = userId || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" - window['context'].uid = userId || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" + window['context'].user.id = getLocalStoredUserData() || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" + window['context'].uid = getLocalStoredUserData() || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" } }; From 5984331a97109cde6e19e305f3c9ba2bb33658cd Mon Sep 17 00:00:00 2001 From: Rajnish Dargan Date: Fri, 11 Oct 2024 11:28:21 +0530 Subject: [PATCH 3/3] Issue #PS-2166 feat: Fix sonar issues --- src/components/GenericEditor.tsx | 4 ++-- src/services/LocalStorageService.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/GenericEditor.tsx b/src/components/GenericEditor.tsx index b8dad73..6df07cc 100644 --- a/src/components/GenericEditor.tsx +++ b/src/components/GenericEditor.tsx @@ -85,8 +85,8 @@ const GenericEditor: React.FC = () => { if (identifier) { window['context'].contentId = identifier; } - window['context'].user.id = getLocalStoredUserData() || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" - window['context'].uid = getLocalStoredUserData() || "5afb0c71-5e85-46f6-8780-3059cbb7bbf9" + window['context'].user.id = getLocalStoredUserData() ?? "5afb0c71-5e85-46f6-8780-3059cbb7bbf9"; + window['context'].uid = getLocalStoredUserData() ?? "5afb0c71-5e85-46f6-8780-3059cbb7bbf9"; } }; diff --git a/src/services/LocalStorageService.ts b/src/services/LocalStorageService.ts index 7f3ad45..2595875 100644 --- a/src/services/LocalStorageService.ts +++ b/src/services/LocalStorageService.ts @@ -2,7 +2,7 @@ export const getLocalStoredUserData = () => { if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') { try { const userId = localStorage.getItem("userId"); - return userId ? userId : null; + return userId ?? null; } catch (error) { console.error("Error retrieving user data from local storage:", error); return null;