add electron-settings

package.json

@@ -8,7 +8,7 @@
     "build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
     "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
-    "package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
+    "package": "yarn build && electron-builder build --publish never",
     "postinstall": "node -r @babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
     "start": "node -r @babel/register ./.erb/scripts/CheckPortInUse.js && yarn start:renderer",
     "start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.js",
@@ -250,6 +250,7 @@
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",
     "electron-redux": "^1.5.4",
+    "electron-settings": "^4.0.2",
     "electron-updater": "^4.3.4",
     "history": "^5.0.0",
     "lodash": "^4.17.21",

src/components/playlist/PlaylistList.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { Tag } from 'rsuite';
+import settings from 'electron-settings';
 import { getPlaylists } from '../../api/api';
 import ListViewType from '../viewtypes/ListViewType';
 import Loader from '../loader/Loader';
@@ -42,7 +43,9 @@ const tableColumns = [
 
 const PlaylistList = () => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [viewType, setViewType] = useState(localStorage.getItem('viewType'));
+  const [viewType, setViewType] = useState(
+    settings.getSync('viewType') || 'list'
+  );
   const history = useHistory();
   const { isLoading, isError, data: playlists, error }: any = useQuery(
     'playlists',
@@ -72,14 +75,8 @@ const PlaylistList = () => {
           clearSearchQuery={() => setSearchQuery('')}
           showViewTypeButtons
           showSearchBar
-          handleListClick={() => {
+          handleListClick={() => setViewType('list')}
-            setViewType('list');
+          handleGridClick={() => setViewType('grid')}
-            localStorage.setItem('viewType', 'list');
-          }}
-          handleGridClick={() => {
-            setViewType('grid');
-            localStorage.setItem('viewType', 'grid');
-          }}
         />
       }
     >

src/components/starred/StarredView.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { Nav } from 'rsuite';
+import settings from 'electron-settings';
 import { useAppDispatch } from '../../redux/hooks';
 import { clearPlayQueue, setPlayQueue } from '../../redux/playQueueSlice';
 import {
@@ -98,7 +99,9 @@ const StarredView = () => {
   const [currentPage, setCurrentPage] = useState('Tracks');
   const [searchQuery, setSearchQuery] = useState('');
   const [filteredData, setFilteredData] = useState([]);
-  const [viewType, setViewType] = useState(localStorage.getItem('viewType'));
+  const [viewType, setViewType] = useState(
+    settings.getSync('viewType') || 'list'
+  );
   const { isLoading, isError, data, error }: any = useQuery(
     'starred',
     getStarred
@@ -203,14 +206,8 @@ const StarredView = () => {
           clearSearchQuery={() => setSearchQuery('')}
           showViewTypeButtons={currentPage !== 'Tracks'}
           showSearchBar
-          handleListClick={() => {
+          handleListClick={() => setViewType('list')}
-            setViewType('list');
+          handleGridClick={() => setViewType('grid')}
-            localStorage.setItem('viewType', 'list');
-          }}
-          handleGridClick={() => {
-            setViewType('grid');
-            localStorage.setItem('viewType', 'grid');
-          }}
         />
       }
     >

src/components/viewtypes/ViewTypeButtons.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ButtonToolbar, ButtonGroup, IconButton, Icon } from 'rsuite';
+import settings from 'electron-settings';
 
 const ViewTypeButtons = ({ handleListClick, handleGridClick }: any) => {
   return (
@@ -8,17 +9,19 @@ const ViewTypeButtons = ({ handleListClick, handleGridClick }: any) => {
         <IconButton
           icon={<Icon icon="list" />}
           appearance="subtle"
-          onClick={() => {
+          onClick={async () => {
             handleListClick();
             localStorage.setItem('viewType', 'list');
+            settings.setSync('viewType', 'list');
           }}
         />
         <IconButton
           icon={<Icon icon="th-large" />}
           appearance="subtle"
-          onClick={() => {
+          onClick={async () => {
             handleGridClick();
             localStorage.setItem('viewType', 'grid');
+            settings.setSync('viewType', 'grid');
           }}
         />
       </ButtonGroup>

src/menu.ts

@@ -54,17 +54,17 @@ export default class MenuBuilder {
 
   buildDarwinTemplate(): MenuItemConstructorOptions[] {
     const subMenuAbout: DarwinMenuItemConstructorOptions = {
-      label: 'Electron',
+      label: 'sonixd',
       submenu: [
         {
-          label: 'About ElectronReact',
+          label: 'About sonixd',
           selector: 'orderFrontStandardAboutPanel:',
         },
         { type: 'separator' },
         { label: 'Services', submenu: [] },
         { type: 'separator' },
         {
-          label: 'Hide ElectronReact',
+          label: 'Hide sonixd',
           accelerator: 'Command+H',
           selector: 'hide:',
         },

src/package.json

@@ -1,13 +1,12 @@
 {
-  "name": "sonixd-react",
+  "name": "sonixd",
-  "productName": "sonixd-react",
+  "productName": "sonixd",
-  "version": "2.3.0",
+  "version": "0.0.1",
-  "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
+  "description": "An electron-based subsonic-api compatible desktop media player",
   "main": "./main.prod.js",
   "author": {
-    "name": "Electron React Boilerplate Maintainers",
+    "name": "jeffvli",
-    "email": "electronreactboilerplate@gmail.com",
+    "url": "https://github.com/jeffvli/sonixd"
-    "url": "https://github.com/electron-react-boilerplate"
   },
   "scripts": {
     "electron-rebuild": "node -r ../.erb/scripts/BabelRegister.js ../.erb/scripts/ElectronRebuild.js",

yarn.lock

@@ -4853,6 +4853,18 @@ electron-redux@^1.5.4:
     debug "^4.1.1"
     redux "^4.0.1"
 
+electron-settings@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/electron-settings/-/electron-settings-4.0.2.tgz#26ef242397393e0e69119f6fb879fc2287d0f508"
+  integrity sha512-WnUlrnBsO784oXcag0ym+A3ySoIwonz5GhYFsWroMHVzslzmsP+81f/Fof41T9UrRUxuPPKiZPZMwGO+yvWChg==
+  dependencies:
+    lodash.get "^4.4.2"
+    lodash.has "^4.5.2"
+    lodash.set "^4.3.2"
+    lodash.unset "^4.5.2"
+    mkdirp "^1.0.4"
+    write-file-atomic "^3.0.3"
+
 electron-to-chromium@^1.3.591:
   version "1.3.600"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.600.tgz#eb6aa7233ca1fbf0fa9b5943c0f1061b54a433bf"
@@ -8123,6 +8135,16 @@ lodash.flattendeep@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
   integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
+lodash.has@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
+  integrity sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -8133,6 +8155,11 @@ lodash.memoize@4.1.2, lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+  integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -8148,6 +8175,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash.unset@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
+  integrity sha1-Nw0dPoW3Kn4bDN8tJyEhMG8j5O0=
+
 lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -12830,7 +12862,7 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^3.0.0:
+write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
   integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==