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,33 +5,44 @@ import T from '@/components/T';
 
 import classes from './styles.module.scss';
 
-class Settings extends Component {
+const Settings = ({
-  handleSoundToggle() {
+  soundIsEnabled,
-    this.props.toggleSoundEnabled(!this.props.soundIsEnabled);
+  persistenceIsEnabled,
-  }
+  toggleSoundEnabled,
+  notificationIsEnabled,
+  notificationIsAllowed,
+  toggleNotificationEnabled,
+  toggleNotificationAllowed,
+  togglePersistenceEnabled,
+  roomId,
+  setLanguage,
+  language,
+  translations,
+}) => {
+  const handleSoundToggle = () => {
+    toggleSoundEnabled(!soundIsEnabled);
+  };
 
-  handlePersistenceToggle() {
+  const handlePersistenceToggle = () => {
-    this.props.togglePersistenceEnabled(!this.props.persistenceIsEnabled);
+    togglePersistenceEnabled(!persistenceIsEnabled);
-  }
+  };
 
-  handleNotificationToggle() {
+  const handleNotificationToggle = () => {
     Notification.requestPermission().then(permission => {
       if (permission === 'granted') {
-        this.props.toggleNotificationEnabled(!this.props.notificationIsEnabled);
+        toggleNotificationEnabled(!notificationIsEnabled);
-        this.props.toggleNotificationAllowed(true);
+        toggleNotificationAllowed(true);
       }
       if (permission === 'denied') {
-        this.props.toggleNotificationAllowed(false);
+        toggleNotificationAllowed(false);
       }
     });
-  }
+  };
 
-  handleLanguageChange(evt) {
+  const handleLanguageChange = evt => {
-    const language = evt.target.value;
+    setLanguage(evt.target.value);
-    this.props.setLanguage(language);
+  };
-  }
 
-  render() {
   return (
     <div className={classes.styles}>
       <section>
@@ -44,40 +54,40 @@ class Settings extends Component {
             <label className="form-check-label" htmlFor="sound-control">
               <input
                 id="sound-control"
-                  onChange={this.handleSoundToggle.bind(this)}
+                onChange={handleSoundToggle}
                 className="form-check-input"
                 type="checkbox"
-                  checked={this.props.soundIsEnabled}
+                checked={soundIsEnabled}
               />
               <T path="sound" />
             </label>
           </div>
           <div className="form-check">
             <label className="form-check-label" htmlFor="notif-control">
-                {this.props.notificationIsAllowed !== false && (
+              {notificationIsAllowed !== false && (
                 <>
                   <input
                     id="notif-control"
-                      onChange={this.handleNotificationToggle.bind(this)}
+                    onChange={handleNotificationToggle}
                     className="form-check-input"
                     type="checkbox"
-                      checked={this.props.notificationIsEnabled}
+                    checked={notificationIsEnabled}
-                      disabled={this.props.notificationIsAllowed === false} // Important to keep '=== false' here
+                    disabled={notificationIsAllowed === false} // Important to keep '=== false' here
                   />
                   <T path="desktopNotification" />
                 </>
               )}
-                {this.props.notificationIsAllowed === false && <T path="desktopNotificationBlocked" />}
+              {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)}
+                onChange={handlePersistenceToggle}
                 className="form-check-input"
                 type="checkbox"
-                  checked={this.props.persistenceIsEnabled}
+                checked={persistenceIsEnabled}
               />
               <T path="persistence" />
             </label>
@@ -89,7 +99,7 @@ class Settings extends Component {
         <h4 className="mb-3">
           <T path="copyRoomHeader" />
         </h4>
-          <RoomLink roomId={this.props.roomId} translations={this.props.translations} />
+        <RoomLink roomId={roomId} translations={translations} />
       </section>
 
       <section>
@@ -106,11 +116,7 @@ class Settings extends Component {
           </a>
         </p>
         <div className="form-group">
-            <select
+          <select value={language} className="form-control" onChange={handleLanguageChange}>
-              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>
@@ -180,19 +186,20 @@ class Settings extends Component {
       </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,
 };