From 8a079e548b5d0dcb490de285b0f8eef20e371c43 Mon Sep 17 00:00:00 2001
From: Manoj Vivek <p.manoj.vivek@gmail.com>
Date: Sun, 11 Aug 2019 13:25:58 +0530
Subject: [PATCH] Improvement address bar interaction and changes app name

---
 .../app/components/Addressinput/index.js      |  21 ++-
 desktop-app/app/components/Renderer/index.js  |   4 +-
 desktop-app/app/menu.js                       | 126 +++++++++---------
 desktop-app/package.json                      |  55 ++------
 4 files changed, 95 insertions(+), 111 deletions(-)

diff --git a/desktop-app/app/components/Addressinput/index.js b/desktop-app/app/components/Addressinput/index.js
index 5f308143..4c761c18 100644
--- a/desktop-app/app/components/Addressinput/index.js
+++ b/desktop-app/app/components/Addressinput/index.js
@@ -33,6 +33,7 @@ class AddressBar extends React.Component<Props> {
           className={styles.addressInput}
           placeholder="https://your-website.com"
           value={this.state.userTypedAddress || this.props.address}
+          onKeyDown={this._handleKeyDown}
           onChange={e => this.setState({userTypedAddress: e.target.value})}
         />
         <button className={styles.goButton} onClick={this._onChange}>
@@ -42,9 +43,25 @@ class AddressBar extends React.Component<Props> {
     );
   }
 
+  _handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      this._onChange();
+    }
+  };
+
   _onChange = () => {
-    console.log('in _onChange', this.props.onChange);
-    this.props.onChange && this.props.onChange(this.state.userTypedAddress);
+    if (!this.state.userTypedAddress) {
+      return;
+    }
+    this.props.onChange &&
+      this.props.onChange(this._normalize(this.state.userTypedAddress));
+  };
+
+  _normalize = address => {
+    if (!address.startsWith('http')) {
+      address = 'https://' + address;
+    }
+    return address;
   };
 }
 
