From ad4532c1504222164fb547968fbc34d6ec3a6acd Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Tue, 6 Feb 2024 20:51:19 +0000
Subject: [PATCH] refactor(tab): tab list use mapping

Co-authored-by: David Ralph <me@davidcralph.co.uk>
---
 .../modals/main/tabs/backend/Tab.jsx          | 179 ++++++------------
 src/components/widgets/message/Message.jsx    |  81 ++++----
 2 files changed, 92 insertions(+), 168 deletions(-)

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')]: <Overview />,
+  [variables.getMessage('modals.main.navbar.settings')]: <Settings />,
+  [variables.getMessage('modals.main.navbar.addons')]: <Addons />,
+  [variables.getMessage('modals.main.navbar.marketplace')]: <Marketplace />,
+  [variables.getMessage('modals.main.settings.sections.appearance.navbar.title')]: <Navbar />,
+  [variables.getMessage('modals.main.settings.sections.greeting.title')]: <Greeting />,
+  [variables.getMessage('modals.main.settings.sections.time.title')]: <Time />,
+  [variables.getMessage('modals.main.settings.sections.quicklinks.title')]: <QuickLinks />,
+  [variables.getMessage('modals.main.settings.sections.quote.title')]: <Quote />,
+  [variables.getMessage('modals.main.settings.sections.date.title')]: <Date />,
+  [variables.getMessage('modals.main.settings.sections.message.title')]: <Message />,
+  [variables.getMessage('modals.main.settings.sections.background.title')]: <Background />,
+  [variables.getMessage('modals.main.settings.sections.search.title')]: <MdSearch />,
+  [variables.getMessage('modals.main.settings.sections.weather.title')]: <Weather />,
+  [variables.getMessage('modals.main.settings.sections.appearance.title')]: <Appearance />,
+  [variables.getMessage('modals.main.settings.sections.language.title')]: <Language />,
+  [variables.getMessage('modals.main.settings.sections.advanced.title')]: <Advanced />,
+  [variables.getMessage('modals.main.settings.sections.stats.title')]: <Stats />,
+  [variables.getMessage('modals.main.settings.sections.experimental.title')]: <Experimental />,
+  [variables.getMessage('modals.main.settings.sections.changelog.title')]: <Changelog />,
+  [variables.getMessage('modals.main.settings.sections.about.title')]: <About />,
+  [variables.getMessage('modals.main.addons.added')]: <Added />,
+  [variables.getMessage('modals.main.addons.create.title')]: <Create />,
+  [variables.getMessage('modals.main.marketplace.all')]: <Addons />,
+  [variables.getMessage('modals.main.marketplace.photo_packs')]: <Background />,
+  [variables.getMessage('modals.main.marketplace.quote_packs')]: <Quote />,
+  [variables.getMessage('modals.main.marketplace.preset_settings')]: <Advanced />,
+  [variables.getMessage('modals.main.marketplace.collections')]: <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 = <Overview />;
-      mue = true;
-      break;
-    case variables.getMessage('modals.main.navbar.settings'):
-      icon = <Settings />;
-      break;
-    case variables.getMessage('modals.main.navbar.addons'):
-      icon = <Addons />;
-      break;
-    case variables.getMessage('modals.main.navbar.marketplace'):
-      icon = <Marketplace />;
-      break;
-
-    case variables.getMessage('modals.main.settings.sections.appearance.navbar.title'):
-      icon = <Navbar />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.greeting.title'):
-      icon = <Greeting />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.time.title'):
-      icon = <Time />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.quicklinks.title'):
-      icon = <QuickLinks />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.quote.title'):
-      icon = <Quote />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.date.title'):
-      icon = <Date />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.message.title'):
-      icon = <Message />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.background.title'):
-      icon = <Background />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.search.title'):
-      icon = <MdSearch />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.weather.title'):
-      icon = <Weather />;
-      divider = true;
-      break;
-    case variables.getMessage('modals.main.settings.sections.appearance.title'):
-      icon = <Appearance />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.language.title'):
-      icon = <Language />;
-      divider = true;
-      break;
-    case variables.getMessage('modals.main.settings.sections.advanced.title'):
-      icon = <Advanced />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.stats.title'):
-      icon = <Stats />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.experimental.title'):
-      icon = <Experimental />;
-      divider = true;
-      break;
-    case variables.getMessage('modals.main.settings.sections.changelog.title'):
-      icon = <Changelog />;
-      break;
-    case variables.getMessage('modals.main.settings.sections.about.title'):
-      icon = <About />;
-      break;
-
-    case variables.getMessage('modals.main.addons.added'):
-      mue = true;
-      icon = <Added />;
-      break;
-    case variables.getMessage('modals.main.addons.create.title'):
-      icon = <Create />;
-      break;
-
-    case variables.getMessage('modals.main.marketplace.all'):
-      icon = <Addons />;
-      divider = true;
-      mue = true;
-      break;
-    case variables.getMessage('modals.main.marketplace.photo_packs'):
-      icon = <Background />;
-      break;
-    case variables.getMessage('modals.main.marketplace.quote_packs'):
-      icon = <Quote />;
-      break;
-    case variables.getMessage('modals.main.marketplace.preset_settings'):
-      icon = <Advanced />;
-      break;
-    case variables.getMessage('modals.main.marketplace.collections'):
-      icon = <Collections />;
-      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 <hr />;
-    }
+  if (
+    label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
+    !isExperimental
+  ) {
+    return <hr />;
   }
 
   return (
     <>
-      {mue === true && <span className="mainTitle">Mue</span>}
+      {mue && <span className="mainTitle">Mue</span>}
       <button className={className} onClick={() => onClick(label)}>
         {icon} <span>{label}</span>
       </button>
-      {divider === true && <hr />}
+      {divider && <hr />}
     </>
   );
 }
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 (
+    <h2 className="message" ref={message} style={{ display, fontSize }}>
+      {messageText.split('\\n').map((item) => (
+        <span key={item}>
+          {item}
+          <br />
+        </span>
+      ))}
+    </h2>
+  );
+};
 
-  componentWillUnmount() {
-    EventBus.off('refresh');
-  }
-
-  render() {
-    return (
-      <h2 className="message" ref={this.message}>
-        {this.state.messageText.split('\\n').map((item, i) => (
-          <span key={i}>
-            {item}
-            <br />
-          </span>
-        ))}
-      </h2>
-    );
-  }
-}
+export default Message;