Fix #3124: Warn if a code sandbox demo is not available

primefaces · Aug 18, 2022 · 01786b3 · 01786b3
1 parent 32d3b49
commit 01786b3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/components/doc/common/docactions.js b/components/doc/common/docactions.js
@@ -2,12 +2,14 @@ import React, { useEffect, useContext } from 'react';
 import { useRef } from 'react';
 import { Button } from '../../lib/button/Button';
 import { Menu } from '../../lib/menu/Menu';
+import { Toast } from '../../lib/toast/Toast';
 import DomHandler from '../../lib/utils/DomHandler';
 import { useLiveEditor } from './liveeditor';
 import AppContentContext from '../../../components/layout/appcontentcontext';
 
 export const DocActions = (props) => {
     const menu = useRef(null);
+    const toast = useRef(null);
     const liveEditor = useRef(null);
     const context = useContext(AppContentContext);
 
@@ -20,19 +22,19 @@ export const DocActions = (props) => {
     const items = [
         {
             label: 'Hooks Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('hooks')
+            command: () => liveEditor.current.postSandboxParameters('hooks', toast)
         },
         {
             label: 'Class Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('class')
+            command: () => liveEditor.current.postSandboxParameters('class', toast)
         },
         {
             label: 'TS Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('ts')
+            command: () => liveEditor.current.postSandboxParameters('ts', toast)
         },
         {
             label: 'Browser Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('browser')
+            command: () => liveEditor.current.postSandboxParameters('browser', toast)
         }
     ];
 
@@ -61,6 +63,8 @@ export const DocActions = (props) => {
     }
 
     return (
+        <>
+        <Toast ref={toast} />
         <div className="app-demoactions flex align-items-end justify-content-end mt-3">
             <Button className="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" onClick={toggleMenu}>
                 <svg role="img" viewBox="0 0 24 24" width={17} height={17} fill={'var(--text-color-secondary)'} style={{ display: 'block' }}>
@@ -76,6 +80,7 @@ export const DocActions = (props) => {
             <Button icon="pi pi-info-circle" className="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" onClick={scrollToDocs} ></Button>
             <Menu ref={menu} model={items} popup style={{ width: '14rem' }} />
         </div>
+        </>
     )
 }
 
diff --git a/components/doc/common/liveeditor.js b/components/doc/common/liveeditor.js
@@ -382,6 +382,9 @@ ${extIndexCSS}
 
     const getSandboxParameters = (sourceType) => {
         let { name, sources, dependencies } = props;
+        if (!sources[sourceType]) {
+            return null;
+        }
         let extension = '.js';
         let serviceExtension = extension;
         let extDependencies = dependencies || {};
@@ -485,14 +488,19 @@ ${extIndexCSS}
     }
 
     return {
-        postSandboxParameters(sourceType) {
+        postSandboxParameters(sourceType, toast) {
+            const sandboxParameters = getSandboxParameters(sourceType);
+            if (!sandboxParameters) {
+                toast.current.show({severity: 'warn', summary: 'Not Available', detail: 'That code sandbox demonstration is not available!'});
+                return;
+            }
             fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
                 method: "POST",
                 headers: {
                     'Content-Type': 'application/json',
                     'Accept': 'application/json'
                 },
-                body: JSON.stringify(getSandboxParameters(sourceType))
+                body: JSON.stringify(sandboxParameters)
             })
                 .then(response => response.json())
                 .then(data => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));