From afda7d4259bb7f331b7faf42851d3e5f51feadb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Mon, 20 Jul 2020 22:24:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20codeout=20btn=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/demo/package.json                   |  1 +
 packages/demo/src/editor/plugins/codeout.tsx | 67 ++++++++++++--------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/demo/package.json b/packages/demo/package.json
index f5185019b..d27c683ca 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -48,6 +48,7 @@
     "@types/events": "^3.0.0",
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.2",
+    "@types/streamsaver": "^2.0.0",
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-moment-locales": "^0.1.0",
     "build-plugin-react-app": "^1.1.2",
diff --git a/packages/demo/src/editor/plugins/codeout.tsx b/packages/demo/src/editor/plugins/codeout.tsx
index 6fcaeee5b..585254ee7 100644
--- a/packages/demo/src/editor/plugins/codeout.tsx
+++ b/packages/demo/src/editor/plugins/codeout.tsx
@@ -2,25 +2,40 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 import React from 'react';
 import { Button } from '@alifd/next';
-import { PluginProps } from '@ali/lowcode-types';
+import { PluginProps, NpmInfo } from '@ali/lowcode-types';
 import { Designer } from '@ali/lowcode-designer';
 import streamSaver from 'streamsaver';
 
 import './codeout.scss';
 
+interface BasicSection {
+  componentName: string;
+  title: string;
+  description?: string;
+  docUrl?: string;
+  screenshot?: string;
+  icon?: string;
+  tags?: string[];
+  devMode?: 'proCode' | 'lowCode';
+  npm: NpmInfo;
+  [k: string]: any;
+}
+
 const CODEOUT_SERVICE_HOST = '30.8.52.239:3000';
 
 const Codeout = ({ editor }: PluginProps) => {
   const handleClick = () => {
     const designer = editor.get(Designer);
     if (designer) {
-      const assets = editor.get('assets');
-      console.log(assets.components);
+      const assets = editor.get('assets') as { components: BasicSection[] };
+      const components = assets.components;
 
-      const componentsMap = assets.components.map((c) => ({
-        componentName: c.componentName,
-        ...(c.npm || {}),
-      }));
+      const componentsMap = components
+        .filter((c) => !!c.npm)
+        .map((c) => ({
+          componentName: c.componentName,
+          ...(c.npm || {}),
+        }));
 
       const fullSchema = {
         ...designer.schema,
@@ -35,24 +50,26 @@ const Codeout = ({ editor }: PluginProps) => {
       };
 
       console.info('codeout schema:', fullSchema);
-      // fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
-      //   method: 'POST',
-      //   body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
-      //   headers: new Headers({
-      //     'Content-Type': 'application/json',
-      //   }),
-      //   mode: 'cors',
-      // }).then((res) => {
-      //   const fileStream = streamSaver.createWriteStream('demoProject.zip');
-      //   res.body.pipeTo(fileStream).then(
-      //     () => {
-      //       console.log('success');
-      //     },
-      //     (err) => {
-      //       console.log(err);
-      //     },
-      //   );
-      // });
+      fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
+        method: 'POST',
+        body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
+        headers: new Headers({
+          'Content-Type': 'application/json',
+        }),
+        mode: 'cors',
+      }).then((res) => {
+        const fileStream = streamSaver.createWriteStream('demoProject.zip');
+        if (res.body !== null) {
+          res.body.pipeTo(fileStream).then(
+            () => {
+              console.log('success');
+            },
+            (err) => {
+              console.log(err);
+            },
+          );
+        }
+      });
     }
   };