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[]>(
+export function useLatestEnabledLanguages() {
-  []
+  const { data } = useEnabledLanguages();
-);
-const LanguagesProfileContext = React.createContext<
-  readonly Language.Profile[]
->([]);
-
-export function useEnabledLanguagesContext() {
-  const list = useContext(EnabledLanguageContext);
   const latest = useLatest<Language.Info[]>(enabledLanguageKey, isArray);
 
   if (latest) {
     return latest;
   } else {
-    return list;
+    return data;
   }
 }
 
-export function useProfilesContext() {
+export function useLatestProfiles() {
-  const list = useContext(LanguagesProfileContext);
+  const { data = [] } = useLanguageProfiles();
   const latest = useLatest<Language.Profile[]>(languageProfileKey, isArray);
 
   if (latest) {
     return latest;
   } else {
-    return list;
+    return data;
   }
 }
 
@@ -48,13 +41,9 @@ 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">
         <Input>
           <Check
@@ -62,13 +51,13 @@ const SettingsLanguagesView: FunctionComponent<Props> = () => {
             settingKey="settings-general-single_language"
           ></Check>
           <Message>
-                Download a single Subtitles file without adding the language
+            Download a single Subtitles file without adding the language code to
-                code to the filename.
+            the filename.
           </Message>
           <Message type="warning">
-                We don't recommend enabling this option unless absolutely
+            We don't recommend enabling this option unless absolutely required
-                required (ie: media player not supporting language code in
+            (ie: media player not supporting language code in subtitles
-                subtitles filename). Results may vary.
+            filename). Results may vary.
           </Message>
         </Input>
         <Input name="Languages Filter">
@@ -90,8 +79,7 @@ const SettingsLanguagesView: FunctionComponent<Props> = () => {
                 settingKey="settings-general-serie_default_enabled"
               ></Check>
               <Message>
-                    Apply only to Series added to Bazarr after enabling this
+                Apply only to Series added to Bazarr after enabling this option.
-                    option.
               </Message>
             </Input>
           </CollapseBox.Control>
@@ -109,8 +97,7 @@ const SettingsLanguagesView: FunctionComponent<Props> = () => {
                 settingKey="settings-general-movie_default_enabled"
               ></Check>
               <Message>
-                    Apply only to Movies added to Bazarr after enabling this
+                Apply only to Movies added to Bazarr after enabling this option.
-                    option.
               </Message>
             </Input>
           </CollapseBox.Control>
@@ -121,8 +108,6 @@ const SettingsLanguagesView: FunctionComponent<Props> = () => {
           </CollapseBox.Content>
         </CollapseBox>
       </Group>
-        </LanguagesProfileContext.Provider>
-      </EnabledLanguageContext.Provider>
     </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
+      value={value as SelectorValueType<T, M>}
-      defaultValue={value as any}
       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 })) ?? [];