fix: App info screenshots error (#741)

Author: dongrui

src/pages/Dashboard/Apps/Info/index.jsx

@@ -42,7 +42,7 @@ export default class Info extends Component {
     const appId = _.get(match, 'params.appId', '');
 
     if (appId) {
-      // await appStore.fetch(appId);
+      await appStore.fetch(appId);
 
       // query this version relatived app info
       await appVersionStore.fetchAll({ app_id: appId });
@@ -85,8 +85,9 @@ export default class Info extends Component {
     } = appStore;
 
     // todo: api screenshots is string, not array
-    const { screenshots } = appDetail;
-    const len = _.isArray(screenshots) ? screenshots.length : 0;
+    const screenshotStr = _.get(appDetail, 'screenshots', '');
+    const screenshots = screenshotStr ? screenshotStr.split(',') : [];
+    const len = screenshots.length;
 
     return (
       <div className={styles.screenshot}>

src/pages/Dashboard/Apps/Info/index.scss

@@ -163,19 +163,19 @@
 
 .screenshot {
   margin-left: 270px;
-  width: calc(100% - 270px);
-  height: 170px;
+  width: 512px;
   padding: 20px 0 20px 20px;
   border-radius: 2px;
   background-color: $background-color;
   overflow: hidden;
 
   .pictrues {
-    margin-bottom: 20px;
-    width: 1150px;
+    // margin-bottom: 20px;
+    // width: 1150px;
     li {
       display: inline-block;
       margin-right: 20px;
+      margin-bottom: 20px;
       width: 144px;
       height: 90px;
       line-height: 90px;

src/scss/partial/_grid.scss

@@ -1,5 +1,5 @@
 $content-width: 1280px;
-$page-min-width: 1200px;
+$page-min-width: 1280px;
 $menu-nav-width: 64px;
 $menu-sub-nav-width: 192px;
 $menu-width: $menu-nav-width + $menu-sub-nav-width;

src/stores/app/index.js

@@ -2,7 +2,7 @@ import { observable, action } from 'mobx';
 import _, { get, assign } from 'lodash';
 
 import { useTableActions } from 'mixins';
-import { getProgress, getCookie } from 'utils';
+import { getProgress, getCookie, sleep } from 'utils';
 import { formCheck, fieldCheck } from 'config/form-check';
 
 import Store from '../Store';
@@ -38,7 +38,7 @@ class AppStore extends Store {
     readme: '',
     tos: '',
     icon: '',
-    screenshots: []
+    screenshots: ''
   };
 
   @observable summaryInfo = {};
@@ -93,8 +93,6 @@ class AppStore extends Store {
 
   @observable iconShow = '';
 
-  @observable screenshotsShow = '';
-
   // menu actions logic
   @observable
   handleApp = {
@@ -471,34 +469,46 @@ class AppStore extends Store {
 
   @action
   uploadScreenshot = async base64Str => {
-    const { screenshots } = this.appDetail;
-    const len = _.isArray(screenshots) ? screenshots.length : 0;
-    if (len >= 6) {
+    const screenshotStr = _.get(this.appDetail, 'screenshots', '');
+    const screenshots = screenshotStr ? screenshotStr.split(',') : [];
+    sequence = screenshots.length - 1;
+    sequence++;
+
+    if (sequence >= 6) {
       return this.error('MAX_UPLOAD_SCREENSHOTS');
     }
 
+    this.appDetail.screenshots = sequence === 0 ? base64Str : `${screenshotStr},${base64Str}`;
+
     const result = await this.attachment({
       app_id: this.appDetail.app_id,
       type: 'screenshot',
       attachment_content: base64Str,
       sequence
     });
+    await sleep(sequence * 200);
 
-    if (result && result.errDetail) {
+    if (result && result.err) {
+      sequence--;
       return false;
     }
-
-    sequence++;
-    if (_.isArray(screenshots)) {
-      this.appDetail.screenshots.push(base64Str);
-    } else {
-      this.appDetail.screenshots = [base64Str];
-    }
   };
 
   @action
-  deleteScreenshot = () => {
-    this.appDetail.screenshots = [];
+  deleteScreenshot = async () => {
+    const screenshotStr = _.get(this.appDetail, 'screenshots', '');
+    const screenshots = screenshotStr ? screenshotStr.split(',') : [];
+
+    this.appDetail.screenshots = '';
+    for (let i = 0; i < screenshots.length; i++) {
+      await this.attachment({
+        app_id: this.appDetail.app_id,
+        type: 'screenshot',
+        attachment_content: '',
+        sequence: 0
+      });
+      await sleep(200);
+    }
   };
 
   @action