refactor(tabs): Functional component conversion

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -1,5 +1,5 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   MdSettings,
   MdOutlineShoppingBasket,
@@ -11,111 +11,104 @@ import Tab from './Tab';
 import { Button } from 'components/Elements';
 import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
 
-class Tabs extends PureComponent {
-  constructor(props) {
-    super(props);
+const Tabs = (props) => {
+  const [currentTab, setCurrentTab] = useState(props.children[0].props.label);
+  const [currentName, setCurrentName] = useState(props.children[0].props.name);
 
-    this.state = {
-      currentTab: this.props.children[0].props.label,
-      currentName: this.props.children[0].props.name,
-    };
-  }
-
-  onClick = (tab, name) => {
-    if (name !== this.state.currentName) {
+  const onClick = (tab, name) => {
+    if (name !== currentName) {
       variables.stats.postEvent('tab', `Opened ${name}`);
     }
 
-    this.setState({
-      currentTab: tab,
-      currentName: name,
-    });
+    setCurrentTab(tab);
+    setCurrentName(name);
   };
 
-  hideReminder() {
+  const hideReminder = () => {
     localStorage.setItem('showReminder', false);
     document.querySelector('.reminder-info').style.display = 'none';
-  }
+  };
 
-  render() {
-    const navbarButtons = [
-      {
-        tab: 'settings',
-        icon: <MdSettings />,
-      },
-      {
-        tab: 'addons',
-        icon: <MdOutlineExtension />,
-      },
-      {
-        tab: 'marketplace',
-        icon: <MdOutlineShoppingBasket />,
-      },
-    ];
+  const navbarButtons = [
+    {
+      tab: 'settings',
+      icon: <MdSettings />,
+    },
+    {
+      tab: 'addons',
+      icon: <MdOutlineExtension />,
+    },
+    {
+      tab: 'marketplace',
+      icon: <MdOutlineShoppingBasket />,
+    },
+  ];
 
-    const reminderInfo = (
-      <div
-        className="reminder-info"
-        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
-      >
-        <div className="shareHeader">
-          <span className="title">
-            {variables.getMessage('modals.main.settings.reminder.title')}
-          </span>
-          <span className="closeModal" onClick={() => this.hideReminder()}>
-            <MdClose />
-          </span>
-        </div>
-        <span className="subtitle">
-          {variables.getMessage('modals.main.settings.reminder.message')}
+  const reminderInfo = (
+    <div
+      className="reminder-info"
+      style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+    >
+      <div className="shareHeader">
+        <span className="title">
+          {variables.getMessage('modals.main.settings.reminder.title')}
+        </span>
+        <span className="closeModal" onClick={hideReminder}>
+          <MdClose />
         </span>
-        <button onClick={() => window.location.reload()}>
-          <MdRefresh />
-          {variables.getMessage('modals.main.error_boundary.refresh')}
-        </button>
       </div>
-    );
+      <span className="subtitle">
+        {variables.getMessage('modals.main.settings.reminder.message')}
+      </span>
+      <button onClick={() => window.location.reload()}>
+        <MdRefresh />
+        {variables.getMessage('modals.main.error_boundary.refresh')}
+      </button>
+    </div>
+  );
 
-    return (
-      <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-        <div className="modalSidebar">
-          {this.props.children.map((tab, index) => (
-            <Tab
-              currentTab={this.state.currentTab}
-              key={index}
-              label={tab.props.label}
-              onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
-              navbarTab={this.props.navbar || false}
+  return (
+    <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
+      <h1>{currentTab}</h1>
+      <h1>{currentName}</h1>
+      <h1>{props.current}</h1>
+      <div className="modalSidebar">
+        {props.children.map((tab, index) => (
+          <Tab
+            currentTab={currentTab}
+            key={index}
+            label={tab.props.label}
+            onClick={(nextTab) => onClick(nextTab, tab.props.name)}
+            navbarTab={props.navbar || false}
+          />
+        ))}
+        {reminderInfo}
+      </div>
+      <div className="modalTabContent">
+        <div className="modalNavbar">
+          {navbarButtons.map(({ tab, icon }, index) => (
+            <Button
+              type="navigation"
+              onClick={() => props.changeTab(tab)}
+              icon={icon}
+              label={variables.getMessage(`modals.main.navbar.${tab}`)}
+              active={props.current === tab}
+              key={`${tab}-${index}`}
             />
           ))}
-          {reminderInfo}
         </div>
-        <div className="modalTabContent">
-          <div className="modalNavbar">
-            {navbarButtons.map(({ tab, icon }, index) => (
-              <Button
-                type="navigation"
-                onClick={() => this.props.changeTab(tab)}
-                icon={icon}
-                label={variables.getMessage(`modals.main.navbar.${tab}`)}
-                active={this.props.current === tab}
-                key={`${tab}-${index}`}
-              />
-            ))}
-          </div>
-          {this.props.children.map((tab, index) => {
-            if (tab.props.label !== this.state.currentTab) {
-              return undefined;
-            }
+        {props.children.map((tab, index) => {
+          if (tab.props.label !== currentTab) {
+            return undefined;
+          }
 
-            return (
-              <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
-            );
-          })}
-        </div>
+          return (
+            <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+          );
+        })}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Tabs;