feat: working electron persistent settings support

Author: HarshKhandeparkar

package.json

@@ -11,7 +11,8 @@
   "homepage": ".",
   "website": "https://harshkhandeparkar.github.io/rainbow-board",
   "dependencies": {
-    "electron-is-dev": "^1.2.0"
+    "electron-is-dev": "^1.2.0",
+    "electron-settings": "^4.0.2"
   },
   "scripts": {
     "start": "concurrently 'BROWSER=none react-scripts start' 'wait-on tcp:3000 && electron-forge start'",
@@ -24,6 +25,7 @@
     "pack": "electron-builder --dir",
     "dist": "yarn build && electron-builder",
     "ship": "yarn build && electron-forge make && electron-builder",
+    "ebuild": "yarn build && electron-builder",
     "postinstall": "electron-builder install-app-deps"
   },
   "eslintConfig": {

public/electron.js

@@ -5,7 +5,9 @@ const isDev = require('electron-is-dev');
 function createMainWindow() {
   const win = new BrowserWindow({
     webPreferences: {
-      devTools: isDev
+      devTools: isDev,
+      enableRemoteModule: true,
+      nodeIntegration: true
     },
     icon: path.join(__dirname, 'public', 'logo512.png')
   })

src/App.jsx

@@ -5,7 +5,7 @@ import Pages from './components/Pages/Pages.jsx';
 import Credits from './components/Credits/Credits';
 import WhatsNew from './components/WhatsNew/WhatsNew';
 
-import { setCookie } from './util/cookies';
+import { setSetting } from './util/settings';
 
 class App extends Component {
   whiteTheme = {
@@ -31,22 +31,22 @@ class App extends Component {
   setTheme(theme) {
     if (theme === 'white') {
       this.setState({theme: this.whiteTheme});
-      setCookie('theme', theme);
+      setSetting('theme', theme);
     }
     else if (theme === 'dark') {
       this.setState({theme: this.darkTheme});
-      setCookie('theme', theme);
+      setSetting('theme', theme);
     }
   }
 
   toggleTheme() {
     if (this.state.theme === this.whiteTheme) {
       this.setState({theme: this.darkTheme});
-      setCookie('theme', 'dark');
+      setSetting('theme', 'dark');
     }
     else {
       this.setState({theme: this.whiteTheme});
-     setCookie('theme', 'white');
+      setSetting('theme', 'white');
     }
   }
 

src/components/Download/Download.jsx

@@ -3,6 +3,8 @@ import M from 'materialize-css';
 import { gt } from 'semver';
 import { version } from '../../../package.json';
 
+import { isElectron } from '../../util/isElectron';
+
 export default class Download extends Component {
   state = {
     latestVersion: version,
@@ -19,13 +21,13 @@ export default class Download extends Component {
     return (
       <div>
         {
-          (!navigator.userAgent.toLowerCase().includes('electron') || gt(this.state.latestVersion, version)) &&
+          (!isElectron || gt(this.state.latestVersion, version)) &&
           (
             <div>
               <button className="dropdown-trigger btn center brand-text" data-target="download-dropdown">
                 <i className="fa fa-download left" />
                 Download {
-                  navigator.userAgent.toLowerCase().includes('electron') ? 'New Version' : 'Desktop App'
+                  isElectron ? 'New Version' : 'Desktop App'
                 }
               </button>
 

src/components/Main.jsx

@@ -2,20 +2,17 @@ import { NavLink, useHistory } from 'react-router-dom';
 import { version } from '../../package.json';
 import Download from './Download/Download';
 
-import { hasCookie, getCookie } from '../util/cookies';
+import { hasSetting, getSetting } from '../util/settings';
 
 function Main({toggleTheme, getTheme}) {
   const history = useHistory();
+  let doShowChangelog = true;
 
-  hasCookie('lastVersionChangelogShown').then((doesHaveCookie) => {
-    if (doesHaveCookie) {
-      getCookie('lastVersionChangelogShown').then((cookie) => {
-        if (cookie !== version) history.push('/new');
-      })
-    }
-    else history.push('/new');
-  })
+  if (hasSetting('lastVersionChangelogShown')) {
+    if (getSetting('lastVersionChangelogShown') === version) doShowChangelog = false;
+  }
 
+  if (doShowChangelog) history.push('/new');
 
   return (
     <div id="main">

src/components/Page/Page.jsx

@@ -7,6 +7,7 @@ import SVGSaver from 'svgsaver';
 import { Toolbar } from './Toolbar/Toolbar';
 
 import '../Page/Page.css';
+import { isElectron } from '../../util/isElectron';
 
 export class Page extends Component {
   constructor(...props) {
@@ -58,7 +59,7 @@ export class Page extends Component {
       }
     })
 
-    if (!navigator.userAgent.toLowerCase().includes('electron')) {
+    if (!isElectron) {
       window.onbeforeunload = function() {
         return `Do you want to leave this page? You may lose saved changes.`;
       }

src/components/WhatsNew/WhatsNew.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import './WhatsNew.css';
 
-import { setCookie } from '../../util/cookies';
+import { setSetting } from '../../util/settings';
 import { version } from '../../../package.json';
 
 function New({title, desc, version, link}) {
@@ -30,7 +30,7 @@ function New({title, desc, version, link}) {
 
 export default class WhatsNew extends Component {
   componentDidMount() {
-    setCookie('lastVersionChangelogShown', version);
+    setSetting('lastVersionChangelogShown', version);
   }
 
   render() {

src/index.js

@@ -8,27 +8,18 @@ import './css/index.css';
 import './css/font-awesome.min.css';
 import 'material-icons/iconfont/material-icons.css';
 
-import { getCookie, hasCookie } from './util/cookies';
+import { getSetting, hasSetting } from './util/settings';
 
 let theme = 'white';
 
-hasCookie('theme').then((doesHaveCookie) => {
-  if (doesHaveCookie) getCookie('theme').then((cookie) => {
-    theme = cookie;
-    ReactDOM.render(
-      <React.StrictMode>
-        <App theme={theme} />
-      </React.StrictMode>,
-      document.getElementById('root')
-    )
-  })
-  else ReactDOM.render(
-    <React.StrictMode>
-      <App theme={theme} />
-    </React.StrictMode>,
-    document.getElementById('root')
-  )
-})
+if (hasSetting('theme')) theme = getSetting('theme');
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App theme={theme} />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/util/cookies.js

@@ -0,0 +1 @@
+export const isElectron = navigator.userAgent.toLowerCase().includes('electron');