diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 96b3631b..98e81634 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -1,5 +1,5 @@
import variables from 'modules/variables';
-import { memo } from 'react';
+import { memo, useState, useEffect } from 'react';
import {
MdSettings as Settings,
MdWidgets as Addons,
@@ -27,137 +27,76 @@ import {
MdCollectionsBookmark as Collections,
} from 'react-icons/md';
+const iconMapping = {
+ [variables.getMessage('modals.main.marketplace.product.overview')]: ,
+ [variables.getMessage('modals.main.navbar.settings')]: ,
+ [variables.getMessage('modals.main.navbar.addons')]: ,
+ [variables.getMessage('modals.main.navbar.marketplace')]: ,
+ [variables.getMessage('modals.main.settings.sections.appearance.navbar.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.greeting.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.time.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.quicklinks.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.quote.title')]:
,
+ [variables.getMessage('modals.main.settings.sections.date.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.message.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.background.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.search.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.weather.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.appearance.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.language.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.advanced.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.stats.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.experimental.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.changelog.title')]: ,
+ [variables.getMessage('modals.main.settings.sections.about.title')]: ,
+ [variables.getMessage('modals.main.addons.added')]: ,
+ [variables.getMessage('modals.main.addons.create.title')]: ,
+ [variables.getMessage('modals.main.marketplace.all')]: ,
+ [variables.getMessage('modals.main.marketplace.photo_packs')]: ,
+ [variables.getMessage('modals.main.marketplace.quote_packs')]:
,
+ [variables.getMessage('modals.main.marketplace.preset_settings')]: ,
+ [variables.getMessage('modals.main.marketplace.collections')]: ,
+};
+
function Tab({ label, currentTab, onClick, navbarTab }) {
- let className = 'tab-list-item';
+ const [isExperimental, setIsExperimental] = useState(true);
+
+ useEffect(() => {
+ setIsExperimental(localStorage.getItem('experimental') !== 'false');
+ }, []);
+
+ let className = navbarTab ? 'navbar-item' : 'tab-list-item';
if (currentTab === label) {
- className += ' tab-list-active';
+ className += navbarTab ? ' navbar-item-active' : ' tab-list-active';
}
- if (navbarTab === true) {
- className = 'navbar-item';
- if (currentTab === label) {
- className += ' navbar-item-active';
- }
- }
+ const icon = iconMapping[label];
+ const divider = [
+ variables.getMessage('modals.main.settings.sections.weather.title'),
+ variables.getMessage('modals.main.settings.sections.language.title'),
+ variables.getMessage('modals.main.marketplace.all'),
+ variables.getMessage('modals.main.settings.sections.experimental.title'),
+ ].includes(label);
+ const mue = [
+ variables.getMessage('modals.main.marketplace.product.overview'),
+ variables.getMessage('modals.main.addons.added'),
+ variables.getMessage('modals.main.marketplace.all'),
+ ].includes(label);
- let icon, divider, mue;
- switch (label) {
- case variables.getMessage('modals.main.marketplace.product.overview'):
- icon = ;
- mue = true;
- break;
- case variables.getMessage('modals.main.navbar.settings'):
- icon = ;
- break;
- case variables.getMessage('modals.main.navbar.addons'):
- icon = ;
- break;
- case variables.getMessage('modals.main.navbar.marketplace'):
- icon = ;
- break;
-
- case variables.getMessage('modals.main.settings.sections.appearance.navbar.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.greeting.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.time.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.quicklinks.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.quote.title'):
- icon =
;
- break;
- case variables.getMessage('modals.main.settings.sections.date.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.message.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.background.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.search.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.weather.title'):
- icon = ;
- divider = true;
- break;
- case variables.getMessage('modals.main.settings.sections.appearance.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.language.title'):
- icon = ;
- divider = true;
- break;
- case variables.getMessage('modals.main.settings.sections.advanced.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.stats.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.experimental.title'):
- icon = ;
- divider = true;
- break;
- case variables.getMessage('modals.main.settings.sections.changelog.title'):
- icon = ;
- break;
- case variables.getMessage('modals.main.settings.sections.about.title'):
- icon = ;
- break;
-
- case variables.getMessage('modals.main.addons.added'):
- mue = true;
- icon = ;
- break;
- case variables.getMessage('modals.main.addons.create.title'):
- icon = ;
- break;
-
- case variables.getMessage('modals.main.marketplace.all'):
- icon = ;
- divider = true;
- mue = true;
- break;
- case variables.getMessage('modals.main.marketplace.photo_packs'):
- icon = ;
- break;
- case variables.getMessage('modals.main.marketplace.quote_packs'):
- icon =
;
- break;
- case variables.getMessage('modals.main.marketplace.preset_settings'):
- icon = ;
- break;
- case variables.getMessage('modals.main.marketplace.collections'):
- icon = ;
- break;
-
- case variables.getMessage('modals.main.loading'):
- mue = true;
- break;
-
- default:
- break;
- }
-
- if (label === variables.getMessage('modals.main.settings.sections.experimental.title')) {
- if (localStorage.getItem('experimental') === 'false') {
- return
;
- }
+ if (
+ label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
+ !isExperimental
+ ) {
+ return
;
}
return (
<>
- {mue === true && Mue}
+ {mue && Mue}
- {divider === true &&
}
+ {divider &&
}
>
);
}
diff --git a/src/components/widgets/message/Message.jsx b/src/components/widgets/message/Message.jsx
index 8bb3020e..9307ea6e 100644
--- a/src/components/widgets/message/Message.jsx
+++ b/src/components/widgets/message/Message.jsx
@@ -1,60 +1,45 @@
-import { PureComponent, createRef } from 'react';
-
+import { useState, useEffect, useRef } from 'react';
import EventBus from 'modules/helpers/eventbus';
-
import './message.scss';
-export default class Message extends PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- messageText: '',
- };
- this.message = createRef();
- }
+const Message = () => {
+ const [messageText, setMessageText] = useState('');
+ const [display, setDisplay] = useState('none');
+ const [fontSize, setFontSize] = useState('1em');
+ const message = useRef();
- componentDidMount() {
- EventBus.on('refresh', (data) => {
+ useEffect(() => {
+ const handleRefresh = (data) => {
if (data === 'message') {
- if (localStorage.getItem('message') === 'false') {
- return (this.message.current.style.display = 'none');
- }
-
- this.message.current.style.display = 'block';
- this.message.current.style.fontSize = `${
- 1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
- }em`;
+ const messageSetting = localStorage.getItem('message');
+ const zoomMessage = localStorage.getItem('zoomMessage');
+ setDisplay(messageSetting === 'false' ? 'none' : 'block');
+ setFontSize(`${1 * Number((zoomMessage || 100) / 100)}em`);
}
- });
+ };
const messages = JSON.parse(localStorage.getItem('messages')) || [];
- if (messages.length === 0) {
- return (this.message.current.style.display = 'none');
+ if (messages.length > 0) {
+ setMessageText(messages[Math.floor(Math.random() * messages.length)]);
+ setDisplay('block');
}
- this.message.current.style.fontSize = `${
- 1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
- }em`;
+ EventBus.on('refresh', handleRefresh);
+ return () => {
+ EventBus.off('refresh');
+ };
+ }, []);
- this.setState({
- messageText: messages[Math.floor(Math.random() * messages.length)],
- });
- }
+ return (
+
+ {messageText.split('\\n').map((item) => (
+
+ {item}
+
+
+ ))}
+
+ );
+};
- componentWillUnmount() {
- EventBus.off('refresh');
- }
-
- render() {
- return (
-
- {this.state.messageText.split('\\n').map((item, i) => (
-
- {item}
-
-
- ))}
-
- );
- }
-}
+export default Message;