Add prefer-template rule

front/.eslintrc.json

@@ -6,7 +6,9 @@
     "preact-i18n/no-missing-template-field": "error",
     "preact-i18n/no-text-as-attribute": "error",
     "preact-i18n/no-text-as-children": "error",
-    "preact-i18n/no-unknown-key": "error"
+    "preact-i18n/no-unknown-key": "error",
+    "no-useless-concat": "error",
+    "prefer-template": "error"
   },
   "plugins": ["json", "preact-i18n"],
   "parserOptions": {

front/src/components/boxs/device-in-room/RoomCard.jsx

@@ -1,3 +1,5 @@
+import cx from 'classnames';
+
 import DeviceRow from './DeviceRow';
 
 const RoomCard = ({ children, ...props }) => {
@@ -6,10 +8,7 @@ const RoomCard = ({ children, ...props }) => {
   }
 
   return (
-    <div
-      class={'card ' + (props.room.collapsed ? ' card-collapsed' : '')}
-      style="display: inline-block; min-width: 300px"
-    >
+    <div class={cx('card', { 'card-collapsed': props.room.collapsed })} style="display: inline-block; min-width: 300px">
       <div class="card-header">
         <h3 class="card-title">{props.room.name}</h3>
         <div class="card-options">

front/src/components/boxs/weather/EditWeatherBox.jsx

@@ -32,7 +32,7 @@ const EditWeatherBox = ({ children, ...props }) => (
       <div>
         {Object.keys(GetWeatherModes).map(key => {
           const mode = GetWeatherModes[key];
-          const label = 'dashboard.boxes.weather.displayModes.' + mode;
+          const label = `dashboard.boxes.weather.displayModes.${mode}`;
           return (
             <div className="form-check">
               <input

front/src/components/boxs/weather/WeatherBox.jsx

@@ -2,6 +2,8 @@ import { Component } from 'preact';
 import { connect } from 'unistore/preact';
 import { Text } from 'preact-i18n';
 import { Link } from 'preact-router/match';
+import cx from 'classnames';
+
 import actions from '../../../actions/dashboard/boxes/weather';
 import {
   RequestStatus,
@@ -104,7 +106,7 @@ const WeatherBox = ({ children, ...props }) => (
             color: '#76838f'
           }}
         >
-          {props.datetimeBeautiful + ' - ' + props.houseName}
+          {`${props.datetimeBeautiful} - ${props.houseName}`}
         </div>
         <div class="row">
           <div class="col-9">
@@ -134,7 +136,7 @@ const WeatherBox = ({ children, ...props }) => (
             }}
           >
             <i
-              className={'fe ' + props.weather_icon}
+              className={cx('fe', props.weather_icon)}
               style={{
                 fontSize: '50px'
               }}
@@ -244,10 +246,10 @@ class WeatherBoxComponent extends Component {
           return (
             <div style={Object.assign({ width: '10%', margin: '0.25em 1.25%' })}>
               <p style={{ margin: 'auto', textAlign: 'center', fontSize: '10px', color: 'grey' }}>
-                {hour.datetime_beautiful + 'h'}
+                {`${hour.datetime_beautiful}h`}
               </p>
               <p style={{ margin: 'auto', textAlign: 'center' }}>
-                <i className={'fe ' + hour.weather_icon} style={{ fontSize: '20px' }} />
+                <i className={cx('fe', hour.weather_icon)} style={{ fontSize: '20px' }} />
               </p>
               <p style={{ margin: 'auto', textAlign: 'center', fontSize: '12px' }}>
                 <Text id="global.degreeValue" fields={{ value: hour.temperature }} />
@@ -267,7 +269,7 @@ class WeatherBoxComponent extends Component {
             <div className="row" style={{ marginTop: '0.5em' }}>
               <div className="col-5">{day.datetime_beautiful}</div>
               <div className="col-3">
-                <i className={'fe ' + day.weather_icon} style={{ fontSize: '20px' }} />
+                <i className={cx('fe', day.weather_icon)} style={{ fontSize: '20px' }} />
               </div>
               <div className="col-4" style={{ textAlign: 'right' }}>
                 <Text

front/src/components/header/index.jsx

@@ -1,5 +1,5 @@
 import { Text, Localizer } from 'preact-i18n';
-import classnames from 'classnames';
+import cx from 'classnames';
 import { Link } from 'preact-router/match';
 import { isUrlInArray } from '../../utils/url';
 
@@ -42,7 +42,7 @@ const Header = ({ ...props }) => {
               </span>
             </a>
             <div class="d-flex order-lg-2 ml-auto">
-              <div class={'dropdown' + (props.showDropDown && ' show')}>
+              <div class={cx('dropdown', { show: props.showDropDown })}>
                 <a onClick={props.toggleDropDown} class="nav-link pr-0 leading-none" data-toggle="dropdown">
                   <span class="avatar" style={`background-image: url(${props.profilePicture})`} />
                   <span class="ml-2 d-none d-lg-block">
@@ -53,7 +53,11 @@ const Header = ({ ...props }) => {
                     </small>
                   </span>
                 </a>
-                <div class={'dropdown-menu dropdown-menu-right dropdown-menu-arrow' + (props.showDropDown && ' show')}>
+                <div
+                  class={cx('dropdown-menu', 'dropdown-menu-right', 'dropdown-menu-arrow', {
+                    show: props.showDropDown
+                  })}
+                >
                   <a class="dropdown-item" href="/dashboard/profile">
                     <i class="dropdown-icon fe fe-user" /> <Text id="header.profile" />
                   </a>
@@ -86,15 +90,18 @@ const Header = ({ ...props }) => {
           </div>
         </div>
       </div>
-      <div class={'header collapse d-lg-flex p-0 ' + (props.showCollapsedMenu && ' show')} id="headerMenuCollapse">
+      <div
+        class={cx('header', 'collapse', 'd-lg-flex', 'p-0', { show: props.showCollapsedMenu })}
+        id="headerMenuCollapse"
+      >
         <div class="container">
           <div class="row align-items-center">
             <div class="col-lg order-lg-first">
               <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                 <li class="nav-item">
                   <Link
                     href="/dashboard"
-                    class={classnames('nav-link', {
+                    class={cx('nav-link', {
                       active: props.currentUrl === '/dashboard'
                     })}
                   >
@@ -104,7 +111,7 @@ const Header = ({ ...props }) => {
                 <li class="nav-item">
                   <Link
                     href="/dashboard/chat"
-                    class={classnames('nav-link', {
+                    class={cx('nav-link', {
                       active: props.currentUrl === '/dashboard/chat'
                     })}
                   >
@@ -122,7 +129,7 @@ const Header = ({ ...props }) => {
                 <li class="nav-item">
                   <Link
                     href="/dashboard/calendar"
-                    class={classnames('nav-link', {
+                    class={cx('nav-link', {
                       active: props.currentUrl === '/dashboard/calendar'
                     })}
                   >
@@ -133,7 +140,7 @@ const Header = ({ ...props }) => {
                   <Link
                     activeClassName="active"
                     href="/dashboard/maps"
-                    class={classnames('nav-link', {
+                    class={cx('nav-link', {
                       active: props.currentUrl === '/dashboard/maps'
                     })}
                   >

front/src/routes/dashboard/EditAddBoxButton.jsx

@@ -22,7 +22,7 @@ const EditAddBoxButton = ({ children, ...props }) => (
         </option>
         {DASHBOARD_BOX_TYPE_LIST.map(dashboardBoxType => (
           <option value={dashboardBoxType}>
-            <Text id={'dashboard.boxTitle.' + dashboardBoxType} />
+            <Text id={`dashboard.boxTitle.${dashboardBoxType}`} />
           </option>
         ))}
       </select>

front/src/routes/gateway-confirm-email/ConfirmEmail.js

@@ -41,7 +41,7 @@ const ConfirmEmail = ({ children, ...props }) => (
                     </div>
 
                     <div class="form-footer">
-                      <a href={'/login?email=' + props.email} class="btn btn-primary btn-block">
+                      <a href={`/login?email=${props.email}`} class="btn btn-primary btn-block">
                         <Text id="forgotPassword.signIn" />
                       </a>
                     </div>

front/src/routes/gateway-reset-password/ResetPasswordForm.js

@@ -1,4 +1,5 @@
 import { Text, Localizer } from 'preact-i18n';
+import cx from 'classnames';
 
 const ResetPassworFrom = ({ children, ...props }) => (
   <form onSubmit={props.resetPassword} className="card">
@@ -28,7 +29,7 @@ const ResetPassworFrom = ({ children, ...props }) => (
         <Localizer>
           <input
             type="password"
-            className={'form-control ' + (props.passwordError ? 'is-invalid' : '')}
+            className={cx('form-control', { 'is-invalid': props.passwordError })}
             placeholder={<Text id="gatewayResetPassword.passwordPlaceholder" />}
             value={props.password}
             onInput={props.updatePassword}
@@ -45,7 +46,7 @@ const ResetPassworFrom = ({ children, ...props }) => (
         <Localizer>
           <input
             type="password"
-            className={'form-control ' + (props.passwordError ? 'is-invalid' : '')}
+            className={cx('form-control', { 'is-invalid': props.passwordError })}
             placeholder={<Text id="gatewayResetPassword.passwordPlaceholder" />}
             value={props.passwordRepeat}
             onInput={props.updatePasswordRepeat}

front/src/routes/integration/all/bluetooth/device-page/actions.js

@@ -45,7 +45,7 @@ function createActions(store) {
       store.setState(newState);
     },
     async deleteDevice(state, device, index) {
-      await state.httpClient.delete('/api/v1/device/' + device.selector);
+      await state.httpClient.delete(`/api/v1/device/${device.selector}`);
       const newState = update(state, {
         bluetoothDevices: {
           $splice: [[index, 1]]

front/src/routes/integration/all/bluetooth/setup-page/BluetoothPeripheral.jsx

@@ -52,7 +52,7 @@ class BluetoothPeripheral extends Component {
             />
             <div class="form-group">
               {bluetoothDevice && (
-                <Link href={'/dashboard/integration/device/bluetooth/setup/' + peripheral.selector}>
+                <Link href={`/dashboard/integration/device/bluetooth/setup/${peripheral.selector}`}>
                   {!peripheralService && (
                     <button class="btn btn-success">
                       <Text id="integration.bluetooth.setup.createDeviceInGladys" />

front/src/routes/integration/all/philips-hue/device-page/FoundDevices.jsx

@@ -12,7 +12,7 @@ const GITHUB_BASE_URL = 'https://github.com/GladysAssistant/Gladys/issues/new';
 
 const createGithubUrl = device => {
   const title = encodeURIComponent(`Philips Hue: Add device ${device.model}`);
-  const body = encodeURIComponent('```\n' + JSON.stringify(device, null, 2) + '\n```');
+  const body = encodeURIComponent(`\`\`\`\n${JSON.stringify(device, null, 2)}\n\`\`\``);
   return `${GITHUB_BASE_URL}?title=${title}&body=${body}`;
 };
 

front/src/routes/integration/all/philips-hue/device-page/actions.js

@@ -96,7 +96,7 @@ function createActions(store) {
       store.setState(newState);
     },
     async deleteDevice(state, device, index) {
-      await state.httpClient.delete('/api/v1/device/' + device.selector);
+      await state.httpClient.delete(`/api/v1/device/${device.selector}`);
       const newState = update(state, {
         philipsHueDevices: {
           $splice: [[index, 1]]

front/src/routes/integration/all/philips-hue/setup-page/actions.js

@@ -44,7 +44,7 @@ const actions = store => ({
       philipsHueDeleteDeviceStatus: RequestStatus.Getting
     });
     try {
-      await state.httpClient.delete('/api/v1/device/' + device.selector);
+      await state.httpClient.delete(`/api/v1/device/${device.selector}`);
       const newState = update(state, {
         philipsHueBridgesDevices: {
           $splice: [[index, 1]]

front/src/routes/integration/all/xiaomi/actions.js

@@ -75,7 +75,7 @@ function createActions(store) {
       await state.httpClient.post('/api/v1/device', device);
     },
     async deleteDevice(state, device, index) {
-      await state.httpClient.delete('/api/v1/device/' + device.selector);
+      await state.httpClient.delete(`/api/v1/device/${device.selector}`);
       const newState = update(state, {
         xiaomiDevices: {
           $splice: [[index, 1]]

front/src/routes/integration/all/zwave/node-page/actions.js

@@ -44,7 +44,7 @@ function createActions(store) {
       store.setState(newState);
     },
     async deleteDevice(state, device, index) {
-      await state.httpClient.delete('/api/v1/device/' + device.selector);
+      await state.httpClient.delete(`/api/v1/device/${device.selector}`);
       const newState = update(state, {
         zwaveDevices: {
           $splice: [[index, 1]]

front/src/routes/integration/all/zwave/setup-page/Node.jsx

@@ -18,7 +18,7 @@ const createGithubUrl = node => {
     classes: Object.keys(rawZwaveNode.classes)
   };
   const title = encodeURIComponent(`Z-Wave: Handle device "${rawZwaveNode.manufacturer} ${rawZwaveNode.product}"`);
-  const body = encodeURIComponent('```\n' + JSON.stringify(deviceToSend, null, 2) + '\n```');
+  const body = encodeURIComponent(`\`\`\`\n${JSON.stringify(deviceToSend, null, 2)}\n\`\`\``);
   return `${GITHUB_BASE_URL}?title=${title}&body=${body}`;
 };
 

front/src/routes/settings/settings-gateway-open-api/OpenApi.js

@@ -1,4 +1,5 @@
 import { Text, Localizer, MarkupText } from 'preact-i18n';
+import cx from 'classnames';
 
 import OpenApiKey from './OpenApiKey';
 
@@ -44,7 +45,7 @@ const OpenApi = ({ children, ...props }) => (
                 <Localizer>
                   <input
                     type="text"
-                    class={'form-control ' + (props.missingNewOpenApiName ? 'is-invalid' : '')}
+                    class={cx('form-control', { 'is-invalid': props.missingNewOpenApiName })}
                     value={props.newApiKeyName}
                     onChange={props.updateNewApiKeyName}
                     placeholder={<Text id="gatewayOpenApi.keyName" />}

front/src/routes/settings/settings-gateway-users/UserRow.js

@@ -12,7 +12,7 @@ const UserRow = ({ children, ...props }) => {
       <td class="w-1">
         <span
           class="avatar"
-          style={'background-image: url(' + (props.user.profile_url || '/assets/images/undraw_profile_pic.svg') + ')'}
+          style={`background-image: url(${props.user.profile_url || '/assets/images/undraw_profile_pic.svg'}')`}
         />
       </td>
       <td>

front/src/routes/signup-gateway/SignupForm.js

@@ -1,4 +1,5 @@
 import { Text, Localizer } from 'preact-i18n';
+import cx from 'classnames';
 
 const SignupForm = ({ children, ...props }) => (
   <form onSubmit={props.validateForm} className="card">
@@ -44,7 +45,7 @@ const SignupForm = ({ children, ...props }) => (
             <Localizer>
               <input
                 type="text"
-                className={'form-control ' + (props.fieldsErrored.includes('name') ? 'is-invalid' : '')}
+                className={cx('form-control', { 'is-invalid': props.fieldsErrored.includes('name') })}
                 placeholder={<Text id="gatewaySignUp.usernamePlaceholder" />}
                 value={props.name}
                 onInput={props.updateName}
@@ -61,7 +62,7 @@ const SignupForm = ({ children, ...props }) => (
             <Localizer>
               <input
                 type="email"
-                className={'form-control ' + (props.fieldsErrored.includes('email') ? 'is-invalid' : '')}
+                className={cx('form-control', { 'is-invalid': props.fieldsErrored.includes('email') })}
                 placeholder={<Text id="gatewaySignUp.emailPlaceholder" />}
                 value={props.email}
                 disabled={props.token && 'disabled'}
@@ -79,7 +80,7 @@ const SignupForm = ({ children, ...props }) => (
             <Localizer>
               <input
                 type="password"
-                className={'form-control ' + (props.fieldsErrored.includes('password') ? 'is-invalid' : '')}
+                className={cx('form-control', { 'is-invalid': props.fieldsErrored.includes('password') })}
                 placeholder={<Text id="gatewaySignUp.passwordPlaceholder" />}
                 value={props.password}
                 onInput={props.updatePassword}

front/src/routes/signup-gateway/SignupGeneratingKeys.js

@@ -1,5 +1,6 @@
 import { Text, MarkupText } from 'preact-i18n';
 import style from './spinner.css';
+import cx from 'classnames';
 
 const SignupGeneratingKeys = ({ children, ...props }) => (
   <div onSubmit={props.validateForm} className="card" style={{ height: '250px' }}>
@@ -13,11 +14,11 @@ const SignupGeneratingKeys = ({ children, ...props }) => (
           </p>
         )}
       </div>
-      {!props.signupCompleted && <div class={style.spWave + ' ' + style.sp} />}
+      {!props.signupCompleted && <div class={cx(style.spWave, style.sp)} />}
 
       {props.signupCompleted && (
-        <div class={style['circle-loader'] + ' ' + style['load-complete']}>
-          <div class={style.checkmark + ' ' + style.draw} />
+        <div class={cx(style['circle-loader'], style['load-complete'])}>
+          <div class={cx(style.checkmark, style.draw)} />
         </div>
       )}
       <div />

front/src/routes/signup/1-welcome/WelcomeTab.jsx

@@ -1,6 +1,7 @@
 import style from '../style.css';
 import { Text, MarkupText } from 'preact-i18n';
 import { Link } from 'preact-router/match';
+import cx from 'classnames';
 
 const margin70px = {
   marginTop: '70px'
@@ -9,8 +10,8 @@ const margin20px = {
   marginTop: '20px'
 };
 
-const WelcomeStep = ({ children, ...props }) => (
-  <div class={'row ' + style.equal}>
+const WelcomeStep = () => (
+  <div class={cx('row', style.equal)}>
     <div class="col-lg-6">
       <h2>
         <Text id="signup.welcome.title" />

front/src/routes/signup/5-success/SuccessTab.jsx

@@ -1,11 +1,12 @@
 import { Text, MarkupText } from 'preact-i18n';
 import style from '../style.css';
 import { Link } from 'preact-router/match';
+import cx from 'classnames';
 
-const ConfigureHouseTab = ({ children, ...props }) => (
+const ConfigureHouseTab = () => (
   <div class="card">
     <div class="card-body">
-      <div class={'row ' + style.equal}>
+      <div class={cx('row', style.equal)}>
         <div class="col-md">
           <img src="/assets/images/pierre-gilles-bali.jpg" />
         </div>

front/src/utils/bytesFormat.js

@@ -1,6 +1,6 @@
 function bytesFormatter(size) {
   const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
-  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+  return `${(size / Math.pow(1024, i)).toFixed(2) * 1} ${['B', 'kB', 'MB', 'GB', 'TB'][i]}`;
 }
 
 export { bytesFormatter };