diff --git a/src/modules/core/components/inputs/LangSelect.tsx b/src/modules/core/components/inputs/LanguageSelect.tsx similarity index 72% rename from src/modules/core/components/inputs/LangSelect.tsx rename to src/modules/core/components/inputs/LanguageSelect.tsx index 50739919..e10401c0 100644 --- a/src/modules/core/components/inputs/LangSelect.tsx +++ b/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[]; - setShownLangs: (arg0: string[]) => void; - allLangs: string[]; + selectedLanguages: string[]; + setSelectedLanguages: (languages: string[]) => void; + languages: string[]; } -export function LangSelect(props: IProps) { +export function LanguageSelect(props: IProps) { const { t } = useTranslation(); - const { shownLangs, setShownLangs, allLangs } = props; - // hold a copy and only sate state on parent when OK pressed, improves performance - const [mShownLangs, setMShownLangs] = useState(cloneObject(shownLangs)); + const { selectedLanguages, setSelectedLanguages, languages } = props; + const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(selectedLanguages); const [open, setOpen] = useState(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, lang: string) => { - const { checked } = event.target as HTMLInputElement; - - if (checked) { - setMShownLangs([...mShownLangs, lang]); + const handleChange = (language: string, selected: boolean) => { + if (selected) { + setTmpSelectedLanguages([...tmpSelectedLanguages, language]); } else { - const clone = cloneObject(mShownLangs); - clone.splice(clone.indexOf(lang), 1); - setMShownLangs(clone); + setTmpSelectedLanguages(tmpSelectedLanguages.toSpliced(tmpSelectedLanguages.indexOf(language), 1)); } }; @@ -79,13 +73,13 @@ export function LangSelect(props: IProps) { {t('global.language.title.enabled_languages')} - {allLangs.map((lang) => ( - - + {languages.map((language) => ( + + handleChange(e, lang)} + checked={tmpSelectedLanguages.includes(language)} + onChange={(e) => handleChange(language, e.target.checked)} /> ))} diff --git a/src/modules/extension/screens/Extensions.tsx b/src/modules/extension/screens/Extensions.tsx index ebad528d..87c5269a 100644 --- a/src/modules/extension/screens/Extensions.tsx +++ b/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 }) { - + updateMetadataServerSettings('extensionLanguages', languages) } - allLangs={allLangs} + languages={allLangs} /> , ); diff --git a/src/modules/global-search/screens/SearchAll.tsx b/src/modules/global-search/screens/SearchAll.tsx index 1679f7df..d566f151 100644 --- a/src/modules/global-search/screens/SearchAll.tsx +++ b/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( <> - + , ); diff --git a/src/modules/source/screens/Sources.tsx b/src/modules/source/screens/Sources.tsx index 03a4b499..86a2dcde 100644 --- a/src/modules/source/screens/Sources.tsx +++ b/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() { - + , );