Integrate general settings with sidebar

Break the general settings into smaller components as per the wireframe

Change-Id: Ic76d5cfdbd8e2d984f8f2ee698727ed10611d799

client/src/components/AccountSettings/ManageAccount.tsx

@@ -18,11 +18,13 @@
 
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { useAuthContext } from '../../contexts/AuthProvider';
 import JamiIdCard from '../JamiIdCard';
 
 function ManageAccount() {
+  const { t } = useTranslation();
   const { account } = useAuthContext();
 
   const devices: string[][] = [];
@@ -32,12 +34,11 @@ function ManageAccount() {
   console.log(devices);
 
   const isJamiAccount = account.getType() === 'RING';
-  const alias = isJamiAccount ? 'Jami account' : 'SIP account';
 
   return (
     <>
       <Typography variant="h2" component="h2" gutterBottom>
-        {alias}
+        {t('jami_account')}
       </Typography>
       <Grid container spacing={3} style={{ marginBottom: 16 }}>
         {isJamiAccount && (

client/src/components/GeneralSettings/Appearance.tsx

+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CustomThemeContext } from '../../contexts/CustomThemeProvider';
+import { SettingsGroup, SettingSwitch } from '../Settings';
+function Appearance() {
+  const { t } = useTranslation();
+  return (
+    <SettingsGroup label={t('settings_theme')}>
+      <SettingTheme />
+    </SettingsGroup>
+  );
+}
+
+const SettingTheme = () => {
+  const { t } = useTranslation();
+
+  const { mode, toggleMode } = useContext(CustomThemeContext);
+
+  return <SettingSwitch label={t('settings_dark_theme')} onChange={toggleMode} checked={mode === 'dark'} />;
+};
+
+export default Appearance;

client/src/components/GeneralSettings/System.tsx

+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { languagesInfos, LanguageTag } from '../../i18n';
+import { SettingSelect, SettingSelectProps, SettingsGroup, SettingSwitch } from '../Settings';
+
+function System() {
+  const { t } = useTranslation();
+  return (
+    <SettingsGroup label={t('settings_title_system')}>
+      <SettingLanguage />
+      <SettingLinkPreview />
+    </SettingsGroup>
+  );
+}
+
+const settingLanguageOptions = languagesInfos.map(({ tag, fullName }) => ({
+  label: fullName,
+  payload: tag,
+}));
+
+const SettingLanguage = () => {
+  const { t, i18n } = useTranslation();
+
+  const option = useMemo(
+    // TODO: Tell Typescript the result can't be undefined
+    () => settingLanguageOptions.find((option) => option.payload === i18n.language),
+    [i18n.language]
+  );
+
+  const onChange = useCallback<SettingSelectProps<LanguageTag>['onChange']>(
+    (newValue) => {
+      if (newValue) {
+        i18n.changeLanguage(newValue.payload);
+      }
+    },
+    [i18n]
+  );
+
+  return (
+    <SettingSelect
+      label={t('settings_language')}
+      option={option}
+      options={settingLanguageOptions}
+      onChange={onChange}
+    />
+  );
+};
+
+const SettingLinkPreview = () => {
+  const { t } = useTranslation();
+
+  const [isOn, setIsOn] = useState<boolean>(true);
+
+  return <SettingSwitch label={t('settings_link_preview')} onChange={() => setIsOn((isOn) => !isOn)} checked={isOn} />;
+};
+
+export default System;

client/src/components/Header.tsx

@@ -22,8 +22,8 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-
-type NavigateURL = '/' | '/contacts' | '/settings-account' | '/settings-general';
+//TODO:  remove 'settings-account' and 'settings-general' when migration is finished
+type NavigateURL = '/' | '/contacts' | '/settings-account' | '/settings-general' | '/settings/account/manage-account';
 
 export default function Header() {
   const { t } = useTranslation();
@@ -51,6 +51,7 @@ export default function Header() {
         <MenuItem onClick={() => closeMenuAndNavigate(`/contacts`)}>{t('settings_menu_item_contacts')}</MenuItem>
         <MenuItem onClick={() => closeMenuAndNavigate('/settings-account')}>{t('settings_menu_item_account')}</MenuItem>
         <MenuItem onClick={() => closeMenuAndNavigate('/settings-general')}>{t('settings_menu_item_general')}</MenuItem>
+        <MenuItem onClick={() => closeMenuAndNavigate('/settings/account/manage-account')}>{t('settings')}</MenuItem>
         <MenuItem onClick={logout}>{t('logout')}</MenuItem>
       </Menu>
     </Box>

client/src/components/SettingSidebar.tsx

@@ -78,8 +78,14 @@ function SettingSidebar() {
         icon: null,
         title: t('settings_title_general'),
         highlightKey: 'general',
-        link: '/settings/general/appearance',
+        link: '/settings/general/system',
         submenuItems: [
+          {
+            highlightKey: 'system',
+            icon: null,
+            title: t('settings_title_system'),
+            link: '/settings/general/system',
+          },
           {
             highlightKey: 'appearance',
             icon: null,

client/src/locale/en/translation.json

@@ -69,6 +69,7 @@
   "incoming_call_video": "Incoming video call from {{member0}}",
   "invitations": "Invitations",
   "jami": "Jami",
+  "jami_account": "Jami Account",
   "jami_user_id": "Jami user ID",
   "jams": "JAMS",
   "loading": "Loading...",
@@ -132,6 +133,7 @@
   "registration_success": "You've successfully registered! — Logging you in...",
   "search_results": "Search Results",
   "select_placeholder": "Select an option",
+  "settings": "Settings",
   "settings_appearance": "Appearance",
   "settings_customize_profile": "Customize profile",
   "settings_dark_theme": "Dark theme",
@@ -142,6 +144,7 @@
   "settings_menu_item_account": "Account settings",
   "settings_menu_item_contacts": "Contacts",
   "settings_menu_item_general": "General settings",
+  "settings_theme": "Theme",
   "settings_title_account": "Account",
   "settings_title_chat": "Chat",
   "settings_title_general": "General",

client/src/locale/fr/translation.json

@@ -69,6 +69,7 @@
   "incoming_call_video": "Appel vidéo entrant de {{member0}}",
   "invitations": "Invitations",
   "jami": "Jami",
+  "jami_account": "Compte Jami",
   "jami_user_id": "ID Jami de l'utilisateur",
   "jams": "JAMS",
   "loading": "Chargement...",
@@ -132,6 +133,7 @@
   "registration_success": "Inscription réussie! — Connexion en cours...",
   "search_results": "Résultats de la recherche",
   "select_placeholder": "Sélectionner une option",
+  "settings": "Paramètres",
   "settings_appearance": "Apparence",
   "settings_customize_profile": "Paramétrer le profil",
   "settings_dark_theme": "Thème sombre",
@@ -142,6 +144,7 @@
   "settings_menu_item_account": "Paramètres du compte",
   "settings_menu_item_contacts": "Contacts",
   "settings_menu_item_general": "Paramètres généraux",
+  "settings_theme": "Thème",
   "settings_title_account": "Compte",
   "settings_title_chat": "Clavardage",
   "settings_title_general": "Général",

client/src/router.tsx

@@ -23,6 +23,8 @@ import LinkedDevices from './components/AccountSettings/LinkedDevices';
 import ManageAccount from './components/AccountSettings/ManageAccount';
 import ContactList from './components/ContactList';
 import ConversationView from './components/ConversationView';
+import Appearance from './components/GeneralSettings/Appearance';
+import System from './components/GeneralSettings/System';
 import Header from './components/Header';
 import SettingSidebar from './components/SettingSidebar';
 import AuthProvider from './contexts/AuthProvider';
@@ -88,7 +90,8 @@ export const router = createBrowserRouter(
           <Route path="settings/account/manage-account" element={<ManageAccount />} />
           <Route path="settings/account/customize-profile" element={<CustomizeProfile />} />
           <Route path="settings/account/linked-devices" element={<LinkedDevices />} />
-          <Route path="settings/general/appearance" element={<GeneralSettings />} />
+          <Route path="settings/general/system" element={<System />} />
+          <Route path="settings/general/appearance" element={<Appearance />} />
 
           <Route path="settings-account" element={<AccountSettings />} />
           <Route path="settings-general" element={<GeneralSettings />} />