From 74e6d8ce81b0359ae97a58045e4d1a80198eba19 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Jul 2021 16:43:28 -0500
Subject: [PATCH] Refactor ThemeToggle, SettingToggle for performance

---
 .../components/setting_toggle.js              | 14 +++++--
 .../features/ui/components/theme_toggle.js    | 37 ++++++++++---------
 .../ui/components/theme_toggle_container.js   |  5 ++-
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/app/soapbox/features/notifications/components/setting_toggle.js b/app/soapbox/features/notifications/components/setting_toggle.js
index 145e2b03a..c9e649b6c 100644
--- a/app/soapbox/features/notifications/components/setting_toggle.js
+++ b/app/soapbox/features/notifications/components/setting_toggle.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import Toggle from 'react-toggle';
 
-export default class SettingToggle extends React.PureComponent {
+export default class SettingToggle extends ImmutablePureComponent {
 
   static propTypes = {
     prefix: PropTypes.string,
@@ -15,7 +16,6 @@ export default class SettingToggle extends React.PureComponent {
       PropTypes.bool,
       PropTypes.object,
     ]),
-    condition: PropTypes.string,
     ariaLabel: PropTypes.string,
   }
 
@@ -24,12 +24,18 @@ export default class SettingToggle extends React.PureComponent {
   }
 
   render() {
-    const { prefix, settings, settingPath, label, icons, condition, ariaLabel } = this.props;
+    const { prefix, settings, settingPath, label, icons, ariaLabel } = this.props;
     const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
 
     return (
       <div className='setting-toggle' aria-label={ariaLabel}>
-        <Toggle id={id} checked={condition ? settings.getIn(settingPath) === condition : settings.getIn(settingPath)} onChange={this.onChange} icons={icons} onKeyDown={this.onKeyDown} />
+        <Toggle
+          id={id}
+          checked={settings.getIn(settingPath)}
+          onChange={this.onChange}
+          icons={icons}
+          onKeyDown={this.onKeyDown}
+        />
         {label && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
       </div>
     );
diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
index 317020111..d1b706a0f 100644
--- a/app/soapbox/features/ui/components/theme_toggle.js
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@@ -1,44 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, defineMessages } from 'react-intl';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from '../../../components/icon';
-import SettingToggle from '../../notifications/components/setting_toggle';
+import Toggle from 'react-toggle';
 
 const messages = defineMessages({
   switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
   switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
 });
 
-export default @injectIntl
-class ThemeToggle extends React.PureComponent {
+export default class ThemeToggle extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
-    settings: ImmutablePropTypes.map.isRequired,
+    themeMode: PropTypes.string.isRequired,
     onToggle: PropTypes.func.isRequired,
     showLabel: PropTypes.bool,
   };
 
   handleToggleTheme = () => {
-    this.props.onToggle(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
+    this.props.onToggle(this.props.themeMode === 'light' ? 'dark' : 'light');
   }
 
   render() {
-    const { intl, settings, showLabel } = this.props;
-    let toggle = (
-      <SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} ariaLabel={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
-    );
-
-    if (showLabel) {
-      toggle = (
-        <SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} label={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
-      );
-    }
+    const { intl, themeMode, showLabel } = this.props;
+    const id ='theme-toggle';
+    const label = intl.formatMessage(themeMode === 'light' ? messages.switchToDark : messages.switchToLight);
 
     return (
       <div className='theme-toggle'>
-        {toggle}
+        <div className='setting-toggle' aria-label={label}>
+          <Toggle
+            id={id}
+            checked={themeMode === 'light'}
+            onChange={this.handleToggleTheme}
+            icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }}
+            onKeyDown={this.onKeyDown}
+          />
+          {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
+        </div>
       </div>
     );
   }
diff --git a/app/soapbox/features/ui/components/theme_toggle_container.js b/app/soapbox/features/ui/components/theme_toggle_container.js
index 4a2cad1f7..f9b1d5b73 100644
--- a/app/soapbox/features/ui/components/theme_toggle_container.js
+++ b/app/soapbox/features/ui/components/theme_toggle_container.js
@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
 import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import { injectIntl } from 'react-intl';
 import ThemeToggle from './theme_toggle';
 
 const mapStateToProps = state => {
   return {
-    settings: getSettings(state),
+    themeMode: getSettings(state).get('themeMode'),
   };
 };
 
@@ -14,4 +15,4 @@ const mapDispatchToProps = (dispatch) => ({
   },
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ThemeToggle);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ThemeToggle));