Fix infinite hook call loop

Regression a7dcdd5651

"usePrevious" uses "useEffect" to update the ref while the fix of the commit updated the state during the render function call.
This causes the component to not actually render and immediately call the render function again. Which then leads to the "usePrevious" hooks "useEffect" to never getting called.

src/base/components/inputs/LanguageSelect.tsx

@@ -23,18 +23,22 @@ import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { translateExtensionLanguage } from '@/features/extension/Extensions.utils.ts';
 import { languageSortComparator, toUniqueLanguageCodes } from '@/base/utils/Languages.ts';
 import { usePrevious } from '@mantine/hooks';
+import { AwaitableComponent, type AwaitableComponentProps } from 'awaitable-component';
 
-interface IProps {
+const LanguageSelectDialog = ({
+    isVisible,
+    onDismiss,
+    onSubmit,
+    onExitComplete,
+    selectedLanguages,
+    languages,
+}: AwaitableComponentProps<string[]> & {
     selectedLanguages: string[];
-    setSelectedLanguages: (languages: string[]) => void;
     languages: string[];
-}
+}) => {
-
-export function LanguageSelect({ selectedLanguages, setSelectedLanguages, languages }: IProps) {
     const { t } = useLingui();
 
     const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(toUniqueLanguageCodes(selectedLanguages));
-    const [open, setOpen] = useState<boolean>(false);
 
     const previousSelectedLanguages = usePrevious(selectedLanguages);
 
@@ -53,14 +57,8 @@ export function LanguageSelect({ selectedLanguages, setSelectedLanguages, langua
         [languages, tmpSelectedLanguages],
     );
 
-    const handleCancel = () => {
-        setOpen(false);
-        setTmpSelectedLanguages(toUniqueLanguageCodes(selectedLanguages));
-    };
-
     const handleOk = () => {
-        setOpen(false);
+        onSubmit(toUniqueLanguageCodes(tmpSelectedLanguages));
-        setSelectedLanguages(toUniqueLanguageCodes(tmpSelectedLanguages));
     };
 
     const handleChange = (language: string, selected: boolean) => {
@@ -72,13 +70,7 @@ export function LanguageSelect({ selectedLanguages, setSelectedLanguages, langua
     };
 
     return (
-        <>
+        <Dialog fullWidth maxWidth="xs" open={isVisible} onClose={onDismiss} onTransitionExited={onExitComplete}>
-            <CustomTooltip title={t`Settings`}>
-                <IconButton onClick={() => setOpen(true)} aria-label="display more actions" edge="end" color="inherit">
-                    <FilterListIcon />
-                </IconButton>
-            </CustomTooltip>
-            <Dialog fullWidth maxWidth="xs" open={open} onClose={handleCancel}>
             <DialogTitle>{t`Allowed Languages`}</DialogTitle>
             <DialogContent dividers sx={{ padding: 0 }}>
                 <Virtuoso
@@ -103,7 +95,7 @@ export function LanguageSelect({ selectedLanguages, setSelectedLanguages, langua
                 />
             </DialogContent>
             <DialogActions>
-                    <Button autoFocus onClick={handleCancel} color="primary">
+                <Button autoFocus onClick={onDismiss} color="primary">
                     {t`Cancel`}
                 </Button>
                 <Button onClick={handleOk} color="primary">
@@ -111,6 +103,37 @@ export function LanguageSelect({ selectedLanguages, setSelectedLanguages, langua
                 </Button>
             </DialogActions>
         </Dialog>
-        </>
+    );
+};
+
+export function LanguageSelect({
+    setSelectedLanguages,
+    ...props
+}: {
+    selectedLanguages: string[];
+    setSelectedLanguages: (languages: string[]) => void;
+    languages: string[];
+}) {
+    const { t } = useLingui();
+
+    return (
+        <CustomTooltip title={t`Settings`}>
+            <IconButton
+                onClick={async () => {
+                    try {
+                        const updatedSelectedLanguages = await AwaitableComponent.show(LanguageSelectDialog, props);
+
+                        setSelectedLanguages(updatedSelectedLanguages);
+                    } catch (e) {
+                        // ignore
+                    }
+                }}
+                aria-label="display more actions"
+                edge="end"
+                color="inherit"
+            >
+                <FilterListIcon />
+            </IconButton>
+        </CustomTooltip>
     );
 }

src/features/source/components/SourceLanguageSelect.tsx

@@ -40,16 +40,21 @@ import { ListCardAvatar } from '@/base/components/lists/cards/ListCardAvatar.tsx
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
-import { usePrevious } from '@mantine/hooks';
+import { AwaitableComponent, type AwaitableComponentProps } from 'awaitable-component';
 
-export const SourceLanguageSelect = ({
+const SourceLanguageSelectDialog = ({
+    isVisible,
+    onDismiss,
+    onSubmit,
+    onExitComplete,
     selectedLanguages,
-    setSelectedLanguages,
     languages,
     sources,
-}: {
+}: AwaitableComponentProps<{
+    selectedLanguages: string[];
+    sourceEnabledStateMetaUpdatePayload: Parameters<typeof batchUpdateSourceMetadata>[0];
+}> & {
     selectedLanguages: string[];
-    setSelectedLanguages: (languages: string[]) => void;
     languages: string[];
     sources: (SourceIdInfo &
         SourceLanguageInfo &
@@ -63,12 +68,6 @@ export const SourceLanguageSelect = ({
     const [tmpSourceIdToEnabledState, setTmpSourceIdToEnabledState] = useState<Record<SourceIdInfo['id'], boolean>>({});
 
     const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(toUniqueLanguageCodes(selectedLanguages));
-    const [open, setOpen] = useState<boolean>(false);
-
-    const previousSelectedLanguages = usePrevious(selectedLanguages);
-    if (previousSelectedLanguages && previousSelectedLanguages !== selectedLanguages) {
-        setTmpSelectedLanguages(toUniqueLanguageCodes(selectedLanguages));
-    }
 
     const sourcesByLanguage = useMemo(() => Sources.groupByLanguage(sources), [sources]);
 
@@ -109,18 +108,10 @@ export const SourceLanguageSelect = ({
         useCallback((index) => flattenedSourcesByLanguages[index].id, [flattenedSourcesByLanguages]),
     );
 
-    const handleCancel = () => {
-        setOpen(false);
-
-        setTmpSourceIdToEnabledState({});
-        setTmpSelectedLanguages(toUniqueLanguageCodes(selectedLanguages));
-    };
-
     const handleOk = () => {
-        setOpen(false);
+        onSubmit({
-
+            selectedLanguages: toUniqueLanguageCodes(tmpSelectedLanguages),
-        batchUpdateSourceMetadata(
+            sourceEnabledStateMetaUpdatePayload: Object.entries(tmpSourceIdToEnabledState)
-            Object.entries(tmpSourceIdToEnabledState)
                 .map(([sourceId, enabled]) => {
                     const source = sources.find((sourceToEnable) => sourceToEnable.id === sourceId);
 
@@ -134,9 +125,7 @@ export const SourceLanguageSelect = ({
                     };
                 })
                 .filter((entry) => entry !== null),
-        ).catch((e) => makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)));
+        });
-        setTmpSourceIdToEnabledState({});
-        setSelectedLanguages(toUniqueLanguageCodes(tmpSelectedLanguages));
     };
 
     const handleChange = (language: string, selected: boolean) => {
@@ -148,13 +137,7 @@ export const SourceLanguageSelect = ({
     };
 
     return (
-        <>
+        <Dialog fullWidth maxWidth="xs" open={isVisible} onClose={onDismiss} onTransitionExited={onExitComplete}>
-            <CustomTooltip title={t`Settings`}>
-                <IconButton onClick={() => setOpen(true)} aria-label="display more actions" edge="end" color="inherit">
-                    <FilterListIcon />
-                </IconButton>
-            </CustomTooltip>
-            <Dialog fullWidth maxWidth="xs" open={open} onClose={handleCancel}>
             <DialogTitle>{t`Allowed Languages`}</DialogTitle>
             <DialogContent dividers sx={{ padding: 0 }}>
                 {!languages.length && <Box sx={{ p: 1 }}>{t`No sources installed`}</Box>}
@@ -226,7 +209,7 @@ export const SourceLanguageSelect = ({
                 />
             </DialogContent>
             <DialogActions>
-                    <Button autoFocus onClick={handleCancel} color="primary">
+                <Button autoFocus onClick={onDismiss} color="primary">
                     {t`Cancel`}
                 </Button>
                 <Button onClick={handleOk} color="primary">
@@ -234,6 +217,47 @@ export const SourceLanguageSelect = ({
                 </Button>
             </DialogActions>
         </Dialog>
-        </>
+    );
+};
+
+export const SourceLanguageSelect = ({
+    setSelectedLanguages,
+    ...props
+}: {
+    selectedLanguages: string[];
+    setSelectedLanguages: (languages: string[]) => Promise<void>;
+    languages: string[];
+    sources: (SourceIdInfo &
+        SourceLanguageInfo &
+        SourceNameInfo &
+        SourceDisplayNameInfo &
+        SourceIconInfo &
+        SourceMetaInfo)[];
+}) => {
+    const { t } = useLingui();
+
+    return (
+        <CustomTooltip title={t`Settings`}>
+            <IconButton
+                onClick={async () => {
+                    try {
+                        const { selectedLanguages: updatedSelectedLanguages, sourceEnabledStateMetaUpdatePayload } =
+                            await AwaitableComponent.show(SourceLanguageSelectDialog, props);
+
+                        await Promise.all([
+                            setSelectedLanguages(updatedSelectedLanguages),
+                            batchUpdateSourceMetadata(sourceEnabledStateMetaUpdatePayload),
+                        ]).catch((e) => makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)));
+                    } catch (e) {
+                        // Ignore
+                    }
+                }}
+                aria-label="display more actions"
+                edge="end"
+                color="inherit"
+            >
+                <FilterListIcon />
+            </IconButton>
+        </CustomTooltip>
     );
 };

src/features/source/services/Sources.ts

@@ -176,7 +176,7 @@ export class Sources {
 
     static useLanguages(): {
         languages: string[];
-        setLanguages: (languages: string[]) => void;
+        setLanguages: (languages: string[]) => Promise<void>;
     } {
         const { t } = useLingui();
         const {