pl-fe: fix locale change

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/components/ui/input.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useLocale } from 'pl-fe/hooks/use-locale';
+import { useLocale, useLocaleDirection } from 'pl-fe/hooks/use-locale';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
 import Icon from './icon';
@@ -48,7 +48,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
 const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
-    const locale = useLocale();
+    const direction = useLocaleDirection(useLocale());
 
     const { type = 'text', icon, className, outerClassName, append, prepend, theme = 'normal', ...filteredProps } = props;
 
@@ -98,7 +98,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',
           }, className)}
-          dir={typeof props.value === 'string' ? getTextDirection(props.value, { fallback: locale.direction }) : undefined}
+          dir={typeof props.value === 'string' ? getTextDirection(props.value, { fallback: direction }) : undefined}
         />
 
         {append ? (

packages/pl-fe/src/components/ui/textarea.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useLocale } from 'pl-fe/hooks/use-locale';
+import { useLocale, useLocaleDirection } from 'pl-fe/hooks/use-locale';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
 import Stack from './stack';
@@ -56,7 +56,7 @@ const Textarea = React.forwardRef(({
 }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
   const length = value?.length || 0;
   const [rows, setRows] = useState<number>(autoGrow ? minRows : initialRows);
-  const locale = useLocale();
+  const direction = useLocaleDirection(useLocale());
 
   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (autoGrow) {
@@ -99,7 +99,7 @@ const Textarea = React.forwardRef(({
           'text-red-600 border-red-600': hasError,
           'resize-none': !isResizeable,
         })}
-        dir={value?.length ? getTextDirection(value, { fallback: locale.direction }) : undefined}
+        dir={value?.length ? getTextDirection(value, { fallback: direction }) : undefined}
       />
 
       {maxLength && (

packages/pl-fe/src/hooks/use-locale.ts

@@ -1,27 +1,16 @@
-import { getLocale } from 'pl-fe/actions/settings';
+import messages from 'pl-fe/messages';
+import { useSettingsStore } from 'pl-fe/stores/settings';
 
 /** Locales which should be presented in right-to-left. */
 const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
 
-interface UseLocaleResult {
-  locale: string;
-  direction: 'ltr' | 'rtl';
-}
-
 /** Get valid locale from settings. */
-const useLocale = (fallback = 'en'): UseLocaleResult => {
-  // TODO use useSettingsStore directly
-  const locale = getLocale(fallback);
-
-  const direction: 'ltr' | 'rtl' =
-    RTL_LOCALES.includes(locale)
-      ? 'rtl'
-      : 'ltr';
-
-  return {
-    locale,
-    direction,
-  };
+const useLocale = (fallback = 'en') => {
+  const localeWithVariant = useSettingsStore().settings.locale.replace('_', '-');
+  const localeFirstPart = localeWithVariant.split('-')[0];
+  return Object.keys(messages).includes(localeWithVariant) ? localeWithVariant : Object.keys(messages).includes(localeFirstPart) ? localeFirstPart : fallback;
 };
 
-export { useLocale };
+const useLocaleDirection = (locale = 'en') => RTL_LOCALES.includes(locale) ? 'rtl' : 'ltr';
+
+export { useLocale, useLocaleDirection };

packages/pl-fe/src/init/pl-fe-head.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import * as v from 'valibot';
 
-import { useLocale } from 'pl-fe/hooks/use-locale';
+import { useLocale, useLocaleDirection } from 'pl-fe/hooks/use-locale';
 import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import { useTheme } from 'pl-fe/hooks/use-theme';
@@ -15,7 +15,8 @@ const Helmet = React.lazy(() => import('pl-fe/components/helmet'));
 
 /** Injects metadata into site head with Helmet. */
 const PlFeHead = () => {
-  const { locale, direction } = useLocale();
+  const locale = useLocale();
+  const direction = useLocaleDirection(locale);
   const { demo, reduceMotion, underlineLinks, demetricator, systemFont } = useSettings();
   const plFeConfig = usePlFeConfig();
   const theme = useTheme();

packages/pl-fe/src/init/pl-fe-load.tsx

@@ -34,7 +34,7 @@ const PlFeLoad: React.FC<IPlFeLoad> = ({ children }) => {
 
   const me = useAppSelector(state => state.me);
   const { account } = useOwnAccount();
-  const { locale } = useLocale();
+  const locale = useLocale();
 
   const [messages, setMessages] = useState<Record<string, string>>({});
   const [localeLoading, setLocaleLoading] = useState(true);

packages/pl-fe/src/stores/settings.ts

@@ -65,6 +65,7 @@ const useSettingsStore = create<State>()(mutative((set) => ({
     changeSetting(state.userSettings, path, value);
 
     mergeSettings(state);
+    console.log(JSON.parse(JSON.stringify(state.userSettings)));
   }),
 
   rememberEmojiUse: (emoji: Emoji) => set((state: State) => {