update: dynamic indexer & electron notify

main/index.js

@@ -8,15 +8,17 @@ const {
   shell,
   screen,
   BrowserView,
+  Notification,
   globalShortcut
-} = require('electron');
-const path = require('path');
-// const { spawn, exec } = require('child_process');
-// const { autoUpdater } = require('electron-updater');
+} = require('electron')
+const path = require('path')
+// const { spawn, exec } = require('child_process')
+// const { autoUpdater } = require('electron-updater')
 const log = require('electron-log');
 const packagejson = require('../package.json')
 const is = require('electron-is')
 const waitOn = require('wait-on');
+const { title } = require('process');
 
 let app_path = is.dev()? 'http://127.0.0.1:8000/' : `file://${path.join(__dirname, '..', 'renderer')}/index.html`;
 let mainWindow;
@@ -24,18 +26,49 @@ let tray;
 let watcher;
 
 // This gets rid of this: https://github.com/electron/electron/issues/13186
-process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true;
-// app.commandLine.appendSwitch("disable-web-security");
-app.commandLine.appendSwitch('disable-gpu-vsync=gpu');
-app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors');
+process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true
+// app.commandLine.appendSwitch("disable-web-security")
+app.commandLine.appendSwitch('disable-gpu-vsync=gpu')
+app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors')
 
-const gotTheLock = app.requestSingleInstanceLock();
+const gotTheLock = app.requestSingleInstanceLock()
+const notifySupport = Notification.isSupported()
 
 // Prevent multiple instances
 if (!gotTheLock) {
   app.quit();
 }
 
