refactor: Reduce bundle size, replace date picker and merge function, add widget order feature etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

.gitignore

@@ -7,4 +7,5 @@ build/
 package-lock.json
 yarn-error.log
 .eslintcache
+stats.json
 yarn.lock

package.json

@@ -16,12 +16,14 @@
     "@fontsource/roboto": "^4.2.2",
     "@material-ui/core": "4.11.3",
     "@material-ui/icons": "4.11.2",
+    "array-move": "^3.0.1",
     "react": "17.0.1",
     "react-clock": "^3.0.0",
     "react-color-gradient-picker": "^0.1.2",
-    "react-date-picker": "^8.1.0",
+    "react-day-picker": "^7.4.10",
     "react-dom": "17.0.1",
     "react-modal": "3.12.1",
+    "react-sortable-hoc": "^2.0.0",
     "react-toastify": "7.0.3"
   },
   "devDependencies": {
@@ -39,12 +41,13 @@
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "webpack": "^5.27.0",
+    "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
     "start": "webpack serve",
-    "build": "rm -rf build && webpack --mode=production",
+    "build": "rm -rf build && webpack --mode=production -json > stats.json",
     "chrome": "cp manifest/chrome.json build/manifest.json",
     "firefox": "cp manifest/firefox.json build/manifest.json",
     "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/"

src/components/modals/main/scss/settings/_buttons.scss

@@ -215,3 +215,24 @@ input[type=number]::-webkit-outer-spin-button {
 legend {
   color: var(--modal-text) !important;
 }
+
+.sortableitem {
+  background: var(--sidebar) !important;
+  padding: 10px 80px;
+  padding-left: 10px;
+  border-radius: 15px;
+  margin-bottom: 10px;
+  font-size: 1.5rem;
+  svg {
+    font-size: 1.3rem;
+  }
+  &:hover {
+    box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    transition: 0.3s;
+  }
+  z-index: 999 !important;
+}
+
+li.stortableitem {
+  width: 200px;
+}

src/components/modals/main/scss/settings/_main.scss

@@ -3,7 +3,7 @@
 }
 
 input {
-  &[type=text] {
+  &[type=text]  {
     width: 200px;
     color: var(--modal-text);
     background: var(--sidebar);
@@ -26,6 +26,17 @@ input {
   }
 }
 
+.DayPickerInput {
+  input {
+  width: 200px;
+  color: var(--modal-text);
+  background: var(--sidebar);
+  border: none;
+  padding: 10px 10px;
+  border-radius: 5px;
+  }
+}
+
 h4,
 .switch {
   display: inline;

src/components/modals/main/settings/sections/Appearance.jsx

@@ -34,7 +34,8 @@ export default function AppearanceSettings(props) {
 
       <h3>{appearance.font.title}</h3>
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
-      <br/><br/>
+      <br/>
+      <Checkbox name='fontGoogle' text={appearance.font.google} />
       <Dropdown label='Font Weight' name='fontweight'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
         <option className='choices' value='100'>Thin</option>
@@ -52,8 +53,6 @@ export default function AppearanceSettings(props) {
         <option className='choices' value='italic'>Italic</option>
         <option className='choices' value='oblique'>Oblique</option>
       </Dropdown>
-      <br/>
-      <Checkbox name='fontGoogle' text={appearance.font.google} />
 
       <h3>{appearance.accessibility.title}</h3>
       <Checkbox name='animations' text={appearance.animations} betaFeature={true} />

src/components/modals/main/settings/sections/Background.jsx

@@ -110,7 +110,7 @@ export default class BackgroundSettings extends React.PureComponent {
       const newState = {
         gradientSettings: {
           ...s.gradientSettings,
-          gradient: [...initGradients, lastGradient, { 'colour': localStorage.getItem('darkTheme') === 'true' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
+          gradient: [...initGradients, lastGradient, { 'colour': localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
         }
       };
       return newState;

src/components/modals/main/settings/sections/Greeting.jsx

@@ -4,7 +4,8 @@ import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
 
-import DatePicker from 'react-date-picker';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import 'react-day-picker/lib/style.css';
 
 export default class GreetingSettings extends React.PureComponent {
   constructor(...args) {
@@ -39,7 +40,7 @@ export default class GreetingSettings extends React.PureComponent {
         <Checkbox name='birthdayage' text='Birthday Age'/>
         <ul>
           <p>{greeting.birthday_date}</p>
-          <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
+          <DayPickerInput onDayChange={(data) => this.changeDate(data)} value={this.state.birthday} />
         </ul>
       </div>
     );

src/components/modals/main/settings/sections/Order.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+import arrayMove from 'array-move';
+import DragHandleIcon from '@material-ui/icons/DragIndicator';
+
+const SortableItem = sortableElement(({value}) => (
+  <li className='sortableitem'>
+    <DragHandleIcon/>
+    {value.charAt(0).toUpperCase() + value.slice(1)}
+  </li>
+));
+  
+const SortableContainer = sortableContainer(({children}) => {
+  return <ul className='sortablecontainer'>{children}</ul>;
+});
+
+export default class OrderSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      items: JSON.parse(localStorage.getItem('order'))
+    };
+  }
+
+  onSortEnd = ({oldIndex, newIndex}) => {
+    this.setState(({items}) => ({
+      items: arrayMove(items, oldIndex, newIndex)
+    }));
+  };
+
+  componentDidUpdate() {
+    localStorage.setItem('order', JSON.stringify(this.state.items));
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Order</h2>
+        <SortableContainer onSortEnd={this.onSortEnd}>
+          {this.state.items.map((value, index) => (
+            <SortableItem key={`item-${value}`} index={index} value={value} />
+          ))}
+        </SortableContainer>
+      </div>
+    );
+  }
+}

src/components/modals/main/settings/sections/Time.jsx

@@ -64,7 +64,7 @@ export default class TimeSettings extends React.PureComponent {
         {timeSettings}
 
         <h3>{time.date.title}</h3>
-        <Checkbox name='date' text={this.language.enabled} />
+        <Switch name='date' text={this.language.enabled} />
         <Checkbox name='dayofweek' text={time.date.day_of_week} />
         <Checkbox name='datenth' text={time.date.datenth} />
         <Checkbox name='short' text={time.date.short_date} betaFeature={true} />

src/components/modals/main/tabs/Settings.jsx

@@ -10,6 +10,7 @@ import Appearance from '../settings/sections/Appearance';
 import Background from '../settings/sections/Background';
 import Advanced from '../settings/sections/Advanced';
 import Changelog from '../settings/sections/Changelog';
+import Order from '../settings/sections/Order';
 
 import SettingsTabs from './backend/Tabs';
 
@@ -25,6 +26,7 @@ export default function Settings () {
         <div label={language.background.title}><Background/></div>
         <div label={language.search.title}><Search/></div>
         <div label={language.appearance.title}><Appearance/></div>
+        <div label='Order'><Order/></div>
         <div label={language.language.title}><Language/></div>
         <div label={language.advanced.title}><Advanced/></div>
         <div label='Experimental'></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -16,6 +16,7 @@ import Language from '@material-ui/icons/Translate';
 import Changelog from '@material-ui/icons/NewReleasesRounded';
 import About from '@material-ui/icons/Info';
 import Experimental from '@material-ui/icons/BugReport';
+import Order from '@material-ui/icons/List';
 
 // Store
 import Colors from '@material-ui/icons/ColorLens';
@@ -49,6 +50,7 @@ export default function Tab(props) {
     case 'Background': icon = <Background/>; break;
     case 'Search': icon = <Search/>; break;
     case 'Appearance': icon = <Appearance/>; break;
+    case 'Order': icon = <Order/>; break;
     case 'Language': icon = <Language/>; divider = true; break;
     case 'Advanced': icon = <Settings/>; break;
     case 'Experimental': icon = <Experimental/>; divider = true; break;

src/components/widgets/Widgets.jsx

@@ -9,6 +9,17 @@ import Favourite from './background/Favourite';
 import Date from './time/Date';
 
 export default class Widgets extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    // widgets we can re-order
+    this.widgets = {
+      time: this.enabled('time') ? <Clock/> : null,
+      greeting: this.enabled('greeting') ? <Greeting/> : null,
+      quote: this.enabled('quote') ? <Quote/> : null,
+      date: this.enabled('date') ? <Date/> : null
+    }
+  }
+
   enabled(key) {
     const stringValue = localStorage.getItem(key);
     let enabled = true;
@@ -57,17 +68,24 @@ export default class Widgets extends React.PureComponent {
   }
 
   render() {
-    const enabled = this.enabled;
+    // allow for re-ordering widgets
+    let elements = [];
+    const order = JSON.parse(localStorage.getItem('order'));
+
+    if (order) {
+      order.forEach(element => {
+        elements.push(this.widgets[element]);
+      });
+    } else {
+      elements = ['greeting', 'time', 'quote', 'date'];
+    }
 
     return (
       <div id='widgets'>
-        {enabled('searchBar') ? <Search/> : null}
+        {this.enabled('searchBar') ? <Search/> : null}
-        {enabled('greeting') ? <Greeting/> : null}
+        {elements}
-        {enabled('time') ? <Clock/> : null}
+        {this.enabled('view') ? <Maximise/> : null}
-        {enabled('date') ? <Date/> : null}
+        {this.enabled('favouriteEnabled') ? <Favourite/> : null}
-        {enabled('quote') ? <Quote/> : null}
-        {enabled('view') ? <Maximise/> : null}
-        {enabled('favouriteEnabled') ? <Favourite/> : null}
       </div>
     );
   }

src/index.js

@@ -11,7 +11,7 @@ import '@fontsource/lexend-deca/latin-400.css';
 import '@fontsource/roboto/cyrillic-400.css';
 
 // language
-import merge from './modules/helpers/merge';
+import merge from '@material-ui/utils/deepmerge';
 const languagecode = localStorage.getItem('language') || 'en-GB';
 // we set things to window. so they're global and we avoid passing the translation strings as props to each component
 window.languagecode = languagecode;

src/modules/default_settings.json

@@ -126,5 +126,9 @@
   {
     "name": "fontweight",
     "value": 400
+  },
+  {
+    "name": "order",
+    "value": "[\"greeting\", \"time\", \"quote\", \"date\"]"
   }
 ]

src/modules/helpers/merge.js

@@ -1,19 +0,0 @@
-export default function deepmerge(...objects) {
-  let target = {};
-
-  const merge = (obj) => {
-    for (let prop in obj) {
-      if (obj.hasOwnProperty(prop)) {
-        if (typeof obj[prop] === 'object') {
-          target[prop] = deepmerge(target[prop], obj[prop]);
-        } else {
-          target[prop] = obj[prop];
-        }
-      }
-    }
-  };
-
-  objects.forEach(object => merge(object));
-
-  return target;
-}