add: electron support

2025-06-09 10:34:17 +00:00 · 2020-08-28 03:30:12 +02:00 · 2020-08-28 03:30:12 +02:00 · be94aad23a
commit be94aad23a
parent fc5e4a0106
25 changed files with 386 additions and 221 deletions
--- a/.env
+++ b/.env
@ -1,2 +1,2 @@
-UMI_UI=true
-NODE_ENV=production
+UMI_UI=false
+NODE_ENV=development
--- a/.umirc.js
+++ b/.umirc.js
@ -1,15 +1,19 @@
 import { defineConfig } from 'umi';
+import slash from 'slash';

-const { resolve } = require('path');
+const { resolve, join } = require('path');

 export default defineConfig({
  hash: false,
-  ignoreMomentLocale: true,
+   dynamicImport: {
+     loading: 'components/Loader/Loader.js',
+   },
+  // dynamicImport: false,
+  // history: { type: "hash" },
+
  targets: { ie: 9 },
-  dynamicImport: {
-    loading: 'components/Loader/Loader.js',
-  },
  dva: { immer: true },
+  ignoreMomentLocale: true,
  nodeModulesTransform: {
    type: 'none',
  },
@ -23,6 +27,7 @@ export default defineConfig({
    components: resolve(__dirname, './src/components'),
    models: resolve(__dirname, './src/models'),
    routes: resolve(__dirname, './src/routes'),
+    node_modules: resolve(__dirname, './node_modules')
  },
  extraBabelPlugins: [
    [
@ -35,6 +40,28 @@ export default defineConfig({
      'lodash',
    ],
  ],
+  // externals(context, request, callback) {
+  //   const isDev = process.env.NODE_ENV === 'development';
+  //   let isExternal = false;
+  //   const load = [
+  //     'electron',
+  //     'fs',
+  //     'path',
+  //     'os',
+  //     'child_process'
+  //   ];
+  //   if (load.includes(request)) {
+  //     isExternal = `require("${request}")`;
+  //   }
+  //   const appDeps = Object.keys(require('./package.json').dependencies);
+  //   if (appDeps.includes(request)) {
+  //     const orininalPath = slash(join(__dirname, 'node_modules', request));
+  //     const requireAbsolute = `require('${orininalPath}')`;
+  //     console.log(isDev)
+  //     isExternal = isDev ? requireAbsolute : `require('${request}')`;
+  //   }
+  //   callback(null, isExternal);
+  // },
  // plugins: [themePlugin],
  // chainWebpack: function(config, { webpack }) {
  //   config.module
--- a/comty_dev.service
+++ b/comty_dev.service
@ -1,11 +0,0 @@
-[Unit]
-Description=Comty_Development
-
-[Service]
-ExecStart=npm start
-Restart=always
-User=root
-WorkingDirectory=/ycore/development/comty-development
-
-[Install]
-WantedBy=multi-user.target
--- a/comty_dist.service
+++ b/comty_dist.service
@ -1,11 +0,0 @@
-[Unit]
-Description=Comty_Development
-
-[Service]
-ExecStart=serve ./dist
-Restart=always
-User=root
-WorkingDirectory=/ycore/development/comty-development
-
-[Install]
-WantedBy=multi-user.target
--- a/dev-server.sh
+++ b/dev-server.sh
@ -1,64 +0,0 @@
-#!/bin/sh
-
-pause(){
-  read -p "Press [Enter] key to continue..." fackEnterKey
-}
-
-start_cli_dev(){
-	sudo npm start
-}
-
-start_dev(){
-    sudo systemctl start comty_dev
-    echo "Starting dev server..."
-}
- 
-stop_dev(){
-	sudo systemctl stop comty_dev
-    echo "Stoping dev server..."
-}
-show_logs(){
-	sudo journalctl -u comty_dev
-}
-update(){
-	git reset --merge&&git fetch --all&&git reset --hard origin/master
-
-
-}
-
-show_menus() {
-	clear
-	echo "~~~~~~~~~~~~~~~~~~~~~"	
-	echo " Development Server  "
-	echo "~~~~~~~~~~~~~~~~~~~~~"
-	echo "1. Start CLI Server"
-	echo "2. Start Server"
-    echo "3. Stop Server"
-	echo "4. Show DevServer Logs"
-	echo "5. Update from Git"
-	echo ""
-	echo "0. Exit"
-}
-
-read_options(){
-	local choice
-	read -p "Enter choice [ 1 - 5 ] " choice
-	case $choice in
-        0) exit 0;;
-		1) start_cli_dev ;;
-		2) start_dev ;;
-        3) stop_dev ;;
-		4) show_logs;;
-		5) update;;
-		*) echo -e "${RED}Error...${STD}" && sleep 2
-	esac
-}
- 
-trap '' SIGINT SIGQUIT SIGTSTP
- 
-while true
-do
- 
-	show_menus
-	read_options
-done
--- a/dist-server.sh
+++ b/dist-server.sh
@ -1,59 +0,0 @@
-#!/bin/sh
-
-pause(){
-  read -p "Press [Enter] key to continue..." fackEnterKey
-}
-
-start_cli_dev(){
-	sudo serve ./dist
-}
-
-start_dev(){
-    sudo systemctl start comty_dist
-    echo "Starting dev server..."
-}
- 
-stop_dev(){
-	sudo systemctl stop comty_dist
-    echo "Stoping dev server..."
-}
-show_logs(){
-	sudo journalctl -u comty_dist
-	pause
-}
-
-
-show_menus() {
-	clear
-	echo "~~~~~~~~~~~~~~~~~~~~~"	
-	echo " BuildServe Server  "
-	echo "~~~~~~~~~~~~~~~~~~~~~"
-	echo "1. Start CLI Server"
-	echo "2. Start Server"
-    echo "3. Stop Server"
-	echo "4. Show DevServer Logs"
-	echo ""
-	echo "0. Exit"
-}
-
-read_options(){
-	local choice
-	read -p "Enter choice [ 1 - 4 ] " choice
-	case $choice in
-        0) exit 0;;
-		1) start_cli_dev ;;
-		2) start_dev ;;
-        3) stop_dev ;;
-		4) show_logs;;
-		*) echo -e "${RED}Error...${STD}" && sleep 2
-	esac
-}
- 
-trap '' SIGINT SIGQUIT SIGTSTP
- 
-while true
-do
- 
-	show_menus
-	read_options
-done
--- a/electron-builder.yml
+++ b/electron-builder.yml
@ -0,0 +1,12 @@
+appId: com.example.bruh
+productName: Bruh
+copyright: Copyright © Bruh
+directories:
+  output: dist
+  buildResources: resources
+files:
+  - from: .
+    filter:
+      - package.json
+      - app
+publish: null
--- a/main/configs/config.js
+++ b/main/configs/config.js
@ -0,0 +1,3 @@
+const Config = require('electron-config')
+
+module.exports = new Config({ name: 'config' });
--- a/main/index.js
+++ b/main/index.js
@ -0,0 +1,83 @@
+const { app, BrowserWindow, Menu, Tray, nativeImage } = require('electron')
+const { join } = require('path')
+const path = require('path')
+const packagejson = require('../package.json')
+const is = require('electron-is')
+const waitOn = require('wait-on');
+
+let app_path = `file://${join(__dirname, '..', 'renderer')}/index.html`;
+
+if (is.dev()) {
+  require('electron-debug')(); // eslint-disable-line global-require
+}
+
+if (is.dev()) {
+  app_path = 'http://127.0.0.1:8000/';
+}
+
+// app.on('window-all-closed', () => {
+//   if (process.platform !== 'darwin') {
+//     app.quit();
+//   }
+// });
+
+app.on('activate', () => {
+  // inits
+});
+
+app.on('ready', () => {
+  loadWindow = new BrowserWindow({ 
+    icon: nativeImage.createFromPath(path.join(__dirname, '/public/favicon.png')), 
+    width: 700, 
+    height: 600,
+    frame: false,
+    resizable: false,
+    center: true,
+    transparent: true,
+    
+  });
+
+  mainWindow = new BrowserWindow({
+    icon: nativeImage.createFromPath(path.join(__dirname, '/public/favicon.png')), 
+    show: false,
+    width: 1280, 
+    height: 720,
+    frame: false,
+    webPreferences: {
+      nodeIntegration: true
+    } 
+  });
+ 
+  tray = new Tray(nativeImage.createFromPath(path.join(__dirname, '/public/favicon.png')))
+
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Open', type: 'normal', click:  function(){
+      mainWindow.show();
+  }  },
+    { label: 'bruh', type: 'radio', checked: true },
+  ])
+  tray.setToolTip(packagejson.title)
+  tray.setContextMenu(contextMenu)
+
+  if (is.dev()) {
+    loadWindow.loadURL(`file://${__dirname}/statics/loading_dev.html`)
+  }else{
+    loadWindow.loadURL(`file://${__dirname}/statics/loading.html`)
+  }
+
+  waitOn({ resources: [app_path] }, function (err) {
+    if (err) {
+      return console.log(err, ' | electron Aborted create window')
+    }
+    loadWindow.close()
+    mainWindow.show()
+    mainWindow.loadURL(app_path);
+  });
+  
+});
+
+app.on('close', (event) => {
+  event.preventDefault();
+  mainWindow.hide();
+});
+
--- a/main/statics/loading.css
+++ b/main/statics/loading.css
@ -0,0 +1,97 @@
+body {
+    background-color: transparent;
+    border-radius: 12px;
+    resize: none;
+    font-family: 'Alata', sans-serif;
+}
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    flex-direction: column;
+    background-color: #222222;
+    color: #efefef;
+    border-radius: 12px;
+    text-align: center;
+    padding: 20px;
+}
+.bouncy-logo {
+    width: 400px;
+    height: 400px;
+    margin: 0 auto;
+    position: relative;
+  }
+  .bouncy-logo .ball img {
+    position: absolute;
+    height: 200px;
+    width: 200px;
+    top: 0;
+    left: 43%;
+    transform: translate(-50%, 0);
+    -webkit-animation-direction: alternate;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-name: my-bounce;
+    -webkit-animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-duration: 1s;
+    animation-name: my-bounce;
+    animation-iteration-count: infinite;
+  }
+  .bouncy-logo .ball-shadow {
+    background: radial-gradient(50% 50%, #ccc 0%, transparent 100%);
+    height: 50px;
+    width: 200px;
+    position: absolute;
+    top: 230px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    -webkit-animation-direction: alternate;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-name: my-grow;
+    -webkit-animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-duration: 1s;
+    animation-name: my-grow;
+    animation-iteration-count: infinite;
+  }
+  
+  @-webkit-keyframes my-grow {
+    from {
+      width: 200px;
+      height: 50px;
+      top: 230px;
+    }
+    to {
+      width: 150px;
+      height: 10px;
+      top: 240px;
+    }
+  }
+  @keyframes my-grow {
+    from {
+      width: 200px;
+      height: 50px;
+      top: 230px;
+    }
+    to {
+      width: 150px;
+      height: 10px;
+      top: 240px;
+    }
+  }
+  @-webkit-keyframes my-bounce {
+    from {
+      top: 0;
+    }
+    to {
+      top: 10%;
+    }
+  }
+  @keyframes my-bounce {
+    from {
+      top: 0;
+    }
+    to {
+      top: 10%;
+    }
+  }
--- a/main/statics/loading.html
+++ b/main/statics/loading.html
@ -0,0 +1,12 @@
+<html>
+    <link rel="stylesheet" href="./loading.css">
+    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
+    <body>
+        <div class="wrapper">
+            <div class="bouncy-logo">
+                <div class="ball-shadow"></div>
+                <div class="ball"><img src="../../public/logo.svg"></div>
+              </div> 
+        </div>
+    </body>
+</html>
--- a/main/statics/loading_dev.html
+++ b/main/statics/loading_dev.html
@ -0,0 +1,13 @@
+<html>
+    <link rel="stylesheet" href="./loading.css">
+    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
+    <body>
+        <div class="wrapper">
+            <div class="bouncy-logo">
+                <div class="ball-shadow"></div>
+                <div class="ball"><img src="../../public/logo.svg"></div>
+              </div> 
+            <h2> Starting the development server... </h2>
+        </div>
+    </body>
+</html>
--- a/package.json
+++ b/package.json
@ -3,30 +3,32 @@
  "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
  "title": "Comty™",
  "DevBuild": true,
-  "version": "0.8.22",
+  "version": "0.8.27",
  "stage": "dev-pre",
  "description": "",
  "author": "RageStudio",
  "license": "ISC",
  "private": true,
+  "main": "main/index.js",
+  "build": {
+    "files": [
+      "./dist/**/*",
+      "./pages/**/*",
+      "./node_modules/**/*"
+    ],
+    "appId": "com.rstudio.comty",
+    "asar": false
+  },
  "scripts": {
    "start": "umi dev",
-    "build": "umi build",
-    "postinstall": "umi generate tmp",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
-    "test": "umi-test",
-    "test:coverage": "umi-test --coverage"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
+    "postinstall": "electron-builder install-app-deps",
+    "dev": "concurrently \"electron .\" \"umi dev\"",
+    "build": "npm run build:main && npm run build:renderer",
+    "build:main": "ESLINT=none roadhog build",
+    "build:renderer": "ESLINT=none umi build",
+    "pack": "npm run build && npm run rebuild && build",
+    "pack:dir": "npm run build && npm run rebuild && build --dir",
+    "pack:dirOnly": "build --dir"
  },
  "dependencies": {
    "@icons-pack/react-simple-icons": "^3.8.0",
@ -36,27 +38,26 @@
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@ragestudio/ycorejs-lib": "^0.1.22",
-    "@steveeeie/react-page-transition": "^1.2.0",
-    "antd": "^4.5.1",
+    "antd": "^4.6.1",
    "axios": "^0.19.2",
    "babel-core": "^6.26.3",
    "classnames": "^2.2.6",
-    "dva-model-extend": "^0.1.2",
+    "electron-config": "^2.0.0",
+    "electron-is": "^3.0.0",
+    "electron-log": "^4.2.4",
    "enquire-js": "^0.2.1",
    "feather-reactjs": "^2.0.13",
    "jquery": "^3.5.1",
    "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^10.0.7",
    "localforage": "^1.7.4",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
    "node-sass": "^4.13.1",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.1.0",
-    "prettier": "^1.19.1",
-    "prop-types": "^15.7.2",
+    "platform": "^1.3.6",
    "radium": "^0.26.0",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
    "react-animations": "^1.0.0",
    "react-color": "^2.18.1",
    "react-dazzle": "^1.4.0",
@ -66,27 +67,39 @@
    "react-helmet": "^5.2.1",
    "react-linkify": "^1.0.0-alpha",
    "react-perfect-scrollbar": "^1.5.8",
+    "react-redux": "^7.2.1",
    "react-reveal": "^1.2.2",
    "react-scripts": "^3.4.1",
-    "react-transition-group": "^4.4.1",
    "react-virtualized": "^9.21.2",
    "simple-icons": "^3.3.0",
+    "slash": "^3.0.0",
    "stack-trace": "0.0.10",
    "store": "^2.0.12",
    "styled-components": "^5.1.1",
-    "timeago.js": "^4.0.2"
+    "timeago.js": "^4.0.2",
+    "wait-on": "^5.2.0"
  },
  "devDependencies": {
    "@lingui/babel-preset-react": "^2.9.0",
    "@lingui/cli": "^2.9.0",
    "@lingui/loader": "^2.9.0",
    "@umijs/preset-react": "^1.4.0",
+    "electron": "^10.0.1",
+    "electron-debug": "^2.0.0",
+    "electron-rebuild": "^1.7.3",
+    "electron-builder": "^22.8.0",
+    "electron-devtools-installer": "^3.1.1",
+    "concurrently": "^3.5.1",
    "babel-eslint": "^10.0.1",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-module-resolver": "^4.0.0",
    "cross-env": "^6.0.0",
-    "typescript": "^3.8.3",
+    "dva-model-extend": "^0.1.2",
    "jsdoc": "^3.6.5",
-    "umi": "^3.2.9"
+    "typescript": "^3.8.3",
+    "umi": "^3.2.17",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@types/electron-devtools-installer": "^2.2.0",
+    "@types/node": "^12.12.52"
  }
 }
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/src/components/About/index.js
+++ b/src/components/About/index.js
@ -1,12 +1,13 @@
 import React from 'react'
 import styles from './index.less'
 import { app_info, UUAID, package_json } from 'core'
