Fix a issue that seleection of the languages profiles could be Unknown on settings page

frontend/src/pages/Settings/Languages/components.tsx

@@ -1,6 +1,6 @@
 import { LanguageSelector as CLanguageSelector } from "components";
 import React, { FunctionComponent, useMemo } from "react";
-import { useEnabledLanguagesContext, useProfilesContext } from ".";
+import { useLatestEnabledLanguages, useLatestProfiles } from ".";
 import { BaseInput, Selector, useSingleUpdate } from "../components";
 
 interface LanguageSelectorProps {
@@ -10,7 +10,7 @@ interface LanguageSelectorProps {
 export const LanguageSelector: FunctionComponent<
   LanguageSelectorProps & BaseInput<string[]>
 > = ({ settingKey, options }) => {
-  const enabled = useEnabledLanguagesContext();
+  const enabled = useLatestEnabledLanguages();
   const update = useSingleUpdate();
 
   return (
@@ -30,7 +30,7 @@ interface ProfileSelectorProps {}
 export const ProfileSelector: FunctionComponent<
   ProfileSelectorProps & BaseInput<Language.Profile>
 > = ({ settingKey }) => {
-  const profiles = useProfilesContext();
+  const profiles = useLatestProfiles();
 
   const profileOptions = useMemo<SelectorOption<number>[]>(
     () =>

frontend/src/pages/Settings/Languages/index.tsx

@@ -1,6 +1,6 @@
 import { useLanguageProfiles, useLanguages } from "apis/hooks";
 import { isArray } from "lodash";
-import React, { FunctionComponent, useContext } from "react";
+import React, { FunctionComponent } from "react";
 import { useEnabledLanguages } from "utilities/languages";
 import {
   Check,
@@ -15,32 +15,25 @@ import { enabledLanguageKey, languageProfileKey } from "../keys";
 import { LanguageSelector, ProfileSelector } from "./components";
 import Table from "./table";
 
-const EnabledLanguageContext = React.createContext<readonly Language.Info[]>(
-  []
-);
-const LanguagesProfileContext = React.createContext<
-  readonly Language.Profile[]
->([]);
-
-export function useEnabledLanguagesContext() {
-  const list = useContext(EnabledLanguageContext);
+export function useLatestEnabledLanguages() {
+  const { data } = useEnabledLanguages();
   const latest = useLatest<Language.Info[]>(enabledLanguageKey, isArray);
 
   if (latest) {
     return latest;
   } else {
-    return list;
+    return data;
   }
 }
 
-export function useProfilesContext() {
-  const list = useContext(LanguagesProfileContext);
+export function useLatestProfiles() {
+  const { data = [] } = useLanguageProfiles();
   const latest = useLatest<Language.Profile[]>(languageProfileKey, isArray);
 
   if (latest) {
     return latest;
   } else {
-    return list;
+    return data;
   }
 }
 
@@ -48,81 +41,73 @@ interface Props {}
 
 const SettingsLanguagesView: FunctionComponent<Props> = () => {
   const { data: languages } = useLanguages();
-  const { data: enabled } = useEnabledLanguages();
-  const { data: profiles } = useLanguageProfiles();
 
   return (
     <SettingsProvider title="Languages - Bazarr (Settings)">
-      <EnabledLanguageContext.Provider value={enabled}>
-        <LanguagesProfileContext.Provider value={profiles ?? []}>
-          <Group header="Subtitles Language">
+      <Group header="Subtitles Language">
+        <Input>
+          <Check
+            label="Single Language"
+            settingKey="settings-general-single_language"
+          ></Check>
+          <Message>
+            Download a single Subtitles file without adding the language code to
+            the filename.
+          </Message>
+          <Message type="warning">
+            We don't recommend enabling this option unless absolutely required
+            (ie: media player not supporting language code in subtitles
+            filename). Results may vary.
+          </Message>
+        </Input>
+        <Input name="Languages Filter">
+          <LanguageSelector
+            settingKey={enabledLanguageKey}
+            options={languages ?? []}
+          ></LanguageSelector>
+        </Input>
+      </Group>
+      <Group header="Languages Profiles">
+        <Table></Table>
+      </Group>
+      <Group header="Default Settings">
+        <CollapseBox>
+          <CollapseBox.Control>
             <Input>
               <Check
-                label="Single Language"
-                settingKey="settings-general-single_language"
+                label="Series"
+                settingKey="settings-general-serie_default_enabled"
               ></Check>
               <Message>
-                Download a single Subtitles file without adding the language
-                code to the filename.
+                Apply only to Series added to Bazarr after enabling this option.
               </Message>
-              <Message type="warning">
-                We don't recommend enabling this option unless absolutely
-                required (ie: media player not supporting language code in
-                subtitles filename). Results may vary.
+            </Input>
+          </CollapseBox.Control>
+          <CollapseBox.Content indent>
+            <Input name="Profile">
+              <ProfileSelector settingKey="settings-general-serie_default_profile"></ProfileSelector>
+            </Input>
+          </CollapseBox.Content>
+        </CollapseBox>
+        <CollapseBox>
+          <CollapseBox.Control>
+            <Input>
+              <Check
+                label="Movies"
+                settingKey="settings-general-movie_default_enabled"
+              ></Check>
+              <Message>
+                Apply only to Movies added to Bazarr after enabling this option.
               </Message>
             </Input>
-            <Input name="Languages Filter">
-              <LanguageSelector
-                settingKey={enabledLanguageKey}
-                options={languages ?? []}
-              ></LanguageSelector>
+          </CollapseBox.Control>
+          <CollapseBox.Content>
+            <Input name="Profile">
+              <ProfileSelector settingKey="settings-general-movie_default_profile"></ProfileSelector>
             </Input>
-          </Group>
-          <Group header="Languages Profiles">
-            <Table></Table>
-          </Group>
-          <Group header="Default Settings">
-            <CollapseBox>
-              <CollapseBox.Control>
-                <Input>
-                  <Check
-                    label="Series"
-                    settingKey="settings-general-serie_default_enabled"
-                  ></Check>
-                  <Message>
-                    Apply only to Series added to Bazarr after enabling this
-                    option.
-                  </Message>
-                </Input>
-              </CollapseBox.Control>
-              <CollapseBox.Content indent>
-                <Input name="Profile">
-                  <ProfileSelector settingKey="settings-general-serie_default_profile"></ProfileSelector>
-                </Input>
-              </CollapseBox.Content>
-            </CollapseBox>
-            <CollapseBox>
-              <CollapseBox.Control>
-                <Input>
-                  <Check
-                    label="Movies"
-                    settingKey="settings-general-movie_default_enabled"
-                  ></Check>
-                  <Message>
-                    Apply only to Movies added to Bazarr after enabling this
-                    option.
-                  </Message>
-                </Input>
-              </CollapseBox.Control>
-              <CollapseBox.Content>
-                <Input name="Profile">
-                  <ProfileSelector settingKey="settings-general-movie_default_profile"></ProfileSelector>
-                </Input>
-              </CollapseBox.Content>
-            </CollapseBox>
-          </Group>
-        </LanguagesProfileContext.Provider>
-      </EnabledLanguageContext.Provider>
+          </CollapseBox.Content>
+        </CollapseBox>
+      </Group>
     </SettingsProvider>
   );
 };

frontend/src/pages/Settings/Languages/modal.tsx

@@ -19,7 +19,7 @@ import React, {
 import { Button, Form } from "react-bootstrap";
 import { Column, TableUpdater } from "react-table";
 import { BuildKey } from "utilities";
-import { useEnabledLanguagesContext } from ".";
+import { useLatestEnabledLanguages } from ".";
 import { Input, Message } from "../components";
 import { cutoffOptions } from "./options";
 interface Props {
@@ -45,7 +45,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
   const { payload: profile, closeModal } =
     useModalInformation<Language.Profile>(modal.modalKey);
 
-  const languages = useEnabledLanguagesContext();
+  const languages = useLatestEnabledLanguages();
 
   const [current, setProfile] = useState(createDefaultProfile);
 

frontend/src/pages/Settings/Languages/table.tsx

@@ -4,16 +4,16 @@ import { cloneDeep } from "lodash";
 import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { Badge, Button, ButtonGroup } from "react-bootstrap";
 import { Column, TableUpdater } from "react-table";
-import { useEnabledLanguagesContext, useProfilesContext } from ".";
+import { useLatestEnabledLanguages, useLatestProfiles } from ".";
 import { useSingleUpdate } from "../components";
 import { languageProfileKey } from "../keys";
 import Modal from "./modal";
 import { anyCutoff } from "./options";
 
 const Table: FunctionComponent = () => {
-  const profiles = useProfilesContext();
+  const profiles = useLatestProfiles();
 
-  const languages = useEnabledLanguagesContext();
+  const languages = useLatestEnabledLanguages();
 
   const nextProfileId = useMemo(
     () =>

frontend/src/pages/Settings/components/forms.tsx

@@ -139,8 +139,7 @@ export function Selector<
   return (
     <CSelector
       {...selector}
-      // TODO: Force as any
-      defaultValue={value as any}
+      value={value as SelectorValueType<T, M>}
       onChange={(v) => {
         v = beforeStaged ? beforeStaged(v) : v;
         update(v, settingKey);

frontend/src/utilities/languages.ts

@@ -10,7 +10,7 @@ export function useEnabledLanguages() {
   const query = useLanguages();
 
   const enabled = useMemo(() => {
-    const data =
+    const data: Language.Info[] =
       query.data
         ?.filter((v) => v.enabled)
         .map((v) => ({ code2: v.code2, name: v.name })) ?? [];