fix: Package.json script compat with npm, remove yarn cmd (#537)

Fix src/App LazyLoad typo
Refactor dashboard apps change viewType

Author: sunnywx

package.json

@@ -47,7 +47,7 @@
   "scripts": {
     "dev:client": "NODE_ENV=development webpack --config webpack.dev.js --progress",
     "dev:serve": "DEBUG_DEPTH=5 DEBUG=app BABEL_ENV=server NODE_ENV=development nodemon -w lib -w server server/server.js",
-    "dev": "npm-run-all -p dev:serve 'dev:client --watch'",
+    "dev": "npm-run-all -p dev:serve 'dev:client -- --watch'",
     "clean:dev": "rimraf build",
     "clean:prod": "rimraf dist",
     "prod:build": "npm run clean:prod && NODE_ENV=production webpack -p --config webpack.prod.js",
@@ -57,7 +57,7 @@
     "build:prod-server": "node build.js --prod-server",
     "lint-fix": "eslint . --fix",
     "test": "NODE_ENV=testing jest --config jest.config.json -u",
-    "precommit": "yarn test && lint-staged",
+    "precommit": "npm test && lint-staged",
     "viz": "webpack --config webpack.dev.js --profile --progress --json > reports/stats.json && webpack-bundle-analyzer reports/stats.json",
     "report-cov": "cat ./coverage/lcov.info | codecov",
     "dbg": "BABEL_ENV=server NODE_ENV=development node --inspect-brk server/server.js",

src/App.jsx

@@ -83,7 +83,7 @@ class App extends React.Component {
                     />
                   ))}
                 </Switch>
-              </LazyLoad>>
+              </LazyLoad>
             </div>
           </BrowserRouter>
         </Provider>

src/components/Deploy/index.scss

@@ -75,6 +75,7 @@
 .editorWrap {
   width: 90%;
   max-width: 95% !important;
+  padding-right: 10px;
 }
 
 .isYamlLabel {

src/components/Loading/index.scss

@@ -18,7 +18,7 @@
   .loadOuter{
     position: absolute;
     top: 40%;
-    left: 40%;
+    left: 50%;
     margin: -3em 0 0 -3em;
 
     .loader {

src/pages/Dashboard/Apps/index.jsx

@@ -11,6 +11,7 @@ import Toolbar from 'components/Toolbar';
 import TdName, { ProviderName } from 'components/TdName';
 import Statistics from 'components/Statistics';
 import TimeShow from 'components/TimeShow';
+import Loading from 'components/Loading';
 import { getObjName, mappingStatus } from 'utils';
 
 import styles from './index.scss';
@@ -55,8 +56,14 @@ export default class Apps extends Component {
 
   changeView = type => {
     const { appStore } = this.props;
+
     if (appStore.viewType !== type) {
+      appStore.isLoading = true;
       appStore.viewType = type;
+      // mimic loading
+      setTimeout(() => {
+        appStore.isLoading = false;
+      }, 200);
     }
   };
 
@@ -171,24 +178,26 @@ export default class Apps extends Component {
   }
 
   renderCardApps() {
-    const { apps } = this.props.appStore;
+    const { apps, isLoading } = this.props.appStore;
 
     return (
-      <div className={styles.appCardContent}>
-        {apps.map(app => (
-          <Link key={app.app_id} to={`/dashboard/app/${app.app_id}`}>
-            <div className={styles.appCard}>
-              <span className={styles.icon}>
-                <Image src={app.icon} iconSize={48} />
-              </span>
-              <p className={styles.name}>{app.name}</p>
-              <p className={styles.description} title={app.description}>
-                {app.description}
-              </p>
-            </div>
-          </Link>
-        ))}
-      </div>
+      <Loading isLoading={isLoading}>
+        <div className={styles.appCardContent}>
+          {apps.map(app => (
+            <Link key={app.app_id} to={`/dashboard/app/${app.app_id}`}>
+              <div className={styles.appCard}>
+                <span className={styles.icon}>
+                  <Image src={app.icon} iconSize={48} />
+                </span>
+                <p className={styles.name}>{app.name}</p>
+                <p className={styles.description} title={app.description}>
+                  {app.description}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </Loading>
     );
   }