+import * as Icons from 'components/Icons'
 import * as antd from 'antd'

-const { logo, name, version, stage } = app_info
+const { logo, name, version, stage, os, layout } = app_info

 export default class App_About extends React.Component {
-  DetectNoNStableBuild() {
+  renderStableTag() {
    if (package_json.DevBuild == false) {
      return <antd.Tag color="blue">Stable</antd.Tag>
    } else {
@ -21,9 +22,13 @@ export default class App_About extends React.Component {
          <h1 className={styles.appName}> {name} </h1>
          {UUAID}
          <br />
-          <antd.Tag color="geekblue">v{version}</antd.Tag>
-          <antd.Tag color="red">{stage}</antd.Tag>
-          {this.DetectNoNStableBuild()}
+          <antd.Tag color="green"><Icons.Monitor />{os.toString()}</antd.Tag>
+          <antd.Tag color="geekblue"><Icons.Package />v{version}</antd.Tag>
+          <antd.Tag color="red"><Icons.Radio />{stage}</antd.Tag>
+          <antd.Tag color="magenta"><Icons.Layers />Render with {layout}</antd.Tag>
+          {this.renderStableTag()}
+         
+
        </antd.Card>
      </div>
    )
--- a/src/components/Layout/WindowNavbar/index.js
+++ b/src/components/Layout/WindowNavbar/index.js
@ -0,0 +1,12 @@
+import React from 'react'
+import styles from './index.less'
+
+export default class WindowNavbar extends React.Component{
+    render(){
+        return(
+            <div className={styles.navbar} >
+                
+            </div>
+        )
+    }
+}
--- a/src/components/Layout/WindowNavbar/index.less
+++ b/src/components/Layout/WindowNavbar/index.less
@ -0,0 +1,11 @@
+.navbar{
+    display: block;
+    -webkit-app-region: drag;
+    height: 35px;
+    width: 100%;
+    position: absolute;
+    z-index: 5000;
+    top: 0;
+    right: 0;
+    background-color: rgba(45, 45, 45, 0.274);
+}
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@ -1,5 +1,6 @@
 import Sider from './Sider'
 import Control from './ControlBar'
 import Overlay from './Overlay/index.tsx'
+import WindowNavbar from './WindowNavbar/index.js'

-export { Sider, Control, Overlay }
+export { Sider, Control, Overlay, WindowNavbar }
--- a/src/core/cores/router/index.js
+++ b/src/core/cores/router/index.js
@ -18,11 +18,11 @@ export const router = {
  },
  go: e => {
    router.push(e);
-    goTo.element('primaryContent');
+    // goTo.element('primaryContent');
  },
  goprofile: () => {
    router.push(`/@${e}`);
-    goTo.element('primaryContent');
+    // goTo.element('primaryContent');
  },
 };

--- a/src/core/index.js
+++ b/src/core/index.js
@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash';
 import store from 'store';
 import { i18n, app_config } from 'config';
 import * as errorHandlers from 'core/libs/errorhandler'
+import platform from 'platform'

 const { pathToRegexp } = require('path-to-regexp');

@ -23,6 +24,8 @@ export const app_info = {
  version: package_json.version,
  logo: app_config.FullLogoPath,
  logo_dark: app_config.DarkFullLogoPath,
+  os: platform.os,
+  layout: platform.layout
 };

 export function imageToBase64(img, callback){
--- a/src/layouts/BaseLayout.js
+++ b/src/layouts/BaseLayout.js
@ -5,6 +5,7 @@ import { Loader } from 'components'
 import NProgress from 'nprogress'
 import { withRouter, connect } from 'umi'
 import { queryLayout } from 'core'
+import WindowNavbar from 'components/Layout/WindowNavbar'
 import config from 'config'

 import PrimaryLayout from './PrimaryLayout'
@ -43,6 +44,7 @@ class BaseLayout extends React.Component {
        <Helmet>
          <title>{config.app_config.siteName}</title>
        </Helmet>
+        {this.props.app.electron? <WindowNavbar /> : null}
        {Loader(this.renderLoading)}
        <Container>{children}</Container>
      </React.Fragment>
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@ -53,7 +53,6 @@ class PrimaryLayout extends React.Component {
    store.set('collapsed', !fromStore)
  }

-
  render() {
    const { location, dispatch, children } = this.props
    const { collapsed, isMobile } = this.state
@ -85,7 +84,7 @@ class PrimaryLayout extends React.Component {
    window.DarkMode = isActive(currentTheme["darkmode"])? true : false

    return (
-      <React.Fragment>
+      <React.Fragment >
        <Control />
          {isActive(currentTheme['backgroundImage'])? <div style={{ 
                  backgroundImage: `url(${currentTheme.backgroundImage.src})`,
@ -99,10 +98,9 @@ class PrimaryLayout extends React.Component {
                  overflow: "hidden", 
                  opacity: currentTheme.backgroundImage.opacity
                }} /> : null}
-          <antd.Layout id="app" className={isActive(currentTheme['darkmode'])? "dark_mode" : null }>
+          <antd.Layout id="app" style={this.props.app.electron? { paddingTop: "35px", marginBottom: "12px", borderRadius: "12px" } : null} className={isActive(currentTheme['darkmode'])? "dark_mode" : null }>
            <Sider {...SiderProps} />
            <div className={styles.primary_layout_container}>
-           
                <Content
                  id="primaryContent"
                  className={styles.primary_layout_content}
--- a/src/models/app.js
+++ b/src/models/app.js
@ -26,13 +26,20 @@ export default {
    controlActive: false,
    feedOutdated: false,

+    electron: null,
    app_settings: store.get(app_config.app_settings_storage),
    app_theme: store.get(app_config.appTheme_container) || [],
    notifications: [],
-    locationQuery: {},
  },
  subscriptions: {
    setup({ dispatch }) {
+      try {
+        const electron = window.require("electron")
+        dispatch({ type: 'updateState', payload: { electron: electron } });
+        console.log('ELECTRON INTERFACED')
+      } catch (error) {
+        console.log('Normal interface')
+      }
      dispatch({ type: 'query' });
    },
    setupHistory({ dispatch, history }) {
@ -143,10 +150,10 @@ export default {
      };
    },
    updateFrames(state) {
-      let sessionAuthframe = sessionStorage.getItem('session')
-      let sessionDataframe = sessionStorage.getItem('data')
-      
      try {
+        let sessionAuthframe = sessionStorage.getItem('session')
+        let sessionDataframe = sessionStorage.getItem('data')
+        
        if (sessionAuthframe) {
          sessionAuthframe = JSON.parse(atob(sessionAuthframe))
        }  
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -23,33 +23,43 @@ class PageIndex extends React.PureComponent {

  render() {
    const AppState = () => {
+      if (!this.props.app) {
+        return false
+      }
      let tmp = []
  
      const keys = Object.keys(this.props.app)
      const values = Object.values(this.props.app)
      const lenght = keys.length
  
-      for (let i = 0; i < lenght; i++) {
-        let obj = {}
-        obj.key = keys[i]
-        obj.value = values[i]
+      if(lenght > 0){
+        for (let i = 0; i < lenght; i++) {
+          let obj = {}
+          obj.key = keys[i]
+          obj.value = values[i]
        
-        tmp[i] = obj
+          tmp[i] = obj
+        }
+      
+        const map = tmp.map(e => {
+          try {
+           const v = JSON.stringify(e.value)
+           if(!v) return false
+           return(
+             <div style={{ margin: '20px 50px 20px 10px' }} key={e.key} > 
+               <h4>{e.key}</h4>
+               {v.length < 500? <span>{v}</span> : <antd.Collapse ><antd.Collapse.Panel header={`Hidden text ( ${v.length} Characters )`}><span>{v}</span></antd.Collapse.Panel></antd.Collapse>}
+             </div>
+           )
+          } catch (error) {
+            return null
+          }
+        })
+
+        return map
      }
-     
-      const map = tmp.map(e => {
-        const v = JSON.stringify(e.value)
-        return(
-          <div style={{ margin: '20px 50px 20px 10px' }} key={e.key} > 
-            <h4>{e.key}</h4>
-            {v.length < 500? <span>{v}</span> : <antd.Collapse ><antd.Collapse.Panel header={`Hidden text ( ${v.length} Characters )`}><span>{v}</span></antd.Collapse.Panel></antd.Collapse>}
-          </div>
-        )
-      })
-
-      return map
+      return null
    }
-  
    return (
      <div>
        <antd.Card style={{ wordBreak: 'break-all' }} title={<><Icons.Redux style={{ height: '19px', marginRight: '7px' }} /> Redux state</>}>
--- a/src/theme/base/index.less
+++ b/src/theme/base/index.less
@ -38,7 +38,10 @@
 }

 #app {
+  -webkit-app-region: no-drag;
  overflow: hidden;
+  border-radius: 12px;
+
  color: @AppTheme_global_color!important;
  background-color: @AppTheme_global_background!important;
  background-repeat: repeat-x;
@ -48,7 +51,7 @@
  overflow: hidden;
  background-color: transparent;
  margin: auto;
-  height: 100vh;
+  height: 100%;
  width: 100vw;

  transition: all @__Global_Components_transitions_dur linear;
@ -79,6 +82,8 @@
 }

 body {
+  -webkit-app-region: no-drag;
+
  scroll-behavior: smooth;
  height: 100%;

@ -88,7 +93,7 @@ body {
  line-height: @base-line-height;

  font-family: @__Global_texted_font;
-
+  border-radius: 12px;
 }

@media (max-width: @bp-small){
@ -113,10 +118,6 @@ body {

 }

-
-
-
-
 .text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;