From 90342325fd8a182f71aa5d9dac92b9031e819713 Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Wed, 10 Jan 2024 17:25:28 +0200 Subject: [PATCH] eslint warning fixes --- .../IntlProvider}/IntlProvider.tsx | 39 +------------------ .../IntlProvider/IntlProviderUtils.tsx | 37 ++++++++++++++++++ .../Components/IrisAccount/IrisAccount.tsx | 4 +- .../Components/Trending/TrendingHashtags.tsx | 2 +- .../src/Components/Trending/TrendingPosts.tsx | 2 +- packages/app/src/Pages/onboarding/index.tsx | 2 +- .../app/src/Pages/settings/Preferences.tsx | 2 +- packages/app/src/index.tsx | 2 +- 8 files changed, 47 insertions(+), 43 deletions(-) rename packages/app/src/{ => Components/IntlProvider}/IntlProvider.tsx (74%) create mode 100644 packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx diff --git a/packages/app/src/IntlProvider.tsx b/packages/app/src/Components/IntlProvider/IntlProvider.tsx similarity index 74% rename from packages/app/src/IntlProvider.tsx rename to packages/app/src/Components/IntlProvider/IntlProvider.tsx index 542e665a..d9be9b47 100644 --- a/packages/app/src/IntlProvider.tsx +++ b/packages/app/src/Components/IntlProvider/IntlProvider.tsx @@ -1,12 +1,9 @@ -import { ExternalStore } from "@snort/shared"; -import { type ReactNode, useEffect, useState, useSyncExternalStore } from "react"; +import { ReactNode, useEffect, useState } from "react"; import { IntlProvider as ReactIntlProvider } from "react-intl"; -import useLogin from "@/Hooks/useLogin"; +import { DefaultLocale, useLocale } from "@/Components/IntlProvider/IntlProviderUtils"; import enMessages from "@/translations/en.json"; -const DefaultLocale = "en-US"; - const getMessages = (locale: string) => { const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0]; @@ -80,34 +77,6 @@ const getMessages = (locale: string) => { return matchLang(locale) ?? matchLang(truncatedLocale) ?? Promise.resolve(enMessages); }; - -class LangStore extends ExternalStore { - setLang(s: string) { - localStorage.setItem("lang", s); - this.notifyChange(); - } - - takeSnapshot() { - return localStorage.getItem("lang"); - } -} - -const LangOverride = new LangStore(); - -export function useLocale() { - const { language } = useLogin(s => ({ language: s.appData.item.preferences.language })); - const loggedOutLang = useSyncExternalStore( - c => LangOverride.hook(c), - () => LangOverride.snapshot(), - ); - const locale = language ?? loggedOutLang ?? getLocale(); - return { - locale, - lang: locale.toLowerCase().split(/[_-]+/)[0], - setOverride: (s: string) => LangOverride.setLang(s), - }; -} - export const IntlProvider = ({ children }: { children: ReactNode }) => { const { locale } = useLocale(); const [messages, setMessages] = useState>(enMessages); @@ -128,7 +97,3 @@ export const IntlProvider = ({ children }: { children: ReactNode }) => { ); }; - -export const getLocale = () => { - return (navigator.languages && navigator.languages[0]) ?? navigator.language ?? DefaultLocale; -}; diff --git a/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx b/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx new file mode 100644 index 00000000..806f57eb --- /dev/null +++ b/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx @@ -0,0 +1,37 @@ +import { ExternalStore } from "@snort/shared"; +import { useSyncExternalStore } from "react"; + +import useLogin from "@/Hooks/useLogin"; + +export const DefaultLocale = "en-US"; + +class LangStore extends ExternalStore { + setLang(s: string) { + localStorage.setItem("lang", s); + this.notifyChange(); + } + + takeSnapshot() { + return localStorage.getItem("lang"); + } +} + +const LangOverride = new LangStore(); + +export function useLocale() { + const { language } = useLogin(s => ({ language: s.appData.item.preferences.language })); + const loggedOutLang = useSyncExternalStore( + c => LangOverride.hook(c), + () => LangOverride.snapshot(), + ); + const locale = language ?? loggedOutLang ?? getLocale(); + return { + locale, + lang: locale.toLowerCase().split(/[_-]+/)[0], + setOverride: (s: string) => LangOverride.setLang(s), + }; +} + +export const getLocale = () => { + return (navigator.languages && navigator.languages[0]) ?? navigator.language ?? DefaultLocale; +}; diff --git a/packages/app/src/Components/IrisAccount/IrisAccount.tsx b/packages/app/src/Components/IrisAccount/IrisAccount.tsx index 3396d12d..b4c2baf7 100644 --- a/packages/app/src/Components/IrisAccount/IrisAccount.tsx +++ b/packages/app/src/Components/IrisAccount/IrisAccount.tsx @@ -310,4 +310,6 @@ class IrisAccount extends Component { } } -export default injectIntl(IrisAccount); +const IntlIrisAccount = injectIntl(IrisAccount); +IntlIrisAccount.displayName = "IrisAccount"; +export default IntlIrisAccount; diff --git a/packages/app/src/Components/Trending/TrendingHashtags.tsx b/packages/app/src/Components/Trending/TrendingHashtags.tsx index 6f3021b8..811a2bfd 100644 --- a/packages/app/src/Components/Trending/TrendingHashtags.tsx +++ b/packages/app/src/Components/Trending/TrendingHashtags.tsx @@ -2,10 +2,10 @@ import classNames from "classnames"; import { ReactNode } from "react"; import { Link } from "react-router-dom"; +import { useLocale } from "@/Components/IntlProvider/IntlProviderUtils"; import PageSpinner from "@/Components/PageSpinner"; import NostrBandApi from "@/External/NostrBand"; import useCachedFetch from "@/Hooks/useCachedFetch"; -import { useLocale } from "@/IntlProvider"; import { HashTagHeader } from "@/Pages/HashTagsPage"; import { ErrorOrOffline } from "../ErrorOrOffline"; diff --git a/packages/app/src/Components/Trending/TrendingPosts.tsx b/packages/app/src/Components/Trending/TrendingPosts.tsx index c64e319e..e2ef2e82 100644 --- a/packages/app/src/Components/Trending/TrendingPosts.tsx +++ b/packages/app/src/Components/Trending/TrendingPosts.tsx @@ -7,6 +7,7 @@ import { ErrorOrOffline } from "@/Components/ErrorOrOffline"; import Note from "@/Components/Event/EventComponent"; import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector"; import ImageGridItem from "@/Components/Feed/ImageGridItem"; +import { useLocale } from "@/Components/IntlProvider/IntlProviderUtils"; import PageSpinner from "@/Components/PageSpinner"; import { SpotlightThreadModal } from "@/Components/Spotlight/SpotlightThreadModal"; import ShortNote from "@/Components/Trending/ShortNote"; @@ -14,7 +15,6 @@ import NostrBandApi from "@/External/NostrBand"; import useCachedFetch from "@/Hooks/useCachedFetch"; import useLogin from "@/Hooks/useLogin"; import useModeration from "@/Hooks/useModeration"; -import { useLocale } from "@/IntlProvider"; import { System } from "@/system"; export default function TrendingNotes({ count = Infinity, small = false }: { count: number; small: boolean }) { diff --git a/packages/app/src/Pages/onboarding/index.tsx b/packages/app/src/Pages/onboarding/index.tsx index 8bbcd196..0482dace 100644 --- a/packages/app/src/Pages/onboarding/index.tsx +++ b/packages/app/src/Pages/onboarding/index.tsx @@ -3,7 +3,7 @@ import "./index.css"; import { Outlet, RouteObject } from "react-router-dom"; import Icon from "@/Components/Icons/Icon"; -import { useLocale } from "@/IntlProvider"; +import { useLocale } from "@/Components/IntlProvider/IntlProviderUtils"; import { AllLanguageCodes } from "@/Pages/settings/Preferences"; import { Discover } from "./discover"; diff --git a/packages/app/src/Pages/settings/Preferences.tsx b/packages/app/src/Pages/settings/Preferences.tsx index ae876499..93f4c2ab 100644 --- a/packages/app/src/Pages/settings/Preferences.tsx +++ b/packages/app/src/Pages/settings/Preferences.tsx @@ -2,8 +2,8 @@ import "./Preferences.css"; import { FormattedMessage, useIntl } from "react-intl"; +import { useLocale } from "@/Components/IntlProvider/IntlProviderUtils"; import useLogin from "@/Hooks/useLogin"; -import { useLocale } from "@/IntlProvider"; import { unwrap } from "@/Utils"; import { DefaultImgProxy } from "@/Utils/Const"; import { updatePreferences, UserPreferences } from "@/Utils/Login"; diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index 80f63e75..a10fec31 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -11,9 +11,9 @@ import { createBrowserRouter, RouteObject, RouterProvider } from "react-router-d import { preload } from "@/Cache"; import { ThreadRoute } from "@/Components/Event/Thread"; +import { IntlProvider } from "@/Components/IntlProvider/IntlProvider"; import { db } from "@/Db"; import { updateRelayConnections } from "@/Hooks/useLoginRelays"; -import { IntlProvider } from "@/IntlProvider"; import { AboutPage } from "@/Pages/About"; import { SnortDeckLayout } from "@/Pages/DeckLayout"; import DonatePage from "@/Pages/DonatePage";