diff --git a/desktop-app/app/components/Renderer/index.js b/desktop-app/app/components/Renderer/index.js
index 8eb10bb9..2fef4f86 100644
--- a/desktop-app/app/components/Renderer/index.js
+++ b/desktop-app/app/components/Renderer/index.js
@@ -9,7 +9,7 @@ class Renderer extends Component {
     console.log('Renderer this.props', this.props);
     return (
       <div className={cx(styles.container)}>
-        <h2>{this.props.device.name}</h2>
+        <h3>{this.props.device.name}</h3>
         <div
           className={cx(styles.deviceWrapper)}
           style={{
@@ -20,7 +20,7 @@ class Renderer extends Component {
           <webview
             className={cx(styles.device)}
             title={this.props.device.name}
-            src={this.props.src}
+            src={this.props.src || 'about:blank'}
             width={this.props.device.width}
             height={this.props.device.height}
             style={{
diff --git a/desktop-app/app/menu.js b/desktop-app/app/menu.js
index bcba76ed..905355c1 100644
--- a/desktop-app/app/menu.js
+++ b/desktop-app/app/menu.js
@@ -1,5 +1,5 @@
 // @flow
-import { app, Menu, shell, BrowserWindow } from 'electron';
+import {app, Menu, shell, BrowserWindow} from 'electron';
 
 export default class MenuBuilder {
   mainWindow: BrowserWindow;
@@ -30,15 +30,15 @@ export default class MenuBuilder {
   setupDevelopmentEnvironment() {
     this.mainWindow.openDevTools();
     this.mainWindow.webContents.on('context-menu', (e, props) => {
-      const { x, y } = props;
+      const {x, y} = props;
 
       Menu.buildFromTemplate([
         {
           label: 'Inspect element',
           click: () => {
             this.mainWindow.inspectElement(x, y);
-          }
-        }
+          },
+        },
       ]).popup(this.mainWindow);
     });
   }
@@ -48,48 +48,48 @@ export default class MenuBuilder {
       label: 'Electron',
       submenu: [
         {
-          label: 'About ElectronReact',
-          selector: 'orderFrontStandardAboutPanel:'
+          label: 'About ResponsivelyApp',
+          selector: 'orderFrontStandardAboutPanel:',
         },
-        { type: 'separator' },
-        { label: 'Services', submenu: [] },
-        { type: 'separator' },
+        {type: 'separator'},
+        {label: 'Services', submenu: []},
+        {type: 'separator'},
         {
-          label: 'Hide ElectronReact',
+          label: 'Hide ResponsivelyApp',
           accelerator: 'Command+H',
-          selector: 'hide:'
+          selector: 'hide:',
         },
         {
           label: 'Hide Others',
           accelerator: 'Command+Shift+H',
-          selector: 'hideOtherApplications:'
+          selector: 'hideOtherApplications:',
         },
-        { label: 'Show All', selector: 'unhideAllApplications:' },
-        { type: 'separator' },
+        {label: 'Show All', selector: 'unhideAllApplications:'},
+        {type: 'separator'},
         {
           label: 'Quit',
           accelerator: 'Command+Q',
           click: () => {
             app.quit();
-          }
-        }
-      ]
+          },
+        },
+      ],
     };
     const subMenuEdit = {
       label: 'Edit',
       submenu: [
-        { label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
-        { label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
-        { type: 'separator' },
-        { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
-        { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
-        { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
+        {label: 'Undo', accelerator: 'Command+Z', selector: 'undo:'},
+        {label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:'},
+        {type: 'separator'},
+        {label: 'Cut', accelerator: 'Command+X', selector: 'cut:'},
+        {label: 'Copy', accelerator: 'Command+C', selector: 'copy:'},
+        {label: 'Paste', accelerator: 'Command+V', selector: 'paste:'},
         {
           label: 'Select All',
           accelerator: 'Command+A',
-          selector: 'selectAll:'
-        }
-      ]
+          selector: 'selectAll:',
+        },
+      ],
     };
     const subMenuViewDev = {
       label: 'View',
@@ -99,23 +99,23 @@ export default class MenuBuilder {
           accelerator: 'Command+R',
           click: () => {
             this.mainWindow.webContents.reload();
-          }
+          },
         },
         {
           label: 'Toggle Full Screen',
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-          }
+          },
         },
         {
           label: 'Toggle Developer Tools',
           accelerator: 'Alt+Command+I',
           click: () => {
             this.mainWindow.toggleDevTools();
-          }
-        }
-      ]
+          },
+        },
+      ],
     };
     const subMenuViewProd = {
       label: 'View',
@@ -125,9 +125,9 @@ export default class MenuBuilder {
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-          }
-        }
-      ]
+          },
+        },
+      ],
     };
     const subMenuWindow = {
       label: 'Window',
@@ -135,12 +135,12 @@ export default class MenuBuilder {
         {
           label: 'Minimize',
           accelerator: 'Command+M',
-          selector: 'performMiniaturize:'
+          selector: 'performMiniaturize:',
         },
-        { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
-        { type: 'separator' },
-        { label: 'Bring All to Front', selector: 'arrangeInFront:' }
-      ]
+        {label: 'Close', accelerator: 'Command+W', selector: 'performClose:'},
+        {type: 'separator'},
+        {label: 'Bring All to Front', selector: 'arrangeInFront:'},
+      ],
     };
     const subMenuHelp = {
       label: 'Help',
@@ -149,7 +149,7 @@ export default class MenuBuilder {
           label: 'Learn More',
           click() {
             shell.openExternal('http://electron.atom.io');
-          }
+          },
         },
         {
           label: 'Documentation',
@@ -157,21 +157,21 @@ export default class MenuBuilder {
             shell.openExternal(
               'https://github.com/atom/electron/tree/master/docs#readme'
             );
-          }
+          },
         },
         {
           label: 'Community Discussions',
           click() {
             shell.openExternal('https://discuss.atom.io/c/electron');
-          }
+          },
         },
         {
           label: 'Search Issues',
           click() {
             shell.openExternal('https://github.com/atom/electron/issues');
-          }
-        }
-      ]
+          },
+        },
+      ],
     };
 
     const subMenuView =
