refactor Settings

client/src/components/Settings/Settings.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { describe, it, expect, vi } from 'vitest';
@@ -9,10 +8,6 @@ import Settings from '.';
 
 const store = configureStore();
 
-const mockTranslations = {
-  sound: 'soundCheck',
-};
-
 vi.useFakeTimers();
 
 vi.mock('@/components/RoomLink');
@@ -39,11 +34,14 @@ describe('Settings component', () => {
         <Settings
           soundIsEnabled={true}
           toggleSoundEnabled={() => {}}
+          persistenceIsEnabled={true}
+          togglePersistenceEnabled={() => {}}
           notificationIsEnabled={true}
           toggleNotificationEnabled={() => {}}
           toggleNotificationAllowed={vi.fn()}
           roomId="roomId"
           setLanguage={() => {}}
+          language="en"
           translations={{}}
         />
       </Provider>,
@@ -56,12 +54,15 @@ describe('Settings component', () => {
         <Settings
           soundIsEnabled={true}
           toggleSoundEnabled={() => {}}
+          persistenceIsEnabled={true}
+          togglePersistenceEnabled={() => {}}
           notificationIsEnabled={true}
           notificationIsAllowed={false}
           toggleNotificationEnabled={() => {}}
           toggleNotificationAllowed={vi.fn()}
           roomId="roomId"
           setLanguage={() => {}}
+          language="en"
           translations={{}}
         />
       </Provider>,
@@ -77,18 +78,20 @@ describe('Settings component', () => {
         <Settings
           soundIsEnabled={true}
           toggleSoundEnabled={toggleSound}
+          persistenceIsEnabled={true}
+          togglePersistenceEnabled={() => {}}
           notificationIsEnabled={true}
           notificationIsAllowed={true}
           toggleNotificationEnabled={() => {}}
           toggleNotificationAllowed={vi.fn()}
           roomId="roomId"
           setLanguage={() => {}}
+          language="en"
           translations={{}}
         />
       </Provider>,
     );
 
-    //console.log(getAllByText(mockTranslations.sound)[1]);
     fireEvent.click(getByText('Sound'));
 
     expect(toggleSound).toHaveBeenCalledWith(false);
@@ -105,12 +108,15 @@ describe('Settings component', () => {
         <Settings
           soundIsEnabled={true}
           toggleSoundEnabled={() => {}}
+          persistenceIsEnabled={true}
+          togglePersistenceEnabled={() => {}}
           notificationIsEnabled={true}
           notificationIsAllowed={true}
           toggleNotificationEnabled={toggleNotifications}
           toggleNotificationAllowed={vi.fn()}
           roomId="roomId"
           setLanguage={() => {}}
+          language="en"
           translations={{}}
         />
       </Provider>,
@@ -137,12 +143,15 @@ describe('Settings component', () => {
         <Settings
           soundIsEnabled={true}
           toggleSoundEnabled={() => {}}
+          persistenceIsEnabled={true}
+          togglePersistenceEnabled={() => {}}
           notificationIsEnabled={true}
           notificationIsAllowed={true}
           toggleNotificationEnabled={toggleNotifications}
           toggleNotificationAllowed={toggleAllowed}
           roomId="roomId"
           setLanguage={() => {}}
+          language="en"
           translations={{}}
         />
       </Provider>,
@@ -166,11 +175,14 @@ describe('Settings component', () => {
         <Settings
           soundIsEnabled={true}
           toggleSoundEnabled={() => {}}
+          persistenceIsEnabled={true}
+          togglePersistenceEnabled={() => {}}
           notificationIsEnabled={true}
           toggleNotificationEnabled={() => {}}
           toggleNotificationAllowed={vi.fn()}
           roomId="roomId"
           setLanguage={changeLang}
+          language="en"
           translations={{}}
         />
       </Provider>,

client/src/components/Settings/__snapshots__/Settings.test.jsx.snap

@@ -50,6 +50,7 @@ exports[`Settings component > should display 1`] = `
             for="persistence-control"
           >
             <input
+              checked=""
               class="form-check-input"
               id="persistence-control"
               type="checkbox"
@@ -261,6 +262,7 @@ exports[`Settings component > should display 2`] = `
             for="persistence-control"
           >
             <input
+              checked=""
               class="form-check-input"
               id="persistence-control"
               type="checkbox"

client/src/components/Settings/index.jsx

@@ -1,4 +1,3 @@
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import RoomLink from '@/components/RoomLink';
@@ -6,193 +5,201 @@ import T from '@/components/T';
 
 import classes from './styles.module.scss';
 
-class Settings extends Component {
-  handleSoundToggle() {
-    this.props.toggleSoundEnabled(!this.props.soundIsEnabled);
-  }
+const Settings = ({
+  soundIsEnabled,
+  persistenceIsEnabled,
+  toggleSoundEnabled,
+  notificationIsEnabled,
+  notificationIsAllowed,
+  toggleNotificationEnabled,
+  toggleNotificationAllowed,
+  togglePersistenceEnabled,
+  roomId,
+  setLanguage,
+  language,
+  translations,
+}) => {
+  const handleSoundToggle = () => {
+    toggleSoundEnabled(!soundIsEnabled);
+  };
 
-  handlePersistenceToggle() {
-    this.props.togglePersistenceEnabled(!this.props.persistenceIsEnabled);
-  }
+  const handlePersistenceToggle = () => {
+    togglePersistenceEnabled(!persistenceIsEnabled);
+  };
 
-  handleNotificationToggle() {
+  const handleNotificationToggle = () => {
     Notification.requestPermission().then(permission => {
       if (permission === 'granted') {
-        this.props.toggleNotificationEnabled(!this.props.notificationIsEnabled);
-        this.props.toggleNotificationAllowed(true);
+        toggleNotificationEnabled(!notificationIsEnabled);
+        toggleNotificationAllowed(true);
       }
       if (permission === 'denied') {
-        this.props.toggleNotificationAllowed(false);
+        toggleNotificationAllowed(false);
       }
     });
-  }
+  };
 
-  handleLanguageChange(evt) {
-    const language = evt.target.value;
-    this.props.setLanguage(language);
-  }
+  const handleLanguageChange = evt => {
+    setLanguage(evt.target.value);
+  };
 
-  render() {
-    return (
-      <div className={classes.styles}>
-        <section>
-          <h4>
-            <T path="newMessageNotification" />
-          </h4>
-          <form>
-            <div className="form-check">
-              <label className="form-check-label" htmlFor="sound-control">
-                <input
-                  id="sound-control"
-                  onChange={this.handleSoundToggle.bind(this)}
-                  className="form-check-input"
-                  type="checkbox"
-                  checked={this.props.soundIsEnabled}
-                />
-                <T path="sound" />
-              </label>
-            </div>
-            <div className="form-check">
-              <label className="form-check-label" htmlFor="notif-control">
-                {this.props.notificationIsAllowed !== false && (
-                  <>
-                    <input
-                      id="notif-control"
-                      onChange={this.handleNotificationToggle.bind(this)}
-                      className="form-check-input"
-                      type="checkbox"
-                      checked={this.props.notificationIsEnabled}
-                      disabled={this.props.notificationIsAllowed === false} // Important to keep '=== false' here
-                    />
-                    <T path="desktopNotification" />
-                  </>
-                )}
-                {this.props.notificationIsAllowed === false && <T path="desktopNotificationBlocked" />}
-              </label>
-            </div>
-            <div className="form-check">
-              <label className="form-check-label" htmlFor="persistence-control">
-                <input
-                  id="persistence-control"
-                  onChange={this.handlePersistenceToggle.bind(this)}
-                  className="form-check-input"
-                  type="checkbox"
-                  checked={this.props.persistenceIsEnabled}
-                />
-                <T path="persistence" />
-              </label>
-            </div>
-          </form>
-        </section>
-
-        <section>
-          <h4 className="mb-3">
-            <T path="copyRoomHeader" />
-          </h4>
-          <RoomLink roomId={this.props.roomId} translations={this.props.translations} />
-        </section>
-
-        <section>
-          <h4 className="mb-3">
-            <T path="languageDropdownHeader" />
-          </h4>
-          <p>
-            <a
-              href="https://github.com/darkwire/darkwire.io/blob/master/client/README.md#translations"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <T path="helpTranslate" />
-            </a>
-          </p>
-          <div className="form-group">
-            <select
-              value={this.props.language}
-              className="form-control"
-              onChange={this.handleLanguageChange.bind(this)}
-            >
-              <option value="en">English</option>
-              <option value="fr">Français</option>
-              <option value="oc">Occitan</option>
-              <option value="de">Deutsch</option>
-              <option value="esAR">Español (Argentina)</option>
-              <option value="nl">Nederlands</option>
-              <option value="it">Italiano</option>
-              <option value="ru">Русский</option>
-              <option value="pl">Polish</option>
-              <option value="zhCN">中文</option>
-              <option value="ja">日本語</option>
-              <option value="tr">Türkçe</option>
-              <option value="ko">한국어</option>
-            </select>
+  return (
+    <div className={classes.styles}>
+      <section>
+        <h4>
+          <T path="newMessageNotification" />
+        </h4>
+        <form>
+          <div className="form-check">
+            <label className="form-check-label" htmlFor="sound-control">
+              <input
+                id="sound-control"
+                onChange={handleSoundToggle}
+                className="form-check-input"
+                type="checkbox"
+                checked={soundIsEnabled}
+              />
+              <T path="sound" />
+            </label>
           </div>
-        </section>
+          <div className="form-check">
+            <label className="form-check-label" htmlFor="notif-control">
+              {notificationIsAllowed !== false && (
+                <>
+                  <input
+                    id="notif-control"
+                    onChange={handleNotificationToggle}
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={notificationIsEnabled}
+                    disabled={notificationIsAllowed === false} // Important to keep '=== false' here
+                  />
+                  <T path="desktopNotification" />
+                </>
+              )}
+              {notificationIsAllowed === false && <T path="desktopNotificationBlocked" />}
+            </label>
+          </div>
+          <div className="form-check">
+            <label className="form-check-label" htmlFor="persistence-control">
+              <input
+                id="persistence-control"
+                onChange={handlePersistenceToggle}
+                className="form-check-input"
+                type="checkbox"
+                checked={persistenceIsEnabled}
+              />
+              <T path="persistence" />
+            </label>
+          </div>
+        </form>
+      </section>
 
-        <section>
-          <h4>
-            <T path="roomOwnerHeader" />
-          </h4>
-          <p>
-            <T path="roomOwnerText" />
-          </p>
-        </section>
-        <section>
-          <h4>
-            <T path="lockRoomHeader" />
-          </h4>
-          <p>
-            <T path="lockRoomText" />
-          </p>
-        </section>
-        <section>
-          <h4>
-            <T path="slashCommandsHeader" />
-          </h4>
-          <p>
-            <T path="slashCommandsText" />
-          </p>
-          <ul>
-            <li>
-              /nick [username]{' '}
-              <span className="text-muted">
-                <T path="slashCommandsBullets.0" />
-              </span>
-            </li>
-            <li>
-              /me [action]{' '}
-              <span className="text-muted">
-                <T path="slashCommandsBullets.1" />
-              </span>
-            </li>
-            <li>
-              /clear{' '}
-              <span className="text-muted">
-                <T path="slashCommandsBullets.2" />
-              </span>
-            </li>
-            <li>
-              /help{' '}
-              <span className="text-muted">
-                <T path="slashCommandsBullets.3" />
-              </span>
-            </li>
-          </ul>
-        </section>
-      </div>
-    );
-  }
-}
+      <section>
+        <h4 className="mb-3">
+          <T path="copyRoomHeader" />
+        </h4>
+        <RoomLink roomId={roomId} translations={translations} />
+      </section>
+
+      <section>
+        <h4 className="mb-3">
+          <T path="languageDropdownHeader" />
+        </h4>
+        <p>
+          <a
+            href="https://github.com/darkwire/darkwire.io/blob/master/client/README.md#translations"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <T path="helpTranslate" />
+          </a>
+        </p>
+        <div className="form-group">
+          <select value={language} className="form-control" onChange={handleLanguageChange}>
+            <option value="en">English</option>
+            <option value="fr">Français</option>
+            <option value="oc">Occitan</option>
+            <option value="de">Deutsch</option>
+            <option value="esAR">Español (Argentina)</option>
+            <option value="nl">Nederlands</option>
+            <option value="it">Italiano</option>
+            <option value="ru">Русский</option>
+            <option value="pl">Polish</option>
+            <option value="zhCN">中文</option>
+            <option value="ja">日本語</option>
+            <option value="tr">Türkçe</option>
+            <option value="ko">한국어</option>
+          </select>
+        </div>
+      </section>
+
+      <section>
+        <h4>
+          <T path="roomOwnerHeader" />
+        </h4>
+        <p>
+          <T path="roomOwnerText" />
+        </p>
+      </section>
+      <section>
+        <h4>
+          <T path="lockRoomHeader" />
+        </h4>
+        <p>
+          <T path="lockRoomText" />
+        </p>
+      </section>
+      <section>
+        <h4>
+          <T path="slashCommandsHeader" />
+        </h4>
+        <p>
+          <T path="slashCommandsText" />
+        </p>
+        <ul>
+          <li>
+            /nick [username]{' '}
+            <span className="text-muted">
+              <T path="slashCommandsBullets.0" />
+            </span>
+          </li>
+          <li>
+            /me [action]{' '}
+            <span className="text-muted">
+              <T path="slashCommandsBullets.1" />
+            </span>
+          </li>
+          <li>
+            /clear{' '}
+            <span className="text-muted">
+              <T path="slashCommandsBullets.2" />
+            </span>
+          </li>
+          <li>
+            /help{' '}
+            <span className="text-muted">
+              <T path="slashCommandsBullets.3" />
+            </span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+};
 
 Settings.propTypes = {
   soundIsEnabled: PropTypes.bool.isRequired,
   persistenceIsEnabled: PropTypes.bool.isRequired,
   toggleSoundEnabled: PropTypes.func.isRequired,
+  togglePersistenceEnabled: PropTypes.func.isRequired,
   notificationIsEnabled: PropTypes.bool.isRequired,
   notificationIsAllowed: PropTypes.bool,
   toggleNotificationEnabled: PropTypes.func.isRequired,
   toggleNotificationAllowed: PropTypes.func.isRequired,
   roomId: PropTypes.string.isRequired,
   setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
   translations: PropTypes.object.isRequired,
 };