fix: many bug fixes and some performance improvements

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

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
-  plugins: ['@babel/plugin-proposal-class-properties', ['@babel/transform-runtime', {
-    'regenerator': true
-  }]]
+  presets: ['@babel/preset-env', ['@babel/preset-react', {
+    'runtime': 'automatic'
+  }]],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
 };

package.json

@@ -11,9 +11,8 @@
   "license": "BSD-3-Clause",
   "version": "5.0.0",
   "dependencies": {
-    "@eartharoid/dtf": "^1.0.8",
     "@fontsource/lexend-deca": "^4.2.3",
-    "@fontsource/roboto": "^4.2.2",
+    "@fontsource/roboto": "^4.2.3",
     "@material-ui/core": "4.11.3",
     "@material-ui/icons": "4.11.2",
     "react": "17.0.2",
@@ -28,24 +27,26 @@
     "weather-icons-react": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.14",
+    "@babel/core": "^7.13.15",
     "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.12",
+    "@babel/plugin-transform-react-constant-elements": "^7.13.13",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "babel-loader": "^8.2.2",
+    "babel-plugin-transform-react-class-to-function": "^1.2.2",
     "copy-webpack-plugin": "^8.1.1",
-    "css-loader": "^5.2.0",
-    "eslint": "^7.23.0",
+    "css-loader": "^5.2.1",
+    "eslint": "^7.24.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-webpack-plugin": "^2.5.3",
     "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^1.4.0",
+    "mini-css-extract-plugin": "^1.4.1",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",
-    "webpack": "^5.30.0",
+    "webpack": "^5.31.2",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },

src/components/modals/main/scss/index.scss

@@ -115,7 +115,6 @@ ul.sidebar {
   left: 0;
   margin: 0;
   padding-left: 0;
-  height: 20%;
   background: var(--sidebar);
   border-radius: 12px 0 0 12px;
   text-align: left;
@@ -190,7 +189,6 @@ li {
 
 .tab-content {
   position: absolute;
-  left: 25%;
 
   h3 {
     text-transform: uppercase;
@@ -199,32 +197,43 @@ li {
 
 @media only screen and (min-width: 2300px) {
   .tab-content {
-    position: absolute !important;
-    left: 25% !important;
+    left: 350px;
     top: 7%;
   }
 }
 
 @media only screen and (max-width: 1920px) {
   .tab-content {
-    position: absolute;
-    left: 30%;
-    top: 15%;
+    left: 120px;
+    top: 50px;
   }
 }
 
 @media only screen and (min-width: 1920px) {
   .tab-content {
-    position: absolute;
-    left: 30%;
+    left: 350px;
     top: 7%;
   }
 }
 
 @media only screen and (max-width: 1400px) {
   .tab-content {
-    position: absolute;
-    left: 45%;
+    left: 350px;
+    top: 75px;
+  }
+}
+
+@media only screen and (min-width: 1400px) {
+  .tab-content {
+    left: 350px;
+    top: 75px;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .tab-content {
+    left: 125px;
+    top: 75px;
   }
 }
 
@@ -247,6 +256,7 @@ li {
   svg {
     margin-right: 0.5rem;
     padding: 3px;
+    font-size: 1.4em !important;
   }
 }
 
@@ -262,12 +272,16 @@ li {
     font-size: 1.1em !important;
   }
 
+  svg {
+    font-size: 1.4em !important;
+  }
+
   &:hover {
     background: none;
   }
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 1300px) {
   li.navbar-item {
     span {
       display: none;

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

@@ -68,8 +68,7 @@
 .uploadbg,
 .import {
   @extend %settingsButton;
-  background-color: map-get($modal, 'sidebar');
-  border: none;
+  background-color: map-get($button-colours, 'other');
   color: map-get($theme-colours, 'secondary');
 
   &:hover {

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

@@ -25,7 +25,7 @@ import Sideload from '@material-ui/icons/Code';
 // Store
 import Added from '@material-ui/icons/AddCircleOutline';
 
-export default function Tab(props) {
+function Tab(props) {
   let className = 'tab-list-item';
   if (props.currentTab === props.label) {
     className += ' tab-list-active';
@@ -88,3 +88,5 @@ export default function Tab(props) {
     </>
   );
 }
+
+export default React.memo(Tab);

src/components/widgets/background/Background.jsx

@@ -59,12 +59,6 @@ export default class Background extends React.PureComponent {
   }
 
   setBackground() {
-    // Brightness
-    let brightness = localStorage.getItem('brightness');
-    if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) {
-      brightness = 75;
-    }
-
     if (this.state.url !== '') {
       const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
 
@@ -82,12 +76,12 @@ export default class Background extends React.PureComponent {
 
         backgroundImage.setAttribute(
           'style',
-          `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+          `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
         ); 
         preloader = null;
 
         // wait before showing photoinformation, should make this better with state or something later but lazy
-        if (this.state.photoInfo.hidden === false) {
+        if (this.state.photoInfo.hidden !== false) {
           setTimeout(() => {
             document.querySelector('.photoInformation').style.display = 'block';
           }, 800);
@@ -96,7 +90,7 @@ export default class Background extends React.PureComponent {
     } else {
       document.querySelector('#backgroundImage').setAttribute(
         'style',
-        `${this.state.style}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+        `${this.state.style}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
       );
     }
   }

src/components/widgets/background/Favourite.jsx

@@ -9,15 +9,15 @@ export default class Favourite extends React.PureComponent {
   constructor() {
     super();
     this.state = {
-      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} className='topicons' /> : <StarIcon2 onClick={() => this.favourite()}  className='topicons' />
+      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={this.favourite} className='topicons' /> : <StarIcon2 onClick={this.favourite}  className='topicons' />
     };
   }
 
-  favourite() {
+  favourite = () => {
     if (localStorage.getItem('favourite')) {
       localStorage.removeItem('favourite');
       this.setState({
-        favourited: <StarIcon2 onClick={() => this.favourite()} className='topicons' />
+        favourited: <StarIcon2 onClick={this.favourite} className='topicons' />
       });
     } else {
       const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
@@ -26,13 +26,13 @@ export default class Favourite extends React.PureComponent {
       localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit }));
 
       this.setState({
-        favourited: <StarIcon onClick={() => this.favourite()} className='topicons' />
+        favourited: <StarIcon onClick={this.favourite} className='topicons' />
       });
     }
   }
 
   render() {
-    if (localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
+    if (localStorage.getItem('backgroundType') === 'colour') {
       return null;
     }
 

src/components/widgets/background/Maximise.jsx

@@ -19,9 +19,9 @@ export default class View extends React.PureComponent {
     );
   }
 
-  viewStuff() {
+  maximise = () => {
     // elements to hide
-    const elements = ['.searchBar', '.clock', '.greeting', '.quotediv', 'time', '.quicklinks-container', '.weather'];
+    const elements = ['.searchBar', '.clock', '.greeting', '.quotediv', 'time', '.quicklinks-container', '.weather', '.date'];
 
     elements.forEach((element) => {
       try {
@@ -47,13 +47,9 @@ export default class View extends React.PureComponent {
   }
 
   render() {
-    if (localStorage.getItem('background') === 'false') {
-      return null;
-    }
-
     return (
-      <Tooltip title='View' placement='top'>
-        <FullscreenIcon onClick={() => this.viewStuff()} className='topicons' />
+      <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view} placement='top'>
+        <FullscreenIcon onClick={this.maximise} className='topicons' />
       </Tooltip>
     );
   }

src/components/widgets/background/PhotoInformation.jsx

@@ -8,9 +8,8 @@ import Photographer from '@material-ui/icons/Person';
 import Download from '@material-ui/icons/GetApp';
 
 const toDataURL = async (url) => {
-  const response = await fetch(url);
-  const blob = await response.blob();
-  return URL.createObjectURL(blob);
+  const res = await fetch(url);
+  return URL.createObjectURL(await res.blob());
 };
 
 const downloadImage = async (info) => {
@@ -31,7 +30,7 @@ export default function PhotoInformation(props) {
   }
 
   return (
-    <div className='photoInformation' style={{'display': 'none'}}>
+    <div className='photoInformation' style={{ 'display': 'none' }}>
       <h1>{language.credit} <span id='credit'>{props.info.credit}</span></h1>
       <Info className='photoInformationHover'/>
       <div className={props.className || 'infoCard'}>

src/components/widgets/greeting/Greeting.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import dtf from '@eartharoid/dtf';
+import dtf from '../../../modules/helpers/date';
 
 import './greeting.scss';
 

src/components/widgets/navbar/Navbar.jsx

@@ -8,7 +8,7 @@ import Report from '@material-ui/icons/SmsFailed';
 import Tooltip from '@material-ui/core/Tooltip';
 
 import Notes from './Notes';
-import View from '../background/Maximise';
+import Maximise from '../background/Maximise';
 import Favourite from '../background/Favourite';
 
 import './scss/index.scss';
@@ -16,10 +16,12 @@ import './scss/index.scss';
 export default function Navbar(props) {
   const language = window.language;
 
+  const backgroundEnabled = (localStorage.getItem('background') === 'true');
+
   return (
     <div className='navbar-container'>
-      {(localStorage.getItem('view') === 'true') ? <View/> :null}
-      {(localStorage.getItem('favouriteEnabled') === 'true') ? <Favourite/> :null}
+      {(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> :null}
+      {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> :null}
   
       {(localStorage.getItem('notesEnabled') === 'true') ?
         <div className='notes'>

src/components/widgets/time/Date.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import dtf from '@eartharoid/dtf';
+import dtf from '../../../modules/helpers/date';
 
 export default class DateWidget extends React.PureComponent {
   constructor() {
@@ -100,6 +100,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   render() {
-    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date} <br/> {this.state.weekNumber}</span>;
+    return <span className='date' style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date} <br/> {this.state.weekNumber}</span>;
   }
 }

src/index.js

@@ -6,7 +6,7 @@ import * as Constants from './modules/constants';
 
 import './scss/index.scss';
 // the toast css is based on default so we need to import it
-import 'react-toastify/dist/ReactToastify.css';
+import 'react-toastify/dist/ReactToastify.min.css';
 
 import '@fontsource/lexend-deca/latin-400.css';
 import '@fontsource/roboto/cyrillic-400.css';

src/modules/helpers/date.js

@@ -0,0 +1,18 @@
+export default class Date {
+  static nth(d) {
+    if (d > 3 && d < 21) {
+      return d + 'th';
+    }
+
+    switch (d % 10) {
+      case 1:
+        return d + 'st';
+      case 2:
+        return d + 'nd';
+      case 3:
+        return d + 'rd';
+      default:
+        return d + 'th';
+    }
+  }
+}

src/translations/en_GB.json

@@ -122,7 +122,7 @@
             "ddg_proxy": "Use DuckDuckGo Image Proxy",
             "buttons": {
               "title": "Buttons",
-              "view": "View",
+              "view": "Maximise",
               "favourite": "Favourite",
               "download": "Download"
             },

webpack.config.js

@@ -44,7 +44,8 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, './build'),
-    filename: '[name].js',
+    filename: '[name].[chunkhash].js',
+    chunkFilename: '[id].[chunkhash].chunk.js',
     clean: true
   },
   devServer: {
@@ -68,8 +69,8 @@ module.exports = {
       ]
     }),
     new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css'
+      filename: '[name].[chunkhash].css',
+      chunkFilename: '[id].[chunkhash].chunk.css'
     }),
     //new ESLintPlugin()
   ]