From 63f1e63fa83fbf789061e58652d157f8965ff527 Mon Sep 17 00:00:00 2001 From: LASER-Yi Date: Thu, 24 Feb 2022 01:05:23 +0800 Subject: [PATCH] Fix a issue that seleection of the languages profiles could be Unknown on settings page --- .../pages/Settings/Languages/components.tsx | 6 +- .../src/pages/Settings/Languages/index.tsx | 143 ++++++++---------- .../src/pages/Settings/Languages/modal.tsx | 4 +- .../src/pages/Settings/Languages/table.tsx | 6 +- .../src/pages/Settings/components/forms.tsx | 3 +- frontend/src/utilities/languages.ts | 2 +- 6 files changed, 74 insertions(+), 90 deletions(-) diff --git a/frontend/src/pages/Settings/Languages/components.tsx b/frontend/src/pages/Settings/Languages/components.tsx index 946866878..abfdba601 100644 --- a/frontend/src/pages/Settings/Languages/components.tsx +++ b/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 > = ({ settingKey, options }) => { - const enabled = useEnabledLanguagesContext(); + const enabled = useLatestEnabledLanguages(); const update = useSingleUpdate(); return ( @@ -30,7 +30,7 @@ interface ProfileSelectorProps {} export const ProfileSelector: FunctionComponent< ProfileSelectorProps & BaseInput > = ({ settingKey }) => { - const profiles = useProfilesContext(); + const profiles = useLatestProfiles(); const profileOptions = useMemo[]>( () => diff --git a/frontend/src/pages/Settings/Languages/index.tsx b/frontend/src/pages/Settings/Languages/index.tsx index 5bb05dfa6..fd0473226 100644 --- a/frontend/src/pages/Settings/Languages/index.tsx +++ b/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( - [] -); -const LanguagesProfileContext = React.createContext< - readonly Language.Profile[] ->([]); - -export function useEnabledLanguagesContext() { - const list = useContext(EnabledLanguageContext); +export function useLatestEnabledLanguages() { + const { data } = useEnabledLanguages(); const latest = useLatest(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(languageProfileKey, isArray); if (latest) { return latest; } else { - return list; + return data; } } @@ -48,81 +41,73 @@ interface Props {} const SettingsLanguagesView: FunctionComponent = () => { const { data: languages } = useLanguages(); - const { data: enabled } = useEnabledLanguages(); - const { data: profiles } = useLanguageProfiles(); return ( - - - + + + + + Download a single Subtitles file without adding the language code to + the filename. + + + We don't recommend enabling this option unless absolutely required + (ie: media player not supporting language code in subtitles + filename). Results may vary. + + + + + + + +
+ + + + - Download a single Subtitles file without adding the language - code to the filename. - - - We don't recommend enabling this option unless absolutely - required (ie: media player not supporting language code in - subtitles filename). Results may vary. + Apply only to Series added to Bazarr after enabling this option. - - + + + + - - -
- - - - - - - - Apply only to Series added to Bazarr after enabling this - option. - - - - - - - - - - - - - - - Apply only to Movies added to Bazarr after enabling this - option. - - - - - - - - - - - - + + + + + + + + Apply only to Movies added to Bazarr after enabling this option. + + + + + + + + + + ); }; diff --git a/frontend/src/pages/Settings/Languages/modal.tsx b/frontend/src/pages/Settings/Languages/modal.tsx index 028d9500e..f7fea93cc 100644 --- a/frontend/src/pages/Settings/Languages/modal.tsx +++ b/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 = ( const { payload: profile, closeModal } = useModalInformation(modal.modalKey); - const languages = useEnabledLanguagesContext(); + const languages = useLatestEnabledLanguages(); const [current, setProfile] = useState(createDefaultProfile); diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx index 20e54bf53..7624510f9 100644 --- a/frontend/src/pages/Settings/Languages/table.tsx +++ b/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( () => diff --git a/frontend/src/pages/Settings/components/forms.tsx b/frontend/src/pages/Settings/components/forms.tsx index d85977a39..47361289a 100644 --- a/frontend/src/pages/Settings/components/forms.tsx +++ b/frontend/src/pages/Settings/components/forms.tsx @@ -139,8 +139,7 @@ export function Selector< return ( } onChange={(v) => { v = beforeStaged ? beforeStaged(v) : v; update(v, settingKey); diff --git a/frontend/src/utilities/languages.ts b/frontend/src/utilities/languages.ts index 7077da959..077e7884d 100644 --- a/frontend/src/utilities/languages.ts +++ b/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 })) ?? [];