Cleanup "LangSelect"

src/modules/core/components/inputs/LanguageSelect.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -20,21 +20,19 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItem from '@mui/material/ListItem';
 import { useTranslation } from 'react-i18next';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
-import { cloneObject } from '@/util/cloneObject.tsx';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 
 interface IProps {
-    shownLangs: string[];
+    selectedLanguages: string[];
-    setShownLangs: (arg0: string[]) => void;
+    setSelectedLanguages: (languages: string[]) => void;
-    allLangs: string[];
+    languages: string[];
 }
 
-export function LangSelect(props: IProps) {
+export function LanguageSelect(props: IProps) {
     const { t } = useTranslation();
 
-    const { shownLangs, setShownLangs, allLangs } = props;
+    const { selectedLanguages, setSelectedLanguages, languages } = props;
-    // hold a copy and only sate state on parent when OK pressed, improves performance
+    const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(selectedLanguages);
-    const [mShownLangs, setMShownLangs] = useState(cloneObject(shownLangs));
     const [open, setOpen] = useState<boolean>(false);
 
     const handleCancel = () => {
@@ -43,18 +41,14 @@ export function LangSelect(props: IProps) {
 
     const handleOk = () => {
         setOpen(false);
-        setShownLangs(mShownLangs);
+        setSelectedLanguages(tmpSelectedLanguages);
     };
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>, lang: string) => {
+    const handleChange = (language: string, selected: boolean) => {
-        const { checked } = event.target as HTMLInputElement;
+        if (selected) {
-
+            setTmpSelectedLanguages([...tmpSelectedLanguages, language]);
-        if (checked) {
-            setMShownLangs([...mShownLangs, lang]);
         } else {
-            const clone = cloneObject(mShownLangs);
+            setTmpSelectedLanguages(tmpSelectedLanguages.toSpliced(tmpSelectedLanguages.indexOf(language), 1));
-            clone.splice(clone.indexOf(lang), 1);
-            setMShownLangs(clone);
         }
     };
 
@@ -79,13 +73,13 @@ export function LangSelect(props: IProps) {
                 <DialogTitle>{t('global.language.title.enabled_languages')}</DialogTitle>
                 <DialogContent dividers sx={{ padding: 0 }}>
                     <List>
-                        {allLangs.map((lang) => (
+                        {languages.map((language) => (
-                            <ListItem key={lang}>
+                            <ListItem key={language}>
-                                <ListItemText primary={translateExtensionLanguage(lang)} />
+                                <ListItemText primary={translateExtensionLanguage(language)} />
 
                                 <Switch
-                                    checked={mShownLangs.indexOf(lang) !== -1}
+                                    checked={tmpSelectedLanguages.includes(language)}
-                                    onChange={(e) => handleChange(e, lang)}
+                                    onChange={(e) => handleChange(language, e.target.checked)}
                                 />
                             </ListItem>
                         ))}

src/modules/extension/screens/Extensions.tsx

@@ -22,7 +22,7 @@ import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
-import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
+import { LanguageSelect } from '@/modules/core/components/inputs/LanguageSelect.tsx';
 import { ExtensionCard } from '@/modules/extension/components/ExtensionCard.tsx';
 import { StyledGroupedVirtuoso } from '@/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
 import { StyledGroupHeader } from '@/modules/core/components/virtuoso/StyledGroupHeader.tsx';
@@ -229,12 +229,12 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
                     </IconButton>
                 </CustomTooltip>
 
-                <LangSelect
+                <LanguageSelect
-                    shownLangs={shownLangs}
+                    selectedLanguages={shownLangs}
-                    setShownLangs={(languages: string[]) =>
+                    setSelectedLanguages={(languages: string[]) =>
                         updateMetadataServerSettings('extensionLanguages', languages)
                     }
-                    allLangs={allLangs}
+                    languages={allLangs}
                 />
             </>,
         );

src/modules/global-search/screens/SearchAll.tsx

@@ -18,7 +18,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { sourceDefualtLangs } from '@/modules/core/utils/Languages.ts';
 import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
-import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
+import { LanguageSelect } from '@/modules/core/components/inputs/LanguageSelect.tsx';
 import { useDebounce } from '@/modules/core/hooks/useDebounce.ts';
 import { MangaCardProps } from '@/modules/manga/Manga.types.ts';
 import { EmptyView } from '@/modules/core/components/placeholder/EmptyView.tsx';
@@ -226,7 +226,11 @@ export const SearchAll: React.FC = () => {
         setAction(
             <>
                 <AppbarSearch isClosable={false} />
-                <LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={sourceLanguages} />
+                <LanguageSelect
+                    selectedLanguages={shownLangs}
+                    setSelectedLanguages={setShownLangs}
+                    languages={sourceLanguages}
+                />
             </>,
         );
 

src/modules/source/screens/Sources.tsx

@@ -18,7 +18,7 @@ import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { sourceDefualtLangs } from '@/modules/core/utils/Languages.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { SourceCard } from '@/modules/source/components/SourceCard.tsx';
-import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
+import { LanguageSelect } from '@/modules/core/components/inputs/LanguageSelect.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
@@ -66,7 +66,11 @@ export function Sources() {
                         <TravelExploreIcon />
                     </IconButton>
                 </CustomTooltip>
-                <LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={sourceLanguages} />
+                <LanguageSelect
+                    selectedLanguages={shownLangs}
+                    setSelectedLanguages={setShownLangs}
+                    languages={sourceLanguages}
+                />
             </>,
         );