Adding some features and solving problems

Aslemammad · Jun 25, 2020 · 1cde16d · 1cde16d
1 parent 48e0f65
commit 1cde16d
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
     "name": "xmoji",
     "version": "0.1.0",
     "private": true,
+    "main": "build/electron.js",
     "homepage": "./",
     "author": "Forsythe-jones (bagher.codes or Aslemammad)",
     "dependencies": {
@@ -32,17 +33,18 @@
         "ts-build": "tsc -p nodeTsconfig.json",
         "server": "lite-server -c lite-server.json",
         "electron": "npm run electron-build && electron ./build/electron.js",
-        "dev": "concurrently \"BROWSER=none PORT=5006 yarn start\" \"wait-on http://localhost:5006 && tsc -w -p nodeTsconfig.json\" \"wait-on http://localhost:5006 && ELECTRON_ENV=development electron ./build/electron.js\"",
+        "dev": "concurrently \"BROWSER=none PORT=5006 yarn start\" \"wait-on http://localhost:5006 && tsc -w -p nodeTsconfig.json\" \"wait-on http://localhost:5006 && nodemon --exec \"\"ELECTRON_ENV=development electron ./build/electron.js\"\" \"",
         "preelectron-pack": "yarn build",
-        "electron-dev": "npm run ts-build &&  concurrently \"BROWSER=none PORT=5006 yarn start \" \"wait-on http://localhost:5006 && electron ./build/electron.js\"",
+        "electron-dev": "npm run ts-build &&  concurrently \"BROWSER=none PORT=5006 yarn start \" \"wait-on http://localhost:5006 && nodemon --exec \"\"electron ./build/electron.js\"\"\"",
         "full-build": "npm-run-all build ts-build",
         "run": "electron build/electron.js"
     },
     "build": {
         "appId": "com.main.electron-xmoji",
         "files": [
             "build/**/*",
-            "node_modules/**/*"
+            "node_modules/**/*",
+            "package.json"
         ],
         "directories": {
             "buildResources": "assets"
@@ -79,4 +81,4 @@
         "npm-run-all": "^4.1.5",
         "prettier": "^2.0.5"
     }
-}
+}
diff --git a/public/icon.ico b/public/icon.ico
diff --git a/public/icon.png b/public/icon.png
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Xmoji</title>
 </head>
 
 <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,25 +1,16 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+    "short_name": "Xmoji react app",
+    "name": "Xmoji",
+    "icons": [{
+            "src": "icon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        }
+
+
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import logo from './logo.jpg';
 import { useGlobalState, useSetGlobaleState } from './Store';
-
 import {
   Grid,
   Typography,
@@ -19,7 +18,6 @@ import {
   Select,
   MenuItem,
 } from '@material-ui/core';
-
 const App = () => {
   const [state, setState] = [useGlobalState(), useSetGlobaleState()];
   const handleCheckbox = (event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/src/electron.ts b/src/electron.ts
@@ -1,58 +1,85 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { app, BrowserWindow, Menu, globalShortcut } = require('electron');
+const { app, BrowserWindow, Menu, globalShortcut, Tray } = require('electron');
 const path = require('path');
 const robotjs = require('robotjs');
+const url = require('url');
 
 const isDev = process.env.ELECTRON_ENV === 'development';
 isDev && require('electron-reload')(__dirname);
 const createWindow = (emoji: boolean, x: number, y: number) => {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  let mainWindow = new BrowserWindow({
     height: emoji ? 480 : 500, // to check if it is a shortcut
     width: emoji ? 450 : 500,
     webPreferences: {
       // preload : path.join(__dirname, '/js/preload.js')
       nodeIntegration: true,
+      webSecurity: false,
+      enableRemoteModule: true,
     },
     resizable: isDev ? true : false,
     frame: !emoji ? true : false,
+    icon: path.join(__dirname, '../build/icon.png'),
   });
 
   emoji && mainWindow.setPosition(x, y);
 
   // and load the index.html of the app.
-  const route = emoji ? '/tab' : '';
+  const route = emoji ? '#/tab' : '';
   mainWindow.loadURL(
-    isDev ? `http://localhost:5006` + route : `file://${path.join(__dirname, '../build/index.html')}` + route,
+    isDev ? `http://localhost:5006` + route : `file://${path.join(__dirname, '../build/index.html')}${route}`,
   );
   route && mainWindow.on('blur', () => mainWindow.close());
 
   // Open the DevTools.
-  isDev && mainWindow.webContents.openDevTools();
+  // isDev &&
+  mainWindow.webContents.openDevTools();
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
 };
+
+let appTray;
+
 app.allowRendererProcessReuse = false;
+
 app.on('ready', () => {
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Open',
+      click: () => {
+        createWindow(false, 0, 0);
+      },
+    },
+    {
+      label: 'Quit',
+      click: () => {
+        app.quit();
+      },
+    },
+  ]);
+  appTray = new Tray(`${path.join(__dirname, 'icon.png')}`);
+  appTray.setContextMenu(contextMenu);
+
   const emojiShortcut = globalShortcut.register('Control+Command+Space', () => {
     const mousePosition = robotjs.getMousePos();
     createWindow(true, Math.floor(mousePosition.x), Math.floor(mousePosition.y));
   });
 
-  createWindow(false, 0, 0);
-
-  app.on('activate', () => {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow(false, 0, 0);
-  });
   Menu.setApplicationMenu(null);
 });
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) createWindow(false, 0, 0);
+});
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit();
   }
 });
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { HashRouter as Router, Route } from 'react-router-dom';
 
 import './index.css';
 import App from './App';
 import EmojiTab from './Components/EmojiTab';
 import { StateProvider } from './Store';
 import * as serviceWorker from './serviceWorker';
-
 ReactDOM.render(
   <StateProvider>
     <Router>
       <Route exact path="/" component={App} />
-      <Route exact path="/tab" component={EmojiTab} />
+      <Route path="/tab" component={EmojiTab} />
     </Router>
   </StateProvider>,
   document.getElementById('root'),