1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
import React from 'react'
import {AppLanguage} from '#/locale/languages'
import * as persisted from '#/state/persisted'
type SetStateCb = (
s: persisted.Schema['languagePrefs'],
) => persisted.Schema['languagePrefs']
type StateContext = persisted.Schema['languagePrefs']
type ApiContext = {
setPrimaryLanguage: (code2: string) => void
setPostLanguage: (commaSeparatedLangCodes: string) => void
setContentLanguage: (code2: string) => void
toggleContentLanguage: (code2: string) => void
togglePostLanguage: (code2: string) => void
savePostLanguageToHistory: () => void
setAppLanguage: (code2: AppLanguage) => void
}
const stateContext = React.createContext<StateContext>(
persisted.defaults.languagePrefs,
)
const apiContext = React.createContext<ApiContext>({
setPrimaryLanguage: (_: string) => {},
setPostLanguage: (_: string) => {},
setContentLanguage: (_: string) => {},
toggleContentLanguage: (_: string) => {},
togglePostLanguage: (_: string) => {},
savePostLanguageToHistory: () => {},
setAppLanguage: (_: AppLanguage) => {},
})
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState(persisted.get('languagePrefs'))
const setStateWrapped = React.useCallback(
(fn: SetStateCb) => {
const s = fn(persisted.get('languagePrefs'))
setState(s)
persisted.write('languagePrefs', s)
},
[setState],
)
React.useEffect(() => {
return persisted.onUpdate('languagePrefs', nextLanguagePrefs => {
setState(nextLanguagePrefs)
})
}, [setStateWrapped])
const api = React.useMemo(
() => ({
setPrimaryLanguage(code2: string) {
setStateWrapped(s => ({...s, primaryLanguage: code2}))
},
setPostLanguage(commaSeparatedLangCodes: string) {
setStateWrapped(s => ({...s, postLanguage: commaSeparatedLangCodes}))
},
setContentLanguage(code2: string) {
setStateWrapped(s => ({...s, contentLanguages: [code2]}))
},
toggleContentLanguage(code2: string) {
setStateWrapped(s => {
const exists = s.contentLanguages.includes(code2)
const next = exists
? s.contentLanguages.filter(lang => lang !== code2)
: s.contentLanguages.concat(code2)
return {
...s,
contentLanguages: next,
}
})
},
togglePostLanguage(code2: string) {
setStateWrapped(s => {
const exists = hasPostLanguage(state.postLanguage, code2)
let next = s.postLanguage
if (exists) {
next = toPostLanguages(s.postLanguage)
.filter(lang => lang !== code2)
.join(',')
} else {
// sort alphabetically for deterministic comparison in context menu
next = toPostLanguages(s.postLanguage)
.concat([code2])
.sort((a, b) => a.localeCompare(b))
.join(',')
}
return {
...s,
postLanguage: next,
}
})
},
/**
* Saves whatever language codes are currently selected into a history array,
* which is then used to populate the language selector menu.
*/
savePostLanguageToHistory() {
// filter out duplicate `this.postLanguage` if exists, and prepend
// value to start of array
setStateWrapped(s => ({
...s,
postLanguageHistory: [s.postLanguage]
.concat(
s.postLanguageHistory.filter(
commaSeparatedLangCodes =>
commaSeparatedLangCodes !== s.postLanguage,
),
)
.slice(0, 6),
}))
},
setAppLanguage(code2: AppLanguage) {
setStateWrapped(s => ({...s, appLanguage: code2}))
},
}),
[state, setStateWrapped],
)
return (
<stateContext.Provider value={state}>
<apiContext.Provider value={api}>{children}</apiContext.Provider>
</stateContext.Provider>
)
}
export function useLanguagePrefs() {
return React.useContext(stateContext)
}
export function useLanguagePrefsApi() {
return React.useContext(apiContext)
}
export function getContentLanguages() {
return persisted.get('languagePrefs').contentLanguages
}
/**
* Be careful with this. It's used for the PWI home screen so that users can
* select a UI language and have it apply to the fetched Discover feed.
*
* We only support BCP-47 two-letter codes here, hence the split.
*/
export function getAppLanguageAsContentLanguage() {
return persisted.get('languagePrefs').appLanguage.split('-')[0]
}
export function toPostLanguages(postLanguage: string): string[] {
// filter out empty strings if exist
return postLanguage.split(',').filter(Boolean)
}
export function hasPostLanguage(postLanguage: string, code2: string): boolean {
return toPostLanguages(postLanguage).includes(code2)
}
|
