feat: add integration with AsyncAPI Server API

src/components/Editor/EditorDropdown.tsx

@@ -4,6 +4,7 @@ import { FaEllipsisH } from 'react-icons/fa';
 
 import {
   ConvertModal,
+  GeneratorModal,
   ImportBase64Modal,
   ImportURLModal,
 } from '../Modals';
@@ -177,6 +178,11 @@ export const EditorDropdown: React.FunctionComponent<EditorDropdownProps> = () =
             <ImportBase64Modal />
           </li>
         </div>
+        <div className="border-b border-gray-700">
+          <li className="hover:bg-gray-900">
+            <GeneratorModal />
+          </li>
+        </div>
         <div className="border-b border-gray-700">
           <li className="hover:bg-gray-900">
             {saveFileButton}

src/components/Modals/GeneratorModal.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { ConfirmModal } from './index';
+
+import { GeneratorService, ServerAPIService } from '../../services';
+
+export const GeneratorModal: React.FunctionComponent = () => {
+  const [template, setTemplate] = useState('');
+
+  const onSubmit = () => {
+    toast.promise(ServerAPIService.generate({ template }), {
+      loading: 'Generating...',
+      success: (
+        <div>
+          <span className="block text-bold">
+            Succesfully generated!
+          </span>
+        </div>
+      ),
+      error: (
+        <div>
+          <span className="block text-bold text-red-400">
+            Failed to generate.
+          </span>
+        </div>
+      ),
+    });
+  };
+
+  return (
+    <ConfirmModal
+      title="Generate template based on AsyncAPI document"
+      confirmText="Generate"
+      confirmDisabled={!template}
+      opener={
+        <button
+          type="button"
+          className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
+          title="Generate template"
+        >
+          Generate template
+        </button>
+      }
+      onSubmit={onSubmit}
+    >
+      <div>
+        <div className="flex content-center justify-center mt-4">
+          <label
+            htmlFor="template"
+            className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
+          >
+            Template:
+          </label>
+          <select
+            name="template"
+            className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-pink-500 focus:border-pink-500 rounded-md"
+            onChange={e => {
+              setTemplate(e.target.value);
+            }}
+            value={template}
+          >
+            <option value="">Please Select</option>
+            {Object.entries(GeneratorService.getTemplates()).map(([shortName, template]) => (
+              <option key={shortName} value={template}>
+                {shortName}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+};

src/components/Modals/index.tsx

@@ -1,5 +1,6 @@
 export * from './ConfirmModal';
 export * from './ConvertModal';
 export * from './ConvertToLatestModal';
+export * from './GeneratorModal';
 export * from './ImportBase64Modal';
 export * from './ImportURLModal';

src/services/generator.service.ts

@@ -0,0 +1,8 @@
+export class GeneratorService {
+  static getTemplates() {
+    return {
+      'html-template': '@asyncapi/html-template',
+      'markdown-template': '@asyncapi/markdown-template',
+    };
+  }
+}

src/services/index.ts

@@ -1,5 +1,7 @@
 export * from './editor.service';
 export * from './format.service';
+export * from './generator.service';
 export * from './monaco.service';
 export * from './navigation.service';
+export * from './server-api.service';
 export * from './specification.service';

src/services/server-api.service.ts

@@ -0,0 +1,30 @@
+import fileDownload from 'js-file-download';
+
+import state from '../state';
+
+export class ServerAPIService {
+  static serverPath = 'http://localhost:5000';
+
+  static async generate(data: {
+    template: string,
+  }) {
+    const editorState = state.editor;
+
+    return fetch(`${this.serverPath}/generate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        ...data,
+        templateParams: {},
+        asyncapi: editorState.editorValue.get(),
+      }),
+    })
+      .then(response => response.blob())
+      .then(zipFile => {
+        console.log(zipFile);
+        fileDownload(zipFile, 'asyncapi.zip');
+      });
+  }
+}