zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Improve the language behaviors around the PWI (#3545)

Browse source 
* Handle leftnav overflow with longer languages' copy

* Update the language dropdown to set ALL language prefs

* Add hackfix to language cachebusting on PWI

* Reset feeds on language change
This commit is contained in:
Paul Frazee 2024-04-13 19:49:52 -07:00 • committed by GitHub
parent 23056daa29
commit 0b43d728e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 111 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/AppLanguageDropdown.tsx
View file

@ -1,16 +1,19 @@
import React from 'react'
import {View} from 'react-native'
import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
import {useQueryClient} from '@tanstack/react-query'
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
import {APP_LANGUAGES} from '#/locale/languages'
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
import {resetPostsFeedQueries} from '#/state/queries/post-feed'
import {atoms as a, useTheme} from '#/alf'
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
export function AppLanguageDropdown() {
const t = useTheme()
const queryClient = useQueryClient()
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
@ -21,8 +24,13 @@ export function AppLanguageDropdown() {
if (sanitizedLang !== value) {
setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
}
setLangPrefs.setPrimaryLanguage(value)
setLangPrefs.setContentLanguage(value)
// reset feeds to refetch content
resetPostsFeedQueries(queryClient)
},
[sanitizedLang, setLangPrefs],
[sanitizedLang, setLangPrefs, queryClient],
)
return (

10
src/components/AppLanguageDropdown.web.tsx
View file

@ -1,9 +1,11 @@
import React from 'react'
import {View} from 'react-native'
import {useQueryClient} from '@tanstack/react-query'
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
import {APP_LANGUAGES} from '#/locale/languages'
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
import {resetPostsFeedQueries} from '#/state/queries/post-feed'
import {atoms as a, useTheme} from '#/alf'
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
import {Text} from '#/components/Typography'
@ -11,6 +13,7 @@ import {Text} from '#/components/Typography'
export function AppLanguageDropdown() {
const t = useTheme()
const queryClient = useQueryClient()
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
@ -24,8 +27,13 @@ export function AppLanguageDropdown() {
if (sanitizedLang !== value) {
setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
}
setLangPrefs.setPrimaryLanguage(value)
setLangPrefs.setContentLanguage(value)
// reset feeds to refetch content
resetPostsFeedQueries(queryClient)
},
[sanitizedLang, setLangPrefs],
[sanitizedLang, setLangPrefs, queryClient],
)
return (