@@ -187,16 +187,16 @@ export default class MenuBuilder {
         submenu: [
           {
             label: '&Open',
-            accelerator: 'Ctrl+O'
+            accelerator: 'Ctrl+O',
           },
           {
             label: '&Close',
             accelerator: 'Ctrl+W',
             click: () => {
               this.mainWindow.close();
-            }
-          }
-        ]
+            },
+          },
+        ],
       },
       {
         label: '&View',
@@ -208,7 +208,7 @@ export default class MenuBuilder {
                   accelerator: 'Ctrl+R',
                   click: () => {
                     this.mainWindow.webContents.reload();
-                  }
+                  },
                 },
                 {
                   label: 'Toggle &Full Screen',
@@ -217,15 +217,15 @@ export default class MenuBuilder {
                     this.mainWindow.setFullScreen(
                       !this.mainWindow.isFullScreen()
                     );
-                  }
+                  },
                 },
                 {
                   label: 'Toggle &Developer Tools',
                   accelerator: 'Alt+Ctrl+I',
                   click: () => {
                     this.mainWindow.toggleDevTools();
-                  }
-                }
+                  },
+                },
               ]
             : [
                 {
@@ -235,9 +235,9 @@ export default class MenuBuilder {
                     this.mainWindow.setFullScreen(
                       !this.mainWindow.isFullScreen()
                     );
-                  }
-                }
-              ]
+                  },
+                },
+              ],
       },
       {
         label: 'Help',
@@ -246,7 +246,7 @@ export default class MenuBuilder {
             label: 'Learn More',
             click() {
               shell.openExternal('http://electron.atom.io');
-            }
+            },
           },
           {
             label: 'Documentation',
@@ -254,22 +254,22 @@ export default class MenuBuilder {
               shell.openExternal(
                 'https://github.com/atom/electron/tree/master/docs#readme'
               );
-            }
+            },
           },
           {
             label: 'Community Discussions',
             click() {
               shell.openExternal('https://discuss.atom.io/c/electron');
-            }
+            },
           },
           {
             label: 'Search Issues',
             click() {
               shell.openExternal('https://github.com/atom/electron/issues');
-            }
-          }
-        ]
-      }
+            },
+          },
+        ],
+      },
     ];
 
     return templateDefault;
diff --git a/desktop-app/package.json b/desktop-app/package.json
index 4856ba67..550c2a84 100644
--- a/desktop-app/package.json
+++ b/desktop-app/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "electron-react-boilerplate",
-  "productName": "ElectronReact",
+  "name": "Responsively-App",
+  "productName": "ResponsivelyApp",
   "version": "0.17.1",
-  "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
+  "description": "A developer-friendly browser for developing responsive web apps",
   "scripts": {
     "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
     "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
@@ -57,8 +57,8 @@
   },
   "main": "./app/main.prod.js",
   "build": {
-    "productName": "ElectronReact",
-    "appId": "org.develar.ElectronReact",
+    "productName": "ResponsivelyApp",
+    "appId": "app.ResponsivelyApp",
     "files": [
       "app/dist/",
       "app/app.html",
@@ -106,43 +106,13 @@
       "private": false
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
-  },
-  "author": {
-    "name": "Electron React Boilerplte Maintainers",
-    "email": "electronreactboilerplate@gmail.com",
-    "url": "https://electron-react-boilerplate.js.org"
-  },
-  "contributors": [
-    {
-      "name": "Vikram Rangaraj",
-      "email": "vikr01@icloud.com",
-      "url": "https://github.com/vikr01"
-    },
-    {
-      "name": "Amila Welihinda",
-      "email": "amilajack@gmail.com",
-      "url": "https://github.com/amilajack"
-    }
-  ],
+  "repository": {},
+  "author": {},
+  "contributors": [],
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
-  },
-  "keywords": [
-    "electron",
-    "boilerplate",
-    "react",
-    "redux",
-    "flow",
-    "sass",
-    "webpack",
-    "hot",
-    "reload"
-  ],
-  "homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
+  "bugs": {},
+  "keywords": [],
+  "homepage": "",
   "jest": {
     "testURL": "http://localhost/",
     "moduleNameMapper": {
@@ -279,8 +249,5 @@
     "npm": ">=4.x",
     "yarn": ">=0.21.3"
   },
-  "collective": {
-    "url": "https://opencollective.com/electron-react-boilerplate-594"
-  },
   "browserslist": "electron 1.6"
 }