From 3a6a5f8632e68062dbd9444eff7a04b878d3bcf0 Mon Sep 17 00:00:00 2001
From: dialmedu <diegomesa.1414@gmail.com>
Date: Sun, 26 Nov 2023 23:36:20 -0500
Subject: [PATCH] Refactoring, create component OpenInCodepenio

---
 frontend/src/App.tsx                        |  44 +-------
 frontend/src/components/OpenInCodepenio.tsx | 119 ++++++++++++++++++++
 2 files changed, 121 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/OpenInCodepenio.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e449b7c..94c7de6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,6 +31,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 import html2canvas from "html2canvas";
 import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
+import OpenInCodepenio from "./components/OpenInCodepenio";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@@ -97,45 +98,6 @@ function App() {
     setAppState(AppState.CODE_READY);
   };
 
-  function doOpenInCodepenio(){
-    const code = generatedCode
-
-    var form = document.createElement('form');
-    form.setAttribute('method', 'POST');
-    form.setAttribute('action', 'https://codepen.io/pen/define');
-    form.setAttribute('target', '_blank'); // open in new window
-
-    const data = { 
-      html: code,
-      editors: "100", // 1:Open html, 0:close CSS, 0:Close Js
-      layout: "left",
-      css_external: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-        + (generatedCode.includes('<ion-') ? ',https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css': '')
-      ,
-      js_external: "https://cdn.tailwindcss.com " 
-        + (generatedCode.includes('<ion-') ? ',https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js': '')
-      ,
-    }
-    // test have html to json
-    try {
-      JSON.stringify(data)
-    } catch (error) {
-      data.html = "<!-- Copy your code here -->"
-    }
-    // Crear un input tipo hidden
-    var input = document.createElement('input');
-    input.setAttribute('type', 'hidden');
-    input.setAttribute('name', 'data');
-    input.setAttribute('value', JSON.stringify(data));
-
-    // Agregar el input al formulario
-    form.appendChild(input);
-
-    // Agregar el formulario al documento y enviarlo automáticamente
-    document.body.appendChild(form);
-    form.submit();
-  }
-
   function doGenerateCode(params: CodeGenerationParams) {
     setExecutionConsole([]);
     setAppState(AppState.CODING);
@@ -361,9 +323,7 @@ function App() {
                     >
                        Copy Code <FaCopy className="ml-2" />
                     </span>
-                    <Button onClick={doOpenInCodepenio} className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none">
-                      Open in <img src="https://assets.codepen.io/t-1/codepen-logo.svg" alt="codepen.io" className="h-4 ml-1" />
-                    </Button>
+                    <OpenInCodepenio code={generatedCode} ></OpenInCodepenio>
                   </div>
                   <CodeMirror
                     code={generatedCode}
diff --git a/frontend/src/components/OpenInCodepenio.tsx b/frontend/src/components/OpenInCodepenio.tsx
new file mode 100644
index 0000000..744f022
--- /dev/null
+++ b/frontend/src/components/OpenInCodepenio.tsx
@@ -0,0 +1,119 @@
+import { Component } from 'react';
+import { Button } from './ui/button';
+
+enum SupportType {
+  HTML = 'html',
+  IONIC = 'ionic'
+}
+
+enum LibraryType {
+  css = 'css',
+  js = 'js',
+}
+
+interface OpenInCodepenioProps {
+  code: string;
+  support?: SupportType;
+  onDoOpen?: () => void;
+}
+
+interface Library {
+  [LibraryType.css]: string[],
+  [LibraryType.js]: string[],
+  validate: (support: SupportType, code: String) => Boolean
+}
+
+/**
+ * Component show button do open in new windows to CodePen Editor, this component add support
+ * of diferrent tecnologies do use `libraries` property.
+ * @component
+ * Redirect to codepen.io
+ * @param { OpenInCodepenioProps } props 
+ * @property {string} code  - this generated code.
+ * @property {Function} onDoOpen - handle after open and redirect to Codepen Editor
+ * @property {Record} libraries  - add support diferent tecnologies adding css, js libraries 
+ * to css_external and js_external atributte of Codepen Editor.
+ */
+class OpenInCodepenio extends Component<OpenInCodepenioProps> {
+
+  libraries: Record<string, Library> = {
+    [SupportType.HTML] : {
+      css: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'],
+      js: ['https://cdn.tailwindcss.com'],
+      validate: (support) => { 
+        return support == SupportType.HTML 
+      }
+    },
+    [SupportType.IONIC] : {
+      css: [
+        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css',
+        'https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css'],
+      js: [
+        'https://cdn.tailwindcss.com',
+        'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js', 
+        'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js'
+      ],
+      validate: (support, code) => { 
+        return support == SupportType.IONIC || code.includes('<ion-') 
+      }
+    },
+  }
+
+  getExternalLibraries = (type: LibraryType): string => {
+    let library: string[] = []
+    const { code, support = SupportType.HTML } = this.props;
+    debugger
+    Object.values(this.libraries).forEach((value: Library) => {
+      if( value.validate(support, code)){
+        library = value[type]
+      }
+    });
+
+    return library.join(',');
+  }
+
+  doOpenInCodepenio =  () => {
+      const { code, onDoOpen } = this.props; 
+      var form = document.createElement('form');
+      form.setAttribute('method', 'POST');
+      form.setAttribute('action', 'https://codepen.io/pen/define');
+      form.setAttribute('target', '_blank'); // open in new window
+  
+      const data = { 
+        html: code,
+        editors: "100", // 1:Open html, 0:close CSS, 0:Close Js
+        layout: "left",
+        css_external: this.getExternalLibraries(LibraryType.css),
+        js_external: this.getExternalLibraries(LibraryType.js),
+      }
+      // test have html to json
+      try {
+        JSON.stringify({ html: data.html })
+      } catch (error) {
+        data.html = "<!-- Copy your code here -->"
+      }
+      var input = document.createElement('input');
+      input.setAttribute('type', 'hidden');
+      input.setAttribute('name', 'data');
+      input.setAttribute('value', JSON.stringify(data));
+  
+      form.appendChild(input);
+      document.body.appendChild(form);
+      form.submit();
+      if (onDoOpen) {
+        onDoOpen();
+      }
+  }
+
+  render() {    
+    return (
+      <div>
+       <Button onClick={this.doOpenInCodepenio} className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none">
+          Open in <img src="https://assets.codepen.io/t-1/codepen-logo.svg" alt="codepen.io" className="h-4 ml-1" />
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default OpenInCodepenio;