From 058a75deec94ce53282d0c1752e470ed981a4574 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 11:12:48 -0600 Subject: [PATCH] useLocale(): refactor to return direction --- app/soapbox/containers/soapbox.tsx | 8 +++----- app/soapbox/hooks/useLocale.ts | 33 +++++++++++++++++++++++++----- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 53a0b684d..8ce48f7e2 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -53,8 +53,6 @@ import ErrorBoundary from '../components/error-boundary'; import UI from '../features/ui'; import { store } from '../store'; -const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he']; - // Configure global functions for developers createGlobals(store); @@ -211,7 +209,7 @@ const SoapboxLoad: React.FC = ({ children }) => { const me = useAppSelector(state => state.me); const account = useOwnAccount(); const swUpdating = useAppSelector(state => state.meta.swUpdating); - const locale = useLocale(); + const { locale } = useLocale(); const [messages, setMessages] = useState>({}); const [localeLoading, setLocaleLoading] = useState(true); @@ -262,7 +260,7 @@ interface ISoapboxHead { /** Injects metadata into site head with Helmet. */ const SoapboxHead: React.FC = ({ children }) => { - const locale = useLocale(); + const { locale, direction } = useLocale(); const settings = useSettings(); const soapboxConfig = useSoapboxConfig(); @@ -281,7 +279,7 @@ const SoapboxHead: React.FC = ({ children }) => { <> - + {themeCss && } {darkMode && } diff --git a/app/soapbox/hooks/useLocale.ts b/app/soapbox/hooks/useLocale.ts index 1be278002..14dedaf16 100644 --- a/app/soapbox/hooks/useLocale.ts +++ b/app/soapbox/hooks/useLocale.ts @@ -2,15 +2,38 @@ import MESSAGES from 'soapbox/locales/messages'; import { useSettings } from './useSettings'; +import type { CSSProperties } from 'react'; + +/** Locales which should be presented in right-to-left. */ +const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he']; + /** Ensure the given locale exists in our codebase */ const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale); -/** Get valid locale from settings. */ -const useLocale = (fallback = 'en') => { - const settings = useSettings(); - const locale = settings.get('locale'); +interface UseLocaleResult { + locale: string + direction: CSSProperties['direction'] +} - return validLocale(locale) ? locale : fallback; +/** Get valid locale from settings. */ +const useLocale = (fallback = 'en'): UseLocaleResult => { + const settings = useSettings(); + const userLocale = settings.get('locale') as unknown; + + const locale = + (typeof userLocale === 'string' && validLocale(userLocale)) + ? userLocale + : fallback; + + const direction: CSSProperties['direction'] = + RTL_LOCALES.includes(locale) + ? 'rtl' + : undefined; + + return { + locale, + direction, + }; }; export { useLocale };