+function notify(params) {
+  if(!notifySupport || !params) return false
+
+  let options = {
+    title: "",
+    body: "",
+    icon: null,
+    timeoutType: "default"
+  }
+
+  const keys = Object.keys(params)
+  const values = Object.values(params)
+
+  for (let index = 0; index < keys.length; index++) {
+    const element = array[index];
+    
+  }
+
+  params.forEach(element => {
+    options[element] = element
+  })
+
+  new Notification(options).show()
+}
+
+async function __init() {
+  log.log('Notify support => ', notifySupport)
+  createWindow()
+}
+
 function createWindow() {
   mainWindow = new BrowserWindow({
     title: packagejson.title,
@@ -104,29 +137,29 @@ function createWindow() {
 
   const trayMenuTemplate = [
     {
-      label: 'Dev Tools',
+      label: '🧰 DevTools',
       click: () => mainWindow.webContents.openDevTools()
     },
     {
-      label: 'Reload',
+      label: '🔄 Reload',
       click: () => {
         app.relaunch();
         mainWindow.close();
       }
     },
     {
-      label: 'Close app',
+      label: '🛑 Quit',
       click: () => mainWindow.close()
     }
   ];
 
-  const trayMenu = Menu.buildFromTemplate(trayMenuTemplate);
-  tray.setContextMenu(trayMenu);
+  tray.setContextMenu(Menu.buildFromTemplate(trayMenuTemplate));
   tray.setToolTip(packagejson.title);
   tray.on('double-click', () => mainWindow.show());
 
   mainWindow.loadURL(app_path);
   if (is.dev()) {
+    
     mainWindow.webContents.openDevTools();
   }
 
@@ -153,15 +186,16 @@ app.on('ready', () => {
       backgroundColor: "#00000000",
     });
     loadWindow.loadURL(`file://${__dirname}/statics/loading_dev.html`)
+    notify({title: "Starting development server..."})
     waitOn({ resources: [app_path] }, function (err) {
       if (err) {
         return log.log(err, ' | electron Aborted create window')
       }
-      createWindow()
+      __init()
       loadWindow.close()
     });
   }else{
-    createWindow()
+    __init()
   }
 });
 
@@ -216,3 +250,7 @@ ipcMain.handle('appRestart', () => {
   app.relaunch();
   mainWindow.close();
 });
+
+ipcMain.handle('app_notify', () => {
+  notify({ title: "Bruh" })
+})

src/components/Invalid/index.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import * as antd from 'antd'
+import styles from './index.less'
+
+const InvalidSkeleton = (props) => {
+    return(
+        <antd.Card className={styles.invalidSkeleton} bordered="false">
+            <antd.Skeleton active />
+            <antd.Result style={{ 
+                position: "absolute", 
+                zIndex: "15", 
+                width: "100%", 
+                height: "100%", 
+                padding: "12px 24px"
+            }}>
+                Bruh fail?
+            </antd.Result>
+        </antd.Card>
+    )
+}
+
+
+export default class Invalid extends React.Component{
+    constructor(props){
+        super(props)
+    }
+
+    render(){
+        const Components = {
+            skeleton: <InvalidSkeleton />
+        }
+        const type = this.props.type
+        if (!type) {
+            return null
+        }
+        return Components[type]
+    }
+}

src/components/Invalid/index.less

@@ -0,0 +1,14 @@
+.invalidSkeleton{
+    :global{
+        .ant-card{
+            border-radius: 7px;
+        }
+        .ant-card-body{
+            display: flex;
+            padding: 0;
+        }
+        .ant-skeleton{
+            padding: 24px;
+        }
+    }
+}

src/components/index.js

@@ -5,6 +5,7 @@ import * as Icons from './Icons'
 import Loader from './Loader/Loader.js'
 import About from './About'
 import * as Feather from 'feather-reactjs'
+import Invalid from './Invalid'
 
 // App Layout Components
 import * as MyLayout from './Layout/index.js'
@@ -18,6 +19,7 @@ import PostCreator from './PostCreator'
 
 // Mix & Export all
 export {
+  Invalid,
   Icons,
   Feather,
   About,

src/core/index.js

@@ -5,7 +5,6 @@ import store from 'store';
 import { i18n, app_config } from 'config';
 import * as errorHandlers from 'core/libs/errorhandler'
 import platform from 'platform'
-import { uri_resolver } from 'api/lib';
 import request from 'request'
 
 const { pathToRegexp } = require('path-to-regexp');
@@ -30,6 +29,7 @@ export const app_info = {
   layout: platform.layout
 };
 
+// [Experimental], not in use
 export function getGlobals(params, callback) {
   if (!params || !params.server) return false
   let tmpResponse = []

src/pages/[page].js

@@ -1,9 +1,10 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { pathMatchRegexp } from 'core'
 import Error404 from './404.js'
 // <UserProfile {...this.props} regx={matchUser} />
+import { Invalid } from 'components'
 
-class PageIndexer extends PureComponent {
+class PageIndexer extends React.Component {
   render() {
     const { location } = this.props
     const matchUser = pathMatchRegexp('/@:id', location.pathname)
@@ -12,14 +13,14 @@ class PageIndexer extends PureComponent {
     if (matchUser) {
       return (
         <div>
-          User, matched => {matchUser}
+          {matchUser}
         </div>
       )
     }
     if (matchSetting) {
         return(
           <div>
-              Bruh, matched => {matchSetting}
+           <Invalid type="skeleton" />
           </div>
         )
     }

src/pages/debug/index.js

@@ -37,7 +37,7 @@ const menuMap = {
     <span>
       <Icons.Image /> Theme
     </span>
-  ),
+  )
 }
 
 export default class Debug extends React.Component {

src/pages/test.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default class Render extends React.Component {
+    state = {
+        style: { textAlign: "center" }
+    } 
+    
+    render(){
+        const { style } = this.state
+        const cambiarColor = (color) => { this.setState({ style: { color: color, ...style } }) }
+        return(
+            <div style={style} >
+                Current Style => { JSON.stringify(style) }<br />
+                <button onClick={() => { cambiarColor("green") }} > Update estilo </button>
+            </div>
+        )
+    }
+}