This commit is contained in:
vineyardbovines
2026-04-15 08:46:16 -04:00
parent a97744d600
commit 3d09ee8bb2
2 changed files with 28 additions and 38 deletions
+27 -37
View File
@@ -8,9 +8,7 @@ import {
import {type TextInput, View} from 'react-native' import {type TextInput, View} from 'react-native'
import {useWindowDimensions} from 'react-native' import {useWindowDimensions} from 'react-native'
import {Image} from 'expo-image' import {Image} from 'expo-image'
import {msg} from '@lingui/core/macro' import {Trans, useLingui} from '@lingui/react/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {cleanError} from '#/lib/strings/errors' import {cleanError} from '#/lib/strings/errors'
import { import {
@@ -90,7 +88,7 @@ function GifList({
onSelectGif: (gif: Gif) => void onSelectGif: (gif: Gif) => void
}) { }) {
const ax = useAnalytics() const ax = useAnalytics()
const {_} = useLingui() const {t: l} = useLingui()
const t = useTheme() const t = useTheme()
const {gtMobile} = useBreakpoints() const {gtMobile} = useBreakpoints()
const textInputRef = useRef<TextInput>(null) const textInputRef = useRef<TextInput>(null)
@@ -98,14 +96,14 @@ function GifList({
const [undeferredSearch, setSearch] = useState('') const [undeferredSearch, setSearch] = useState('')
const search = useThrottledValue(undeferredSearch, 500) const search = useThrottledValue(undeferredSearch, 500)
const {height} = useWindowDimensions() const {height} = useWindowDimensions()
const useKlipy = ax.features.enabled(ax.features.KlipyGifProviderEnable) const klipyEnabled = ax.features.enabled(ax.features.KlipyGifProviderEnable)
const isSearching = search.length > 0 const isSearching = search.length > 0
const klipyTrending = useKlipyFeaturedGifsQuery({enabled: useKlipy}) const klipyTrending = useKlipyFeaturedGifsQuery({enabled: klipyEnabled})
const klipySearch = useKlipyGifSearchQuery(search, {enabled: useKlipy}) const klipySearch = useKlipyGifSearchQuery(search, {enabled: klipyEnabled})
const tenorTrending = useTenorFeaturedGifsQuery({enabled: !useKlipy}) const tenorTrending = useTenorFeaturedGifsQuery({enabled: !klipyEnabled})
const tenorSearch = useTenorGifSearchQuery(search, {enabled: !useKlipy}) const tenorSearch = useTenorGifSearchQuery(search, {enabled: !klipyEnabled})
const { const {
data, data,
@@ -116,7 +114,7 @@ function GifList({
isPending, isPending,
isError, isError,
refetch, refetch,
} = useKlipy } = klipyEnabled
? isSearching ? isSearching
? klipySearch ? klipySearch
: klipyTrending : klipyTrending
@@ -172,7 +170,7 @@ function GifList({
color="secondary" color="secondary"
shape="round" shape="round"
onPress={() => control.close()} onPress={() => control.close()}
label={_(msg`Close GIF dialog`)}> label={l`Close GIF dialog`}>
<ButtonIcon icon={Arrow} size="md" /> <ButtonIcon icon={Arrow} size="md" />
</Button> </Button>
)} )}
@@ -180,8 +178,8 @@ function GifList({
<TextField.Root style={[!gtMobile && IS_WEB && a.flex_1]}> <TextField.Root style={[!gtMobile && IS_WEB && a.flex_1]}>
<TextField.Icon icon={Search} /> <TextField.Icon icon={Search} />
<TextField.Input <TextField.Input
label={_(msg`Search GIFs`)} label={l`Search GIFs`}
placeholder={useKlipy ? _(msg`Search KLIPY`) : _(msg`Search Tenor`)} placeholder={klipyEnabled ? l`Search KLIPY` : l`Search Tenor`}
onChangeText={text => { onChangeText={text => {
setSearch(text) setSearch(text)
listRef.current?.scrollToOffset({offset: 0, animated: false}) listRef.current?.scrollToOffset({offset: 0, animated: false})
@@ -199,7 +197,7 @@ function GifList({
</TextField.Root> </TextField.Root>
</View> </View>
) )
}, [gtMobile, t.atoms.bg, _, control, useKlipy]) }, [gtMobile, t.atoms.bg, l, control, klipyEnabled])
return ( return (
<> <>
@@ -226,22 +224,18 @@ function GifList({
emptyType="results" emptyType="results"
sideBorders={false} sideBorders={false}
topBorder={false} topBorder={false}
errorTitle={_(msg`Failed to load GIFs`)} errorTitle={l`Failed to load GIFs`}
errorMessage={ errorMessage={
useKlipy klipyEnabled
? _(msg`There was an issue connecting to KLIPY.`) ? l`There was an issue connecting to KLIPY.`
: _(msg`There was an issue connecting to Tenor.`) : l`There was an issue connecting to Tenor.`
} }
emptyMessage={ emptyMessage={
isSearching isSearching
? _(msg`No search results found for "${search}".`) ? l`No search results found for "${search}".`
: useKlipy : klipyEnabled
? _( ? l`No featured GIFs found. There may be an issue with KLIPY.`
msg`No featured GIFs found. There may be an issue with KLIPY.`, : l`No featured GIFs found. There may be an issue with Tenor.`
)
: _(
msg`No featured GIFs found. There may be an issue with Tenor.`,
)
} }
/> />
)} )}
@@ -268,23 +262,19 @@ function GifList({
} }
function DialogError({details}: {details?: string}) { function DialogError({details}: {details?: string}) {
const {_} = useLingui() const {t: l} = useLingui()
const control = Dialog.useDialogContext() const control = Dialog.useDialogContext()
return ( return (
<Dialog.ScrollableInner <Dialog.ScrollableInner style={a.gap_md} label={l`An error has occurred`}>
style={a.gap_md}
label={_(msg`An error has occurred`)}>
<Dialog.Close /> <Dialog.Close />
<ErrorScreen <ErrorScreen
title={_(msg`Oh no!`)} title={l`Oh no!`}
message={_( message={l`There was an unexpected issue in the application. Please let us know if this happened to you!`}
msg`There was an unexpected issue in the application. Please let us know if this happened to you!`,
)}
details={details} details={details}
/> />
<Button <Button
label={_(msg`Close dialog`)} label={l`Close dialog`}
onPress={() => control.close()} onPress={() => control.close()}
color="primary" color="primary"
size="large" size="large"
@@ -306,7 +296,7 @@ export function GifPreview({
}) { }) {
const ax = useAnalytics() const ax = useAnalytics()
const {gtTablet} = useBreakpoints() const {gtTablet} = useBreakpoints()
const {_} = useLingui() const {t: l} = useLingui()
const t = useTheme() const t = useTheme()
const onPress = useCallback(() => { const onPress = useCallback(() => {
@@ -316,7 +306,7 @@ export function GifPreview({
return ( return (
<Button <Button
label={_(msg`Select GIF "${gif.title}"`)} label={l`Select GIF "${gif.title}"`}
style={[a.flex_1, gtTablet ? {maxWidth: '33%'} : {maxWidth: '50%'}]} style={[a.flex_1, gtTablet ? {maxWidth: '33%'} : {maxWidth: '50%'}]}
onPress={onPress}> onPress={onPress}>
{({pressed}) => ( {({pressed}) => (
+1 -1
View File
@@ -79,7 +79,7 @@ function createKlipyApi<Input extends object>(
}, },
}) })
if (!res.ok) { if (!res.ok) {
throw new Error('Failed to fetch KLIPY API') throw new Error(`Failed to fetch KLIPY API (status ${res.status})`)
} }
const body: {next: string; results: Gif[]} = await res.json() const body: {next: string; results: Gif[]} = await res.json()
return { return {