From a33151da91bf253f37730fe1cf0573faa145f437 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Tue, 23 Mar 2021 09:44:57 +0000 Subject: [PATCH] perf: further improve performance --- src/components/modals/main/Main.jsx | 20 +++++++------------ .../modals/main/settings/Checkbox.jsx | 4 ++-- .../modals/main/settings/Switch.jsx | 4 ++-- .../main/settings/sections/Background.jsx | 6 +++--- src/components/modals/main/tabs/Addons.jsx | 14 ++++--------- .../modals/main/tabs/Marketplace.jsx | 19 +++++++----------- src/components/modals/main/tabs/Settings.jsx | 6 +++--- .../modals/main/tabs/backend/Tabs.jsx | 10 +++++----- src/components/widgets/Widgets.jsx | 2 +- .../widgets/background/Background.jsx | 3 ++- .../widgets/background/Favourite.jsx | 10 +--------- .../widgets/background/Maximise.jsx | 2 +- src/components/widgets/navbar/Navbar.jsx | 2 +- src/components/widgets/search/Search.jsx | 12 +++++------ src/components/widgets/search/search.scss | 2 +- 15 files changed, 45 insertions(+), 71 deletions(-) diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx index 5547c4e1..8db10b40 100644 --- a/src/components/modals/main/Main.jsx +++ b/src/components/modals/main/Main.jsx @@ -4,27 +4,21 @@ import Settings from './tabs/Settings'; import Addons from './tabs/Addons'; import Marketplace from './tabs/Marketplace'; -import Navigation from './tabs/backend/Tabs'; +import Tabs from './tabs/backend/Tabs'; import './scss/index.scss'; export default function MainModal(props) { - const language = window.language; + const language = window.language.modals.main.navbar; return ( <> × - -
- -
-
- -
-
- -
- + +
+
+
+ ); } diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx index 409a2bff..f7f4520e 100644 --- a/src/components/modals/main/settings/Checkbox.jsx +++ b/src/components/modals/main/settings/Checkbox.jsx @@ -25,9 +25,9 @@ export default class Checkbox extends React.PureComponent { let text = this.props.text; if (this.props.newFeature) { - text = {this.props.text} NEW; + text = <>{this.props.text} NEW; } else if (this.props.betaFeature) { - text = {this.props.text} BETA; + text = <>{this.props.text} BETA; } return ( diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx index bfdedd01..76e516f1 100644 --- a/src/components/modals/main/settings/Switch.jsx +++ b/src/components/modals/main/settings/Switch.jsx @@ -25,9 +25,9 @@ export default class Switch extends React.PureComponent { let text = this.props.text; if (this.props.newFeature) { - text = {this.props.text} NEW; + text = <>{this.props.text} NEW; } else if (this.props.betaFeature) { - text = {this.props.text} BETA; + text = <>{this.props.text} BETA; } return ( diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index 199a254b..4e39033f 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -176,7 +176,7 @@ export default class BackgroundSettings extends React.PureComponent { onChange={(color) => this.onColorPickerChange(color, 'change')} onEndChange={(color) => this.onColorPickerChange(color, 'end')} gradient={this.GradientPickerInitalState} - isGradient /> + isGradient/> ); } else { gradientInputs = this.state.gradientSettings.gradient.map((g, i) => { @@ -190,12 +190,12 @@ export default class BackgroundSettings extends React.PureComponent { } colourSettings = ( -
+ <> {gradientInputs} {this.state.gradientSettings.gradient[0].colour !== background.source.disabled && !gradientHasMoreThanOneColour ? () : null } -
+ ); } diff --git a/src/components/modals/main/tabs/Addons.jsx b/src/components/modals/main/tabs/Addons.jsx index 98749cf8..0bf4d638 100644 --- a/src/components/modals/main/tabs/Addons.jsx +++ b/src/components/modals/main/tabs/Addons.jsx @@ -6,15 +6,9 @@ import AddonsTabs from './backend/Tabs'; export default function Addons() { return ( - <> - -
- -
-
- -
- - + +
+
+ ); } diff --git a/src/components/modals/main/tabs/Marketplace.jsx b/src/components/modals/main/tabs/Marketplace.jsx index 64ff0e33..fd6f0f43 100644 --- a/src/components/modals/main/tabs/Marketplace.jsx +++ b/src/components/modals/main/tabs/Marketplace.jsx @@ -1,19 +1,14 @@ import React from 'react'; -import MarketplaceBackend from '../marketplace/sections/Marketplace'; -import MarketplaceTabs from './backend/Tabs'; +import MarketplaceTab from '../marketplace/sections/Marketplace'; + +import Tabs from './backend/Tabs'; export default function Marketplace() { return ( - <> - -
- -
-
- -
- - + +
+
+ ); } diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx index 1dc7968e..7be56839 100644 --- a/src/components/modals/main/tabs/Settings.jsx +++ b/src/components/modals/main/tabs/Settings.jsx @@ -12,13 +12,13 @@ import Advanced from '../settings/sections/Advanced'; import Changelog from '../settings/sections/Changelog'; import Order from '../settings/sections/Order'; -import SettingsTabs from './backend/Tabs'; +import Tabs from './backend/Tabs'; export default function Settings() { const language = window.language.modals.main.settings.sections; return ( <> - +
@@ -31,7 +31,7 @@ export default function Settings() {
- +

IMPORTANT INFO

In order for changes to take place, the page must be refreshed.

diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx index 59837a46..bdd12d0e 100644 --- a/src/components/modals/main/tabs/backend/Tabs.jsx +++ b/src/components/modals/main/tabs/backend/Tabs.jsx @@ -32,7 +32,7 @@ export default class Tabs extends React.PureComponent { return (
    - {optionsText} + {optionsText} {this.props.children.map((tab) => { return (
    - {this.props.children.map((child) => { - if (child.props.label !== this.state.currentTab) return undefined; - return child.props.children; - })} + {this.props.children.map((child) => { + if (child.props.label !== this.state.currentTab) return undefined; + return child.props.children; + })}
    diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index 483ee345..a91f8cee 100644 --- a/src/components/widgets/Widgets.jsx +++ b/src/components/widgets/Widgets.jsx @@ -74,7 +74,7 @@ export default class Widgets extends React.PureComponent { if (order) { order.forEach(element => { - elements.push(this.widgets[element]); + elements.push({this.widgets[element]}); }); } else { elements = ['greeting', 'time', 'quote', 'date']; diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index 78780bb0..dde789d2 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -199,7 +199,8 @@ export default class Background extends React.PureComponent { return (
    - + {(this.state.photoInfo.credit !== '') ? + : null} ); } diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx index 2cfed0d5..ced681a5 100644 --- a/src/components/widgets/background/Favourite.jsx +++ b/src/components/widgets/background/Favourite.jsx @@ -7,7 +7,7 @@ export default class Favourite extends React.PureComponent { constructor(...args) { super(...args); this.state = { - favourited: this.favourite()} /> + favourited: (localStorage.getItem('favourite')) ? this.favourite()} /> : this.favourite()} /> }; } @@ -30,14 +30,6 @@ export default class Favourite extends React.PureComponent { } } - componentDidMount() { - if (localStorage.getItem('favourite')) { - this.setState({ - favourited: this.favourite()} /> - }); - } - } - render() { if (localStorage.getItem('favouriteEnabled') === 'false' || localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) { return null; diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx index 4d65e9d0..8da004e3 100644 --- a/src/components/widgets/background/Maximise.jsx +++ b/src/components/widgets/background/Maximise.jsx @@ -19,7 +19,7 @@ export default class View extends React.PureComponent { viewStuff() { // elements to hide - const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; + const elements = ['.searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; elements.forEach((element) => { try { diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index 51ce7a5e..85eed99c 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -10,7 +10,7 @@ import './scss/index.scss'; // the user probably won't use the notes feature every time so we lazy load const Notes = React.lazy(() => import('./Notes')); -const renderLoader = () =>
    ; +const renderLoader = () => <>; export default function Navbar(props) { const language = window.language; diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx index 05e460df..e0ced641 100644 --- a/src/components/widgets/search/Search.jsx +++ b/src/components/widgets/search/Search.jsx @@ -70,13 +70,11 @@ export default class Search extends React.PureComponent { render() { return ( - <> -