acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Create codemod for addressing ESLint warnings (#10032)

Browse Source
This commit is contained in:
DS Boyce
2026-03-11 15:51:31 -07:00
committed by GitHub
parent 80429ec902
commit 1db01a09a8
240 changed files with 1560 additions and 1347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AccountList.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {Fragment, useCallback} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -52,7 +52,7 @@ export function AccountList({
t.atoms.border_contrast_low,
]}>
{accounts.map(account => (
<React.Fragment key={account.did}>
<Fragment key={account.did}>
<AccountItem
profile={profiles?.profiles.find(p => p.did === account.did)}
account={account}
@@ -61,7 +61,7 @@ export function AccountList({
isPendingAccount={account.did === pendingDid}
/>
<View style={[a.border_b, t.atoms.border_contrast_low]} />
</React.Fragment>
</Fragment>
))}
<Button
testID="chooseAddAccountBtn"
src/components/AppLanguageDropdown.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
@@ -20,7 +20,7 @@ export function AppLanguageDropdown() {
const setLangPrefs = useLanguagePrefsApi()
const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
const onChangeAppLanguage = React.useCallback(
const onChangeAppLanguage = useCallback(
(value: string) => {
if (!value) return
if (sanitizedLang !== value) {
src/components/Button.tsx
+77 -71
View File
@@ -1,4 +1,11 @@
import React from 'react'
import {
createContext,
forwardRef,
useCallback,
useContext,
useMemo,
useState,
} from 'react'
import {
type AccessibilityProps,
type GestureResponderEvent,
@@ -108,7 +115,7 @@ export type ButtonProps = Pick<
export type ButtonTextProps = TextProps &
VariantProps & {disabled?: boolean; emoji?: boolean}
const Context = React.createContext<VariantProps & ButtonState>({
const Context = createContext<VariantProps & ButtonState>({
hovered: false,
focused: false,
pressed: false,
@@ -117,10 +124,10 @@ const Context = React.createContext<VariantProps & ButtonState>({
Context.displayName = 'ButtonContext'
export function useButtonContext() {
return React.useContext(Context)
return useContext(Context)
}
export const Button = React.forwardRef<View, ButtonProps>(
export const Button = forwardRef<View, ButtonProps>(
(
{
children,
@@ -153,13 +160,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
}
const t = useTheme()
const [state, setState] = React.useState({
const [state, setState] = useState({
pressed: false,
hovered: false,
focused: false,
})
const onPressIn = React.useCallback(
const onPressIn = useCallback(
(e: GestureResponderEvent) => {
setState(s => ({
...s,
@@ -169,7 +176,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
},
[setState, onPressInOuter],
)
const onPressOut = React.useCallback(
const onPressOut = useCallback(
(e: GestureResponderEvent) => {
setState(s => ({
...s,
@@ -179,7 +186,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
},
[setState, onPressOutOuter],
)
const onHoverIn = React.useCallback(
const onHoverIn = useCallback(
(e: MouseEvent) => {
setState(s => ({
...s,
@@ -189,7 +196,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
},
[setState, onHoverInOuter],
)
const onHoverOut = React.useCallback(
const onHoverOut = useCallback(
(e: MouseEvent) => {
setState(s => ({
...s,
@@ -199,7 +206,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
},
[setState, onHoverOutOuter],
)
const onFocus = React.useCallback(
const onFocus = useCallback(
(e: NativeSyntheticEvent<TargetedEvent>) => {
setState(s => ({
...s,
@@ -209,7 +216,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
},
[setState, onFocusOuter],
)
const onBlur = React.useCallback(
const onBlur = useCallback(
(e: NativeSyntheticEvent<TargetedEvent>) => {
setState(s => ({
...s,
@@ -220,7 +227,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
[setState, onBlurOuter],
)
const {baseStyles, hoverStyles} = React.useMemo(() => {
const {baseStyles, hoverStyles} = useMemo(() => {
const baseStyles: ViewStyle[] = []
const hoverStyles: ViewStyle[] = []
@@ -526,7 +533,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
}
}, [t, variant, color, size, shape, disabled])
const context = React.useMemo<ButtonContext>(
const context = useMemo<ButtonContext>(
() => ({
...state,
variant,
@@ -581,7 +588,7 @@ Button.displayName = 'Button'
export function useSharedButtonTextStyles() {
const t = useTheme()
const {color, variant, disabled, size} = useButtonContext()
return React.useMemo(() => {
return useMemo(() => {
const baseStyles: TextStyle[] = []
/*
@@ -778,67 +785,66 @@ export function ButtonIcon({
}) {
const {size: buttonSize, shape: buttonShape} = useButtonContext()
const textStyles = useSharedButtonTextStyles()
const {iconSize, iconContainerSize, iconNegativeMargin} =
React.useMemo(() => {
/**
* Pre-set icon sizes for different button sizes
*/
const iconSizeShorthand =
size ??
(({
large: 'md',
small: 'sm',
tiny: 'xs',
}[buttonSize || 'small'] || 'sm') as Exclude<
SVGIconProps['size'],
undefined
>)
const {iconSize, iconContainerSize, iconNegativeMargin} = useMemo(() => {
/**
* Pre-set icon sizes for different button sizes
*/
const iconSizeShorthand =
size ??
(({
large: 'md',
small: 'sm',
tiny: 'xs',
}[buttonSize || 'small'] || 'sm') as Exclude<
SVGIconProps['size'],
undefined
>)
/*
* Copied here from icons/common.tsx so we can tweak if we need to, but
* also so that we can calculate transforms.
*/
const iconSize = {
xs: 12,
sm: 16,
md: 18,
lg: 24,
xl: 28,
'2xs': 8,
'2xl': 32,
'3xl': 40,
}[iconSizeShorthand]
/*
* Copied here from icons/common.tsx so we can tweak if we need to, but
* also so that we can calculate transforms.
*/
const iconSize = {
xs: 12,
sm: 16,
md: 18,
lg: 24,
xl: 28,
'2xs': 8,
'2xl': 32,
'3xl': 40,
}[iconSizeShorthand]
/*
* Goal here is to match rendered text size so that different size icons
* don't increase button size
*/
const iconContainerSize = {
large: 20,
small: 17,
tiny: 15,
/*
* Goal here is to match rendered text size so that different size icons
* don't increase button size
*/
const iconContainerSize = {
large: 20,
small: 17,
tiny: 15,
}[buttonSize || 'small']
/*
* The icon needs to be closer to the edge of the button than the text. Therefore
* we make the gap slightly too large, and then pull in the sides using negative margins.
*/
let iconNegativeMargin = 0
if (buttonShape === 'default') {
iconNegativeMargin = {
large: -2,
small: -2,
tiny: -1,
}[buttonSize || 'small']
}
/*
* The icon needs to be closer to the edge of the button than the text. Therefore
* we make the gap slightly too large, and then pull in the sides using negative margins.
*/
let iconNegativeMargin = 0
if (buttonShape === 'default') {
iconNegativeMargin = {
large: -2,
small: -2,
tiny: -1,
}[buttonSize || 'small']
}
return {
iconSize,
iconContainerSize,
iconNegativeMargin,
}
}, [buttonSize, buttonShape, size])
return {
iconSize,
iconContainerSize,
iconNegativeMargin,
}
}, [buttonSize, buttonShape, size])
return (
<View
src/components/ContextMenu/index.tsx
+8 -5
View File
@@ -1,4 +1,7 @@
import React, {
import {
cloneElement,
Fragment,
isValidElement,
useCallback,
useEffect,
useId,
@@ -689,22 +692,22 @@ export function Outer({
t.atoms.border_contrast_low,
]}>
{flattenReactChildren(children).map((child, i) => {
return React.isValidElement(child) &&
return isValidElement(child) &&
(child.type === Item || child.type === Divider) ? (
<React.Fragment key={i}>
<Fragment key={i}>
{i > 0 ? (
<View
style={[a.border_b, t.atoms.border_contrast_low]}
/>
) : null}
{React.cloneElement(child, {
{cloneElement(child, {
// @ts-expect-error not typed
style: {
borderRadius: 0,
borderWidth: 0,
},
})}
</React.Fragment>
</Fragment>
) : null
})}
</View>
src/components/Dialog/index.web.tsx
+16 -9
View File
@@ -1,4 +1,11 @@
import React, {useImperativeHandle} from 'react'
import {
forwardRef,
useCallback,
useContext,
useImperativeHandle,
useMemo,
useState,
} from 'react'
import {
FlatList,
type FlatListProps,
@@ -48,15 +55,15 @@ export function Outer({
}: React.PropsWithChildren<DialogOuterProps>) {
const {_} = useLingui()
const {gtMobile} = useBreakpoints()
const [isOpen, setIsOpen] = React.useState(false)
const [isOpen, setIsOpen] = useState(false)
const {setDialogIsOpen} = useDialogStateControlContext()
const open = React.useCallback(() => {
const open = useCallback(() => {
setDialogIsOpen(control.id, true)
setIsOpen(true)
}, [setIsOpen, setDialogIsOpen, control.id])
const close = React.useCallback<DialogControlProps['close']>(
const close = useCallback<DialogControlProps['close']>(
cb => {
setDialogIsOpen(control.id, false)
setIsOpen(false)
@@ -80,7 +87,7 @@ export function Outer({
[control.id, onClose, setDialogIsOpen],
)
const handleBackgroundPress = React.useCallback(
const handleBackgroundPress = useCallback(
async (e: GestureResponderEvent) => {
webOptions?.onBackgroundPress ? webOptions.onBackgroundPress(e) : close()
},
@@ -96,7 +103,7 @@ export function Outer({
[close, open],
)
const context = React.useMemo(
const context = useMemo(
() => ({
close,
isNativeDialog: false,
@@ -165,7 +172,7 @@ export function Inner({
contentContainerStyle,
}: DialogInnerProps) {
const t = useTheme()
const {close} = React.useContext(Context)
const {close} = useContext(Context)
const {gtMobile} = useBreakpoints()
const {reduceMotionEnabled} = useA11y()
FocusGuards.useFocusGuards()
@@ -215,7 +222,7 @@ export function Inner({
export const ScrollableInner = Inner
export const InnerFlatList = React.forwardRef<
export const InnerFlatList = forwardRef<
FlatList,
FlatListProps<any> & {label: string} & {
webInnerStyle?: StyleProp<ViewStyle>
@@ -284,7 +291,7 @@ export function FlatListFooter({
export function Close() {
const {_} = useLingui()
const {close} = React.useContext(Context)
const {close} = useContext(Context)
return (
<View
style={[
src/components/Dialog/utils.ts
+2 -2
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {useEffect} from 'react'
import {type DialogControlProps} from '#/components/Dialog/types'
export function useAutoOpen(control: DialogControlProps, showTimeout?: number) {
React.useEffect(() => {
useEffect(() => {
if (showTimeout) {
const timeout = setTimeout(() => {
control.open()
src/components/Fill.tsx
-1
View File
@@ -1,5 +1,4 @@
import {View} from 'react-native'
import type React from 'react'
import {atoms as a, type ViewStyleProp} from '#/alf'
src/components/KnownFollowers.tsx
+4 -6
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useRef} from 'react'
import {View} from 'react-native'
import {
type AppBskyActorDefs,
@@ -46,9 +46,7 @@ export function KnownFollowers({
minimal?: boolean
showIfEmpty?: boolean
}) {
const cache = React.useRef<Map<string, AppBskyActorDefs.KnownFollowers>>(
new Map(),
)
const cache = useRef<Map<string, AppBskyActorDefs.KnownFollowers>>(new Map())
/*
* Results for `knownFollowers` are not sorted consistently, so when
@@ -190,7 +188,7 @@ function KnownFollowersInner({
numberOfLines={2}>
{slice.length >= 2 ? (
// 2-n followers, including blocks
serverCount > 2 ? (
serverCount > 2 ? ( // only 2
<Trans>
Followed by{' '}
<Text emoji key={slice[0].profile.did} style={textStyle}>
@@ -206,7 +204,7 @@ function KnownFollowersInner({
one="# other"
other="# others"
/>
</Trans> // only 2
</Trans>
) : (
<Trans>
Followed by{' '}
src/components/LabelingServiceCard/index.tsx
-1
View File
@@ -3,7 +3,6 @@ import {type AppBskyLabelerDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Plural, Trans} from '@lingui/react/macro'
import type React from 'react'
import {getLabelingServiceTitle} from '#/lib/moderation'
import {sanitizeHandle} from '#/lib/strings/handles'
src/components/LanguageSelect.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -22,7 +22,7 @@ export function LanguageSelect({
}) {
const {_} = useLingui()
const handleOnChange = React.useCallback(
const handleOnChange = useCallback(
(value: string) => {
if (!value) return
onChange(sanitizeAppLanguageSetting(value))
src/components/Layout/context.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import React from 'react'
import {createContext} from 'react'
export const ScrollbarOffsetContext = React.createContext({
export const ScrollbarOffsetContext = createContext({
isWithinOffsetView: false,
})
ScrollbarOffsetContext.displayName = 'ScrollbarOffsetContext'
src/components/LikedByList.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useMemo, useState} from 'react'
import {type AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -29,7 +29,7 @@ function keyExtractor(item: GetLikes.Like) {
export function LikedByList({uri}: {uri: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = React.useState(false)
const [isPTRing, setIsPTRing] = useState(false)
const {
data: resolvedUri,
@@ -49,14 +49,14 @@ export function LikedByList({uri}: {uri: string}) {
const error = resolveError || likedByError
const isError = !!resolveError || !!likedByError
const likes = React.useMemo(() => {
const likes = useMemo(() => {
if (data?.pages) {
return data.pages.flatMap(page => page.likes)
}
return []
}, [data])
const onRefresh = React.useCallback(async () => {
const onRefresh = useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
@@ -66,7 +66,7 @@ export function LikedByList({uri}: {uri: string}) {
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
src/components/LinearGradientBackground.tsx
-1
View File
@@ -1,6 +1,5 @@
import {type StyleProp, type ViewStyle} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
import type React from 'react'
import {gradients} from '#/alf/tokens'
src/components/Link.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React, {useMemo} from 'react'
import {useCallback, useMemo} from 'react'
import {type GestureResponderEvent, Linking} from 'react-native'
import {sanitizeUrl} from '@braintree/sanitize-url'
import {
@@ -117,7 +117,7 @@ export function useLink({
const {linkWarningDialogControl} = useGlobalDialogsControlContext()
const openLink = useOpenLink()
const onPress = React.useCallback(
const onPress = useCallback(
(e: GestureResponderEvent) => {
const exitEarlyIfFalse = outerOnPress?.(e)
@@ -217,7 +217,7 @@ export function useLink({
],
)
const handleLongPress = React.useCallback(() => {
const handleLongPress = useCallback(() => {
const requiresWarning = Boolean(
!disableMismatchWarning &&
displayText &&
@@ -242,7 +242,7 @@ export function useLink({
linkWarningDialogControl,
])
const onLongPress = React.useCallback(
const onLongPress = useCallback(
(e: GestureResponderEvent) => {
const exitEarlyIfFalse = outerOnLongPress?.(e)
if (exitEarlyIfFalse === false) return
src/components/ListCard.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useEffect, useMemo} from 'react'
import {View} from 'react-native'
import {
type AppBskyGraphDefs,
@@ -88,11 +88,11 @@ export function Link({
}: Props & Omit<LinkProps, 'to' | 'label'>) {
const queryClient = useQueryClient()
const href = React.useMemo(() => {
const href = useMemo(() => {
return createProfileListHref({list: view})
}, [view])
React.useEffect(() => {
useEffect(() => {
precacheList(queryClient, view)
}, [view, queryClient])
src/components/Loader.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useEffect} from 'react'
import Animated, {
Easing,
useAnimatedStyle,
@@ -20,7 +20,7 @@ export function Loader(props: Props) {
transform: [{rotate: rotation.get() + 'deg'}],
}))
React.useEffect(() => {
useEffect(() => {
rotation.set(() =>
withRepeat(withTiming(360, {duration: 500, easing: Easing.linear}), -1),
)
src/components/MediaInsetBorder.tsx
-1
View File
@@ -1,5 +1,4 @@
import {StyleSheet} from 'react-native'
import type React from 'react'
import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf'
import {Fill} from '#/components/Fill'
src/components/Menu/context.tsx
+5 -5
View File
@@ -1,15 +1,15 @@
import React from 'react'
import {createContext, useContext} from 'react'
import {type ContextType, type ItemContextType} from '#/components/Menu/types'
export const Context = React.createContext<ContextType | null>(null)
export const Context = createContext<ContextType | null>(null)
Context.displayName = 'MenuContext'
export const ItemContext = React.createContext<ItemContextType | null>(null)
export const ItemContext = createContext<ItemContextType | null>(null)
ItemContext.displayName = 'MenuItemContext'
export function useMenuContext() {
const context = React.useContext(Context)
const context = useContext(Context)
if (!context) {
throw new Error('useMenuContext must be used within a Context.Provider')
@@ -19,7 +19,7 @@ export function useMenuContext() {
}
export function useMenuItemContext() {
const context = React.useContext(ItemContext)
const context = useContext(ItemContext)
if (!context) {
throw new Error('useMenuItemContext must be used within a Context.Provider')
src/components/Menu/types.ts
-1
View File
@@ -4,7 +4,6 @@ import {
type GestureResponderEvent,
type PressableProps,
} from 'react-native'
import type React from 'react'
import {type TextStyleProp, type ViewStyleProp} from '#/alf'
import type * as Dialog from '#/components/Dialog'
src/components/Pills.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useMemo} from 'react'
import {View} from 'react-native'
import {BSKY_LABELER_DID, type ModerationCause} from '@atproto/api'
import {Trans} from '@lingui/react/macro'
@@ -32,7 +32,7 @@ export function Row({
size = 'sm',
}: {children: React.ReactNode | React.ReactNode[]} & CommonProps &
ViewStyleProp) {
const styles = React.useMemo(() => {
const styles = useMemo(() => {
switch (size) {
case 'lg':
return [{gap: 5}]
@@ -67,7 +67,7 @@ export function Label({
const isBlueskyLabel =
desc.sourceType === 'labeler' && desc.sourceDid === BSKY_LABELER_DID
const {outer, avi, text} = React.useMemo(() => {
const {outer, avi, text} = useMemo(() => {
switch (size) {
case 'lg': {
return {
@@ -154,7 +154,7 @@ export function Label({
export function FollowsYou({size = 'sm'}: CommonProps) {
const t = useTheme()
const variantStyles = React.useMemo(() => {
const variantStyles = useMemo(() => {
switch (size) {
case 'sm':
case 'lg':
src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx
+7 -7
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useRef, useState} from 'react'
import {
ActivityIndicator,
type GestureResponderEvent,
@@ -31,16 +31,16 @@ export function ExternalGif({
const consentDialogControl = useDialogControl()
// Tracking if the placer has been activated
const [isPlayerActive, setIsPlayerActive] = React.useState(false)
const [isPlayerActive, setIsPlayerActive] = useState(false)
// Tracking whether the gif has been loaded yet
const [isPrefetched, setIsPrefetched] = React.useState(false)
const [isPrefetched, setIsPrefetched] = useState(false)
// Tracking whether the image is animating
const [isAnimating, setIsAnimating] = React.useState(true)
const [isAnimating, setIsAnimating] = useState(true)
// Used for controlling animation
const imageRef = React.useRef<Image>(null)
const imageRef = useRef<Image>(null)
const load = React.useCallback(() => {
const load = useCallback(() => {
setIsPlayerActive(true)
Image.prefetch(params.playerUri).then(() => {
// Replace the image once it's fetched
@@ -48,7 +48,7 @@ export function ExternalGif({
})
}, [params.playerUri])
const onPlayPress = React.useCallback(
const onPlayPress = useCallback(
(event: GestureResponderEvent) => {
// Don't propagate on web
event.preventDefault()
src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx
+9 -9
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useEffect, useMemo, useState} from 'react'
import {
ActivityIndicator,
type GestureResponderEvent,
@@ -84,7 +84,7 @@ function Player({
}) {
// ensures we only load what's requested
// when it's a youtube video, we need to allow both bsky.app and youtube.com
const onShouldStartLoadWithRequest = React.useCallback(
const onShouldStartLoadWithRequest = useCallback(
(event: ShouldStartLoadRequest) =>
event.url === params.playerUri ||
(params.source.startsWith('youtube') &&
@@ -129,10 +129,10 @@ export function ExternalPlayer({
const externalEmbedsPrefs = useExternalEmbedsPrefs()
const consentDialogControl = useDialogControl()
const [isPlayerActive, setPlayerActive] = React.useState(false)
const [isLoading, setIsLoading] = React.useState(true)
const [isPlayerActive, setPlayerActive] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const aspect = React.useMemo(() => {
const aspect = useMemo(() => {
return getPlayerAspect({
type: params.type,
width: windowDims.width,
@@ -166,7 +166,7 @@ export function ExternalPlayer({
}, false) // False here disables autostarting the callback
// watch for leaving the viewport due to scrolling
React.useEffect(() => {
useEffect(() => {
// We don't want to do anything if the player isn't active
if (!isPlayerActive) return
@@ -185,11 +185,11 @@ export function ExternalPlayer({
}
}, [navigation, isPlayerActive, frameCallback])
const onLoad = React.useCallback(() => {
const onLoad = useCallback(() => {
setIsLoading(false)
}, [])
const onPlayPress = React.useCallback(
const onPlayPress = useCallback(
(event: GestureResponderEvent) => {
// Prevent this from propagating upward on web
event.preventDefault()
@@ -204,7 +204,7 @@ export function ExternalPlayer({
[externalEmbedsPrefs, consentDialogControl, params.source],
)
const onAcceptConsent = React.useCallback(() => {
const onAcceptConsent = useCallback(() => {
setPlayerActive(true)
}, [])
src/components/Post/Embed/ExternalEmbed/index.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {useCallback, useMemo} from 'react'
import {type StyleProp, View, type ViewStyle} from 'react-native'
import {Image} from 'expo-image'
import {type AppBskyEmbedExternal} from '@atproto/api'
@@ -38,7 +38,7 @@ export const ExternalEmbed = ({
const externalEmbedPrefs = useExternalEmbedsPrefs()
const niceUrl = toNiceDomain(link.uri)
const imageUri = link.thumb
const embedPlayerParams = React.useMemo(() => {
const embedPlayerParams = useMemo(() => {
const params = parseEmbedPlayerFromUrl(link.uri)
if (params && externalEmbedPrefs?.[params.source] !== 'hide') {
src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx
+5 -3
View File
@@ -1,5 +1,7 @@
import React, {
import {
createContext,
useCallback,
useContext,
useEffect,
useId,
useMemo,
@@ -10,7 +12,7 @@ import {useWindowDimensions} from 'react-native'
import {IS_NATIVE, IS_WEB} from '#/env'
const Context = React.createContext<{
const Context = createContext<{
activeViewId: string | null
setActiveView: (viewId: string) => void
sendViewPosition: (viewId: string, y: number) => void
@@ -94,7 +96,7 @@ export function Provider({children}: {children: React.ReactNode}) {
}
export function useActiveVideoWeb() {
const context = React.useContext(Context)
const context = useContext(Context)
if (!context) {
throw new Error(
'useActiveVideoWeb must be used within a ActiveVideoWebProvider',
src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
+7 -8
View File
@@ -1,7 +1,6 @@
import React from 'react'
import {createContext, useContext, useMemo, useState} from 'react'
const Context = React.createContext<{
// native
const Context = createContext<{
muted: boolean
setMuted: React.Dispatch<React.SetStateAction<boolean>>
// web
@@ -11,10 +10,10 @@ const Context = React.createContext<{
Context.displayName = 'VideoVolumeContext'
export function Provider({children}: {children: React.ReactNode}) {
const [muted, setMuted] = React.useState(true)
const [volume, setVolume] = React.useState(1)
const [muted, setMuted] = useState(true)
const [volume, setVolume] = useState(1)
const value = React.useMemo(
const value = useMemo(
() => ({
muted,
setMuted,
@@ -28,7 +27,7 @@ export function Provider({children}: {children: React.ReactNode}) {
}
export function useVideoVolumeState() {
const context = React.useContext(Context)
const context = useContext(Context)
if (!context) {
throw new Error(
'useVideoVolumeState must be used within a VideoVolumeProvider',
@@ -38,7 +37,7 @@ export function useVideoVolumeState() {
}
export function useVideoMuteState() {
const context = React.useContext(Context)
const context = useContext(Context)
if (!context) {
throw new Error(
'useVideoMuteState must be used within a VideoVolumeProvider',
src/components/PostControls/BookmarkButton.tsx
-1
View File
@@ -4,7 +4,6 @@ import {type AppBskyFeedDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import type React from 'react'
import {useCleanError} from '#/lib/hooks/useCleanError'
import {type Shadow} from '#/state/cache/post-shadow'
src/components/ProfileHoverCard/index.web.tsx
+15 -15
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {memo, useCallback, useEffect, useMemo, useReducer, useRef} from 'react'
import {View} from 'react-native'
import {
type AppBskyActorDefs,
@@ -61,7 +61,7 @@ const floatingMiddlewares = [
export function ProfileHoverCard(props: ProfileHoverCardProps) {
const prefetchProfileQuery = usePrefetchProfileQuery()
const prefetchedProfile = React.useRef(false)
const prefetchedProfile = useRef(false)
const onPointerMove = () => {
if (!prefetchedProfile.current) {
prefetchedProfile.current = true
@@ -116,7 +116,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
middleware: floatingMiddlewares,
})
const [currentState, dispatch] = React.useReducer(
const [currentState, dispatch] = useReducer(
// Tip: console.log(state, action) when debugging.
(state: State, action: Action): State => {
// Pressing within a card should always hide it.
@@ -262,7 +262,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
{stage: 'hidden'},
)
React.useEffect(() => {
useEffect(() => {
if (currentState.effect) {
const effect = currentState.effect
return effect()
@@ -270,16 +270,16 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
}, [currentState])
const prefetchProfileQuery = usePrefetchProfileQuery()
const prefetchedProfile = React.useRef(false)
const prefetchIfNeeded = React.useCallback(async () => {
const prefetchedProfile = useRef(false)
const prefetchIfNeeded = useCallback(async () => {
if (!prefetchedProfile.current) {
prefetchedProfile.current = true
prefetchProfileQuery(props.did)
}
}, [prefetchProfileQuery, props.did])
const didFireHover = React.useRef(false)
const onPointerMoveTarget = React.useCallback(() => {
const didFireHover = useRef(false)
const onPointerMoveTarget = useCallback(() => {
prefetchIfNeeded()
// Conceptually we want something like onPointerEnter,
// but we want to ignore entering only due to scrolling.
@@ -290,20 +290,20 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
}
}, [prefetchIfNeeded])
const onPointerLeaveTarget = React.useCallback(() => {
const onPointerLeaveTarget = useCallback(() => {
didFireHover.current = false
dispatch('unhovered-target')
}, [])
const onPointerEnterCard = React.useCallback(() => {
const onPointerEnterCard = useCallback(() => {
dispatch('hovered-card')
}, [])
const onPointerLeaveCard = React.useCallback(() => {
const onPointerLeaveCard = useCallback(() => {
dispatch('unhovered-card')
}, [])
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
dispatch('pressed')
}, [])
@@ -411,7 +411,7 @@ let Card = ({
</View>
)
}
Card = React.memo(Card)
Card = memo(Card)
function Inner({
profile,
@@ -425,7 +425,7 @@ function Inner({
const t = useTheme()
const {_, i18n} = useLingui()
const {currentAccount} = useSession()
const moderation = React.useMemo(
const moderation = useMemo(
() => moderateProfile(profile, moderationOpts),
[profile, moderationOpts],
)
@@ -453,7 +453,7 @@ function Inner({
did: profile.did,
handle: profile.handle,
})
const isMe = React.useMemo(
const isMe = useMemo(
() => currentAccount?.did === profile.did,
[currentAccount, profile],
)
src/components/ProgressGuide/Toast.tsx
+15 -8
View File
@@ -1,4 +1,11 @@
import React, {useImperativeHandle} from 'react'
import {
forwardRef,
useCallback,
useImperativeHandle,
useMemo,
useRef,
useState,
} from 'react'
import {Pressable, useWindowDimensions, View} from 'react-native'
import Animated, {
Easing,
@@ -28,25 +35,25 @@ export interface ProgressGuideToastProps {
visibleDuration?: number // default 5s
}
export const ProgressGuideToast = React.forwardRef<
export const ProgressGuideToast = forwardRef<
ProgressGuideToastRef,
ProgressGuideToastProps
>(function ProgressGuideToast({title, subtitle, visibleDuration}, ref) {
const t = useTheme()
const {_} = useLingui()
const insets = useSafeAreaInsets()
const [isOpen, setIsOpen] = React.useState(false)
const [isOpen, setIsOpen] = useState(false)
const translateY = useSharedValue(0)
const opacity = useSharedValue(0)
const animatedCheckRef = React.useRef<AnimatedCheckRef | null>(null)
const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
const animatedCheckRef = useRef<AnimatedCheckRef | null>(null)
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
const winDim = useWindowDimensions()
/**
* Methods
*/
const close = React.useCallback(() => {
const close = useCallback(() => {
// clear the timeout, in case this was called imperatively
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
@@ -67,7 +74,7 @@ export const ProgressGuideToast = React.forwardRef<
)
}, [setIsOpen, opacity])
const open = React.useCallback(() => {
const open = useCallback(() => {
// set isOpen=true to render
setIsOpen(true)
@@ -105,7 +112,7 @@ export const ProgressGuideToast = React.forwardRef<
[open, close],
)
const containerStyle = React.useMemo(() => {
const containerStyle = useMemo(() => {
let left = 10
let right = 10
if (IS_WEB && winDim.width > 400) {
src/components/RichTextTag.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useMemo} from 'react'
import {type StyleProp, Text as RNText, type TextStyle} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -68,7 +68,7 @@ export function RichTextTag({
/*
* Mute word records that exactly match the tag in question.
*/
const removeableMuteWords = React.useMemo(() => {
const removeableMuteWords = useMemo(() => {
return (
preferences?.moderationPrefs.mutedWords?.filter(word => {
return word.value === tag
src/components/ScreenTransition.tsx
-1
View File
@@ -6,7 +6,6 @@ import Animated, {
SlideInLeft,
SlideInRight,
} from 'react-native-reanimated'
import type React from 'react'
import {IS_WEB} from '#/env'
src/components/StarterPack/Main/FeedsList.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {forwardRef, useCallback, useImperativeHandle, useState} from 'react'
import {type ListRenderItemInfo, View} from 'react-native'
import {type AppBskyFeedDefs} from '@atproto/api'
@@ -19,9 +19,9 @@ interface ProfilesListProps {
scrollElRef: ListRef
}
export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
export const FeedsList = forwardRef<SectionRef, ProfilesListProps>(
function FeedsListImpl({feeds, headerHeight, scrollElRef}, ref) {
const [initialHeaderHeight] = React.useState(headerHeight)
const [initialHeaderHeight] = useState(headerHeight)
const bottomBarOffset = useBottomBarOffset(20)
const t = useTheme()
@@ -32,7 +32,7 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
})
}, [scrollElRef, headerHeight])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
src/components/StarterPack/Main/PostsList.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {forwardRef, useCallback, useImperativeHandle} from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -17,7 +17,7 @@ interface ProfilesListProps {
scrollElRef: ListRef
}
export const PostsList = React.forwardRef<SectionRef, ProfilesListProps>(
export const PostsList = forwardRef<SectionRef, ProfilesListProps>(
function PostsListImpl({listUri, headerHeight, scrollElRef}, ref) {
const feed: FeedDescriptor = `list|${listUri}`
const {_} = useLingui()
@@ -29,7 +29,7 @@ export const PostsList = React.forwardRef<SectionRef, ProfilesListProps>(
})
}, [scrollElRef, headerHeight])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
src/components/StarterPack/Main/ProfilesList.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {forwardRef, useCallback, useImperativeHandle, useState} from 'react'
import {type ListRenderItemInfo, View} from 'react-native'
import {
type AppBskyActorDefs,
@@ -37,7 +37,7 @@ interface ProfilesListProps {
scrollElRef: ListRef
}
export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
export const ProfilesList = forwardRef<SectionRef, ProfilesListProps>(
function ProfilesListImpl(
{listUri, moderationOpts, headerHeight, scrollElRef},
ref,
@@ -48,7 +48,7 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
const {currentAccount} = useSession()
const {data, refetch, isError} = useAllListMembersQuery(listUri)
const [isPTRing, setIsPTRing] = React.useState(false)
const [isPTRing, setIsPTRing] = useState(false)
// The server returns these sorted by descending creation date, so we want to invert
@@ -80,7 +80,7 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
})
}, [scrollElRef, headerHeight])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
src/components/StarterPack/StarterPackCard.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useMemo} from 'react'
import {View} from 'react-native'
import {Image} from 'expo-image'
import {AppBskyGraphStarterpack, AtUri} from '@atproto/api'
@@ -115,7 +115,7 @@ export function useStarterPackLink({
}) {
const {_} = useLingui()
const qc = useQueryClient()
const {rkey, handleOrDid} = React.useMemo(() => {
const {rkey, handleOrDid} = useMemo(() => {
const rkey = new AtUri(view.uri).rkey
const {creator} = view
return {rkey, handleOrDid: creator.handle || creator.did}
@@ -148,7 +148,7 @@ export function Link({
const {_} = useLingui()
const queryClient = useQueryClient()
const {record} = starterPack
const {rkey, handleOrDid} = React.useMemo(() => {
const {rkey, handleOrDid} = useMemo(() => {
const rkey = new AtUri(starterPack.uri).rkey
const {creator} = starterPack
return {rkey, handleOrDid: creator.handle || creator.did}
src/components/Toast/index.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {isValidElement} from 'react'
import {View} from 'react-native'
import {nanoid} from 'nanoid/non-secure'
import {toast as sonner, Toaster} from 'sonner-native'
@@ -61,7 +61,7 @@ export function show(
duration: options?.duration ?? DURATION,
},
)
} else if (React.isValidElement(content)) {
} else if (isValidElement(content)) {
sonner.custom(
<ToastConfigProvider id={id} type={type}>
{content}
src/components/Toast/index.web.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {isValidElement} from 'react'
import {nanoid} from 'nanoid/non-secure'
import {toast as sonner, Toaster} from 'sonner'
@@ -60,7 +60,7 @@ export function show(
duration: options?.duration ?? DURATION,
},
)
} else if (React.isValidElement(content)) {
} else if (isValidElement(content)) {
sonner(
<ToastConfigProvider id={id} type={type}>
{content}
src/components/TrendingTopics.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useMemo} from 'react'
import {View} from 'react-native'
import {type AtUri} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -170,7 +170,7 @@ type ParsedTrendingTopic =
export function useTopic(raw: TrendingTopic): ParsedTrendingTopic {
const {_} = useLingui()
return React.useMemo(() => {
return useMemo(() => {
const {topic: displayName, link} = raw
if (link.startsWith('/search')) {
src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useState} from 'react'
import {View} from 'react-native'
import {ToolsOzoneReportDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -44,7 +44,7 @@ function Inner({control}: {control: Dialog.DialogControlProps}) {
const {gtPhone} = useBreakpoints()
const agent = useAgent()
const [details, setDetails] = React.useState('')
const [details, setDetails] = useState('')
const isInvalid = details.length > 1000
const {mutate, isPending} = useMutation({
src/components/anim/AnimatedCheck.tsx
+64 -65
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {forwardRef, useCallback, useEffect, useImperativeHandle} from 'react'
import Animated, {
Easing,
useAnimatedProps,
@@ -23,74 +23,73 @@ export interface AnimatedCheckProps extends Props {
playOnMount?: boolean
}
export const AnimatedCheck = React.forwardRef<
AnimatedCheckRef,
AnimatedCheckProps
>(function AnimatedCheck({playOnMount, ...props}, ref) {
const {fill, size, style, ...rest} = useCommonSVGProps(props)
const circleAnim = useSharedValue(0)
const checkAnim = useSharedValue(0)
export const AnimatedCheck = forwardRef<AnimatedCheckRef, AnimatedCheckProps>(
function AnimatedCheck({playOnMount, ...props}, ref) {
const {fill, size, style, ...rest} = useCommonSVGProps(props)
const circleAnim = useSharedValue(0)
const checkAnim = useSharedValue(0)
const circleAnimatedProps = useAnimatedProps(() => ({
strokeDashoffset: 166 - circleAnim.get() * 166,
}))
const checkAnimatedProps = useAnimatedProps(() => ({
strokeDashoffset: 48 - 48 * checkAnim.get(),
}))
const circleAnimatedProps = useAnimatedProps(() => ({
strokeDashoffset: 166 - circleAnim.get() * 166,
}))
const checkAnimatedProps = useAnimatedProps(() => ({
strokeDashoffset: 48 - 48 * checkAnim.get(),
}))
const play = React.useCallback(
(cb?: () => void) => {
circleAnim.set(0)
checkAnim.set(0)
const play = useCallback(
(cb?: () => void) => {
circleAnim.set(0)
checkAnim.set(0)
circleAnim.set(() =>
withTiming(1, {duration: 500, easing: Easing.linear}),
)
checkAnim.set(() =>
withDelay(
500,
withTiming(1, {duration: 300, easing: Easing.linear}, cb),
),
)
},
[circleAnim, checkAnim],
)
circleAnim.set(() =>
withTiming(1, {duration: 500, easing: Easing.linear}),
)
checkAnim.set(() =>
withDelay(
500,
withTiming(1, {duration: 300, easing: Easing.linear}, cb),
),
)
},
[circleAnim, checkAnim],
)
React.useImperativeHandle(ref, () => ({
play,
}))
useImperativeHandle(ref, () => ({
play,
}))
React.useEffect(() => {
if (playOnMount) {
play()
}
}, [play, playOnMount])
useEffect(() => {
if (playOnMount) {
play()
}
}, [play, playOnMount])
return (
<Svg
fill="none"
{...rest}
viewBox="0 0 52 52"
width={size}
height={size}
style={style}>
<AnimatedCircle
animatedProps={circleAnimatedProps}
cx="26"
cy="26"
r="24"
return (
<Svg
fill="none"
stroke={fill}
strokeWidth={4}
strokeDasharray={166}
/>
<AnimatedPath
animatedProps={checkAnimatedProps}
stroke={fill}
d={PATH}
strokeWidth={4}
strokeDasharray={48}
/>
</Svg>
)
})
{...rest}
viewBox="0 0 52 52"
width={size}
height={size}
style={style}>
<AnimatedCircle
animatedProps={circleAnimatedProps}
cx="26"
cy="26"
r="24"
fill="none"
stroke={fill}
strokeWidth={4}
strokeDasharray={166}
/>
<AnimatedPath
animatedProps={checkAnimatedProps}
stroke={fill}
d={PATH}
strokeWidth={4}
strokeDasharray={48}
/>
</Svg>
)
},
)
src/components/dialogs/BirthDateSettings.tsx
+4 -6
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useMemo, useState} from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -125,12 +125,10 @@ function BirthdayInner({
}) {
const {_} = useLingui()
const cleanError = useCleanError()
const [date, setDate] = React.useState(
preferences.birthDate || getDateAgo(18),
)
const [date, setDate] = useState(preferences.birthDate || getDateAgo(18))
const {isPending, error, mutateAsync: setBirthDate} = useBirthdateMutation()
const hasChanged = date !== preferences.birthDate
const errorMessage = React.useMemo(() => {
const errorMessage = useMemo(() => {
if (error) {
const {raw, clean} = cleanError(error)
return clean || raw || error.toString()
@@ -141,7 +139,7 @@ function BirthdayInner({
const isUnder13 = age < 13
const isUnder18 = age >= 13 && age < 18
const onSave = React.useCallback(async () => {
const onSave = useCallback(async () => {
try {
// skip if date is the same
if (hasChanged) {
src/components/dialogs/MutedWords.tsx
+8 -8
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useState} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -58,13 +58,13 @@ function MutedWordsInner() {
error: preferencesError,
} = usePreferencesQuery()
const {isPending, mutateAsync: addMutedWord} = useUpsertMutedWordsMutation()
const [field, setField] = React.useState('')
const [targets, setTargets] = React.useState(['content'])
const [error, setError] = React.useState('')
const [durations, setDurations] = React.useState(['forever'])
const [excludeFollowing, setExcludeFollowing] = React.useState(false)
const [field, setField] = useState('')
const [targets, setTargets] = useState(['content'])
const [error, setError] = useState('')
const [durations, setDurations] = useState(['forever'])
const [excludeFollowing, setExcludeFollowing] = useState(false)
const submit = React.useCallback(async () => {
const submit = useCallback(async () => {
const sanitizedValue = sanitizeMutedWordValue(field)
const surfaces = ['tag', targets.includes('content') && 'content'].filter(
Boolean,
@@ -431,7 +431,7 @@ function MutedWordRow({
const isExpired = expiryDate && expiryDate < new Date()
const formatDistance = useFormatDistance()
const remove = React.useCallback(async () => {
const remove = useCallback(async () => {
control.close()
removeMutedWord(word)
}, [removeMutedWord, word, control])
src/components/dialogs/Signin.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -32,12 +32,12 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
const showSignIn = React.useCallback(() => {
const showSignIn = useCallback(() => {
closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'none'})
}, [requestSwitchToAccount, closeAllActiveElements])
const showCreateAccount = React.useCallback(() => {
const showCreateAccount = useCallback(() => {
closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'new'})
}, [requestSwitchToAccount, closeAllActiveElements])
src/components/dms/AfterReportDialog.tsx
-1
View File
@@ -5,7 +5,6 @@ import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {StackActions, useNavigation} from '@react-navigation/native'
import type React from 'react'
import {type NavigationProp} from '#/lib/routes/types'
import {useProfileShadow} from '#/state/cache/profile-shadow'
src/components/dms/BlockedByListDialog.tsx
+3 -6
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {Fragment} from 'react'
import {View} from 'react-native'
import {type ModerationCause} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -25,7 +25,6 @@ export function BlockedByListDialog({
return (
<Prompt.Outer control={control} testID="blockedByListDialog">
<Prompt.TitleText>{_(msg`User blocked by list`)}</Prompt.TitleText>
<View style={[a.gap_sm, a.pb_lg]}>
<Text
selectable
@@ -39,7 +38,7 @@ export function BlockedByListDialog({
{_(msg`Lists blocking this user:`)}{' '}
{listBlocks.map((block, i) =>
block.source.type === 'list' ? (
<React.Fragment key={block.source.list.uri}>
<Fragment key={block.source.list.uri}>
{i === 0 ? null : ', '}
<InlineLinkText
label={block.source.list.name}
@@ -47,16 +46,14 @@ export function BlockedByListDialog({
style={[a.text_md, a.leading_snug]}>
{block.source.list.name}
</InlineLinkText>
</React.Fragment>
</Fragment>
) : null,
)}
</Text>
</View>
<Prompt.Actions>
<Prompt.Action cta={_(msg`I understand`)} onPress={() => {}} />
</Prompt.Actions>
<Dialog.Close />
</Prompt.Outer>
)
src/components/dms/ChatEmptyPill.tsx
+6 -6
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useMemo, useState} from 'react'
import {Pressable, View} from 'react-native'
import Animated, {
runOnJS,
@@ -24,11 +24,11 @@ export function ChatEmptyPill() {
const t = useTheme()
const {_} = useLingui()
const playHaptic = useHaptics()
const [promptIndex, setPromptIndex] = React.useState(lastIndex)
const [promptIndex, setPromptIndex] = useState(lastIndex)
const scale = useSharedValue(1)
const prompts = React.useMemo(() => {
const prompts = useMemo(() => {
return [
_(msg`Say hello!`),
_(msg`Share your favorite feed!`),
@@ -40,17 +40,17 @@ export function ChatEmptyPill() {
]
}, [_])
const onPressIn = React.useCallback(() => {
const onPressIn = useCallback(() => {
if (IS_WEB) return
scale.set(() => withTiming(1.075, {duration: 100}))
}, [scale])
const onPressOut = React.useCallback(() => {
const onPressOut = useCallback(() => {
if (IS_WEB) return
scale.set(() => withTiming(1, {duration: 100}))
}, [scale])
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
runOnJS(playHaptic)()
let randomPromptIndex = Math.floor(Math.random() * prompts.length)
while (randomPromptIndex === lastIndex) {
src/components/dms/ConvoMenu.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React, {useCallback} from 'react'
import {memo, useCallback} from 'react'
import {Keyboard, View} from 'react-native'
import {type ChatBskyConvoDefs, type ModerationCause} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -159,7 +159,7 @@ let ConvoMenu = ({
</>
)
}
ConvoMenu = React.memo(ConvoMenu)
ConvoMenu = memo(ConvoMenu)
function MenuContent({
convo: initialConvo,
@@ -211,7 +211,7 @@ function MenuContent({
const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
const toggleBlock = React.useCallback(() => {
const toggleBlock = useCallback(() => {
if (listBlocks.length) {
blockedByListControl.open()
return
src/components/dms/DateDivider.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {memo} from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -78,5 +78,5 @@ let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
</View>
)
}
DateDivider = React.memo(DateDivider)
DateDivider = memo(DateDivider)
export {DateDivider}
src/components/dms/MessageContext.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react'
import {createContext, useContext} from 'react'
const MessageContext = React.createContext(false)
const MessageContext = createContext(false)
MessageContext.displayName = 'MessageContext'
export function MessageContextProvider({
@@ -14,5 +14,5 @@ export function MessageContextProvider({
}
export function useIsWithinMessage() {
return React.useContext(MessageContext)
return useContext(MessageContext)
}
src/components/dms/MessageItem.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React, {useCallback, useMemo} from 'react'
import {memo, useCallback, useMemo} from 'react'
import {
type GestureResponderEvent,
type StyleProp,
@@ -233,7 +233,7 @@ let MessageItem = ({
</>
)
}
MessageItem = React.memo(MessageItem)
MessageItem = memo(MessageItem)
export {MessageItem}
let MessageItemMetadata = ({
@@ -328,5 +328,5 @@ let MessageItemMetadata = ({
</Text>
)
}
MessageItemMetadata = React.memo(MessageItemMetadata)
MessageItemMetadata = memo(MessageItemMetadata)
export {MessageItemMetadata}
src/components/dms/MessageItemEmbed.tsx
+3 -4
View File
@@ -1,10 +1,9 @@
import React from 'react'
import {memo} from 'react'
import {useWindowDimensions, View} from 'react-native'
import {type $Typed, type AppBskyEmbedRecord} from '@atproto/api'
import {atoms as a, native, tokens, useTheme, web} from '#/alf'
import {PostEmbedViewContext} from '#/components/Post/Embed'
import {Embed} from '#/components/Post/Embed'
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
import {MessageContextProvider} from './MessageContext'
let MessageItemEmbed = ({
@@ -43,5 +42,5 @@ let MessageItemEmbed = ({
</MessageContextProvider>
)
}
MessageItemEmbed = React.memo(MessageItemEmbed)
MessageItemEmbed = memo(MessageItemEmbed)
export {MessageItemEmbed}
src/components/dms/MessageProfileButton.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {View} from 'react-native'
import {type AppBskyActorDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -39,7 +39,7 @@ export function MessageProfileButton({
},
})
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
if (!convoAvailability?.canChat) {
return
}
src/components/dms/MessagesListBlockedFooter.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useMemo} from 'react'
import {View} from 'react-native'
import {type ModerationDecision} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -38,7 +38,7 @@ export function MessagesListBlockedFooter({
const reportControl = useDialogControl()
const blockedByListControl = useDialogControl()
const {listBlocks, userBlock} = React.useMemo(() => {
const {listBlocks, userBlock} = useMemo(() => {
const modui = moderation.ui('profileView')
const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
const listBlocks = blocks.filter(alert => alert.source.type === 'list')
@@ -51,7 +51,7 @@ export function MessagesListBlockedFooter({
const isBlocking = !!userBlock || !!listBlocks.length
const onUnblockPress = React.useCallback(() => {
const onUnblockPress = useCallback(() => {
if (listBlocks.length) {
blockedByListControl.open()
} else {
src/components/dms/NewMessagesPill.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {Pressable, View} from 'react-native'
import Animated, {
runOnJS,
@@ -33,17 +33,17 @@ export function NewMessagesPill({
const scale = useSharedValue(1)
const onPressIn = React.useCallback(() => {
const onPressIn = useCallback(() => {
if (IS_WEB) return
scale.set(() => withTiming(1.075, {duration: 100}))
}, [scale])
const onPressOut = React.useCallback(() => {
const onPressOut = useCallback(() => {
if (IS_WEB) return
scale.set(() => withTiming(1, {duration: 100}))
}, [scale])
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
runOnJS(playHaptic)()
onPressInner?.()
}, [onPressInner, playHaptic])
src/components/forms/DateField/index.web.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {forwardRef, useCallback} from 'react'
import {StyleSheet, type TextInput, type TextInputProps} from 'react-native'
// @ts-expect-error untyped
import {unstable_createElement} from 'react-native-web'
@@ -11,7 +11,7 @@ import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components
export * as utils from '#/components/forms/DateField/utils'
export const LabelText = TextField.LabelText
const InputBase = React.forwardRef<HTMLInputElement, TextInputProps>(
const InputBase = forwardRef<HTMLInputElement, TextInputProps>(
({style, ...props}, ref) => {
return unstable_createElement('input', {
...props,
@@ -42,7 +42,7 @@ export function DateField({
accessibilityHint,
maximumDate,
}: DateFieldProps) {
const handleOnChange = React.useCallback(
const handleOnChange = useCallback(
(e: any) => {
const date = e.target.valueAsDate || e.target.value
src/components/forms/HostingProvider.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {Keyboard, View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -28,7 +28,7 @@ export function HostingProvider({
const t = useTheme()
const {_} = useLingui()
const onPressSelectService = React.useCallback(() => {
const onPressSelectService = useCallback(() => {
Keyboard.dismiss()
serverInputControl.open()
onOpenDialog?.()
src/components/forms/InputGroup.tsx
+6 -6
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {Children, cloneElement, Fragment, isValidElement} from 'react'
import {View} from 'react-native'
import {atoms, useTheme} from '#/alf'
@@ -8,19 +8,19 @@ import {atoms, useTheme} from '#/alf'
*/
export function InputGroup(props: React.PropsWithChildren<{}>) {
const t = useTheme()
const children = React.Children.toArray(props.children)
const children = Children.toArray(props.children)
const total = children.length
return (
<View style={[atoms.w_full]}>
{children.map((child, i) => {
return React.isValidElement(child) ? (
<React.Fragment key={i}>
return isValidElement(child) ? (
<Fragment key={i}>
{i > 0 ? (
<View
style={[atoms.border_b, {borderColor: t.palette.contrast_500}]}
/>
) : null}
{React.cloneElement(child, {
{cloneElement(child, {
// @ts-ignore
style: [
// @ts-ignore
@@ -38,7 +38,7 @@ export function InputGroup(props: React.PropsWithChildren<{}>) {
},
],
})}
</React.Fragment>
</Fragment>
) : null
})}
</View>
src/components/hooks/useDelayedLoading.ts
+3 -3
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {useEffect, useState} from 'react'
export function useDelayedLoading(delay: number, initialState: boolean = true) {
const [isLoading, setIsLoading] = React.useState(initialState)
const [isLoading, setIsLoading] = useState(initialState)
React.useEffect(() => {
useEffect(() => {
let timeout: NodeJS.Timeout
// on initial load, show a loading spinner for a hot sec to prevent flash
if (isLoading) timeout = setTimeout(() => setIsLoading(false), delay)
src/components/hooks/useFollowMethods.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -25,7 +25,7 @@ export function useFollowMethods({
logContext,
)
const follow = React.useCallback(() => {
const follow = useCallback(() => {
requireAuth(async () => {
try {
await queueFollow()
@@ -38,7 +38,7 @@ export function useFollowMethods({
})
}, [_, queueFollow, requireAuth])
const unfollow = React.useCallback(() => {
const unfollow = useCallback(() => {
requireAuth(async () => {
try {
await queueUnfollow()
src/components/hooks/useInteractionState.ts
+5 -5
View File
@@ -1,16 +1,16 @@
import React from 'react'
import {useCallback, useMemo, useState} from 'react'
export function useInteractionState() {
const [state, setState] = React.useState(false)
const [state, setState] = useState(false)
const onIn = React.useCallback(() => {
const onIn = useCallback(() => {
setState(true)
}, [])
const onOut = React.useCallback(() => {
const onOut = useCallback(() => {
setState(false)
}, [])
return React.useMemo(
return useMemo(
() => ({
state,
onIn,
src/components/hooks/useRichText.ts
+5 -5
View File
@@ -1,12 +1,12 @@
import React from 'react'
import {useEffect, useState} from 'react'
import {RichText as RichTextAPI} from '@atproto/api'
import {useAgent} from '#/state/session'
export function useRichText(text: string): [RichTextAPI, boolean] {
const [prevText, setPrevText] = React.useState(text)
const [rawRT, setRawRT] = React.useState(() => new RichTextAPI({text}))
const [resolvedRT, setResolvedRT] = React.useState<RichTextAPI | null>(null)
const [prevText, setPrevText] = useState(text)
const [rawRT, setRawRT] = useState(() => new RichTextAPI({text}))
const [resolvedRT, setResolvedRT] = useState<RichTextAPI | null>(null)
const agent = useAgent()
if (text !== prevText) {
setPrevText(text)
@@ -14,7 +14,7 @@ export function useRichText(text: string): [RichTextAPI, boolean] {
setResolvedRT(null)
// This will queue an immediate re-render
}
React.useEffect(() => {
useEffect(() => {
let ignore = false
async function resolveRTFacets() {
// new each time
src/components/hooks/useStarterPackEntry.native.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useEffect, useState} from 'react'
import {
createStarterPackLinkFromAndroidReferrer,
@@ -10,11 +10,11 @@ import {IS_ANDROID} from '#/env'
import {Referrer, SharedPrefs} from '../../../modules/expo-bluesky-swiss-army'
export function useStarterPackEntry() {
const [ready, setReady] = React.useState(false)
const [ready, setReady] = useState(false)
const setActiveStarterPack = useSetActiveStarterPack()
const hasCheckedForStarterPack = useHasCheckedForStarterPack()
React.useEffect(() => {
useEffect(() => {
if (ready) return
// On Android, we cannot clear the referral link. It gets stored for 90 days and all we can do is query for it. So,
src/components/hooks/useStarterPackEntry.ts
+3 -3
View File
@@ -1,14 +1,14 @@
import React from 'react'
import {useEffect, useState} from 'react'
import {httpStarterPackUriToAtUri} from '#/lib/strings/starter-pack'
import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
export function useStarterPackEntry() {
const [ready, setReady] = React.useState(false)
const [ready, setReady] = useState(false)
const setActiveStarterPack = useSetActiveStarterPack()
React.useEffect(() => {
useEffect(() => {
const href = window.location.href
const atUri = httpStarterPackUriToAtUri(href)
src/components/icons/TEMPLATE.tsx
+5 -5
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {forwardRef} from 'react'
import Svg, {Path} from 'react-native-svg'
import {type Props, useCommonSVGProps} from '#/components/icons/common'
export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
export const IconTemplate_Stroke2_Corner0_Rounded = forwardRef(
function LogoImpl(props: Props, ref) {
const {fill, size, style, ...rest} = useCommonSVGProps(props)
@@ -41,7 +41,7 @@ export function createSinglePathSVG({
strokeLinecap?: 'butt' | 'round' | 'square'
strokeLinejoin?: 'miter' | 'round' | 'bevel'
}) {
return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
const hasStroke = strokeWidth > 0
@@ -72,7 +72,7 @@ export function createSinglePathSVG({
}
export function createSinglePathSVG2({path}: {path: string}) {
return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
return (
@@ -92,7 +92,7 @@ export function createSinglePathSVG2({path}: {path: string}) {
}
export function createMultiPathSVG({paths}: {paths: string[]}) {
return React.forwardRef<Svg, Props>(function LogoImpl(props, ref) {
return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
return (
src/components/icons/VerifiedCheck.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {forwardRef} from 'react'
import Svg, {Circle, Path} from 'react-native-svg'
import {type Props, useCommonSVGProps} from '#/components/icons/common'
export const VerifiedCheck = React.forwardRef<Svg, Props>(
export const VerifiedCheck = forwardRef<Svg, Props>(
function LogoImpl(props, ref) {
const {fill, size, style, ...rest} = useCommonSVGProps(props)
src/components/icons/VerifierCheck.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {forwardRef} from 'react'
import Svg, {Path} from 'react-native-svg'
import {type Props, useCommonSVGProps} from '#/components/icons/common'
export const VerifierCheck = React.forwardRef<Svg, Props>(
export const VerifierCheck = forwardRef<Svg, Props>(
function LogoImpl(props, ref) {
const {fill, size, style, ...rest} = useCommonSVGProps(props)
src/components/intents/IntentDialogs.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {createContext, useContext, useMemo, useState} from 'react'
import * as Dialog from '#/components/Dialog'
import {type DialogControlProps} from '#/components/Dialog'
@@ -10,17 +10,17 @@ interface Context {
setVerifyEmailState: (state: {code: string} | undefined) => void
}
const Context = React.createContext({} as Context)
const Context = createContext({} as Context)
Context.displayName = 'IntentDialogsContext'
export const useIntentDialogs = () => React.useContext(Context)
export const useIntentDialogs = () => useContext(Context)
export function Provider({children}: {children: React.ReactNode}) {
const verifyEmailDialogControl = Dialog.useDialogControl()
const [verifyEmailState, setVerifyEmailState] = React.useState<
const [verifyEmailState, setVerifyEmailState] = useState<
{code: string} | undefined
>()
const value = React.useMemo(
const value = useMemo(
() => ({
verifyEmailDialogControl,
verifyEmailState,
src/components/interstitials/Trending.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback} from 'react'
import {ScrollView, View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
@@ -36,7 +36,7 @@ export function Inner() {
const {data: trending, error, isLoading} = useTrendingTopics()
const noTopics = !isLoading && !error && !trending?.topics?.length
const onConfirmHide = React.useCallback(() => {
const onConfirmHide = useCallback(() => {
ax.metric('trendingTopics:hide', {context: 'interstitial'})
setTrendingDisabled(true)
}, [ax, setTrendingDisabled])
src/components/moderation/Hider.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {createContext, useContext, useState} from 'react'
import {type ModerationUI} from '@atproto/api'
import {
@@ -21,10 +21,10 @@ type Context = {
}
}
const Context = React.createContext<Context>({} as Context)
const Context = createContext<Context>({} as Context)
Context.displayName = 'HiderContext'
export const useHider = () => React.useContext(Context)
export const useHider = () => useContext(Context)
export function Outer({
modui,
@@ -38,7 +38,7 @@ export function Outer({
}>) {
const control = useModerationDetailsDialogControl()
const blur = modui?.blurs[0]
const [isContentVisible, setIsContentVisible] = React.useState(
const [isContentVisible, setIsContentVisible] = useState(
isContentVisibleInitialState || !blur,
)
const info = useModerationCauseDescription(blur)
src/components/moderation/LabelsOnMeDialog.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import React, {useState} from 'react'
import {useCallback, useMemo, useState} from 'react'
import {View} from 'react-native'
import {type ComAtprotoLabelDefs, ToolsOzoneReportDefs} from '@atproto/api'
import {XRPCError} from '@atproto/xrpc'
@@ -47,12 +47,12 @@ export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
const {_} = useLingui()
const {currentAccount} = useSession()
const [appealingLabel, setAppealingLabel] = React.useState<
const [appealingLabel, setAppealingLabel] = useState<
ComAtprotoLabelDefs.Label | undefined
>(undefined)
const {labels} = props
const isAccount = props.type === 'account'
const containsSelfLabel = React.useMemo(
const containsSelfLabel = useMemo(
() => labels.some(l => l.src === currentAccount?.did),
[currentAccount?.did, labels],
)
@@ -224,7 +224,7 @@ function AppealForm({
const {_} = useLingui()
const {labeler, strings} = useLabelInfo(label)
const {gtMobile} = useBreakpoints()
const [details, setDetails] = React.useState('')
const [details, setDetails] = useState('')
const {subject} = useLabelSubject({label})
const isAccountReport = 'did' in subject
const agent = useAgent()
@@ -273,7 +273,7 @@ function AppealForm({
},
})
const onSubmit = React.useCallback(() => mutate(), [mutate])
const onSubmit = useCallback(() => mutate(), [mutate])
return (
<>
src/components/moderation/ReportDialog/index.tsx
+22 -14
View File
@@ -1,4 +1,11 @@
import React from 'react'
import {
useCallback,
useEffect,
useMemo,
useReducer,
useRef,
useState,
} from 'react'
import {Pressable, type ScrollView, View} from 'react-native'
import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -66,11 +73,11 @@ export function ReportDialog(
},
) {
const ax = useAnalytics()
const subject = React.useMemo(
const subject = useMemo(
() => (props.subject ? parseReportSubject(props.subject) : undefined),
[props.subject],
)
const onClose = React.useCallback(() => {
const onClose = useCallback(() => {
ax.metric('reportDialog:close', {})
}, [ax])
return (
@@ -108,7 +115,7 @@ function Inner(props: ReportDialogProps) {
const logger = ax.logger.useChild(ax.logger.Context.ReportDialog)
const t = useTheme()
const {_} = useLingui()
const ref = React.useRef<ScrollView>(null)
const ref = useRef<ScrollView>(null)
const {
data: allLabelers,
isLoading: isLabelerLoading,
@@ -118,14 +125,14 @@ function Inner(props: ReportDialogProps) {
const isLoading = useDelayedLoading(500, isLabelerLoading)
const copy = useCopyForSubject(props.subject)
const {categories, getCategory} = useReportOptions()
const [state, dispatch] = React.useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState)
/**
* Submission handling
*/
const {mutateAsync: submitReport} = useSubmitReportMutation()
const [isPending, setPending] = React.useState(false)
const [isSuccess, setSuccess] = React.useState(false)
const [isPending, setPending] = useState(false)
const [isSuccess, setSuccess] = useState(false)
// some reasons ONLY go to Bluesky
const isBskyOnlyReason = state?.selectedOption?.reason
@@ -139,7 +146,7 @@ function Inner(props: ReportDialogProps) {
/**
* Labelers that support this `subject` and its NSID collection
*/
const supportedLabelers = React.useMemo(() => {
const supportedLabelers = useMemo(() => {
if (!allLabelers) return []
return allLabelers
.filter(l => {
@@ -169,7 +176,8 @@ function Inner(props: ReportDialogProps) {
if (supportedReasonTypes === undefined) return true
return (
// supports new reason type
supportedReasonTypes.includes(state.selectedOption.reason) || // supports old reason type (backwards compat)
// supports old reason type (backwards compat)
supportedReasonTypes.includes(state.selectedOption.reason) ||
supportedReasonTypes.includes(
NEW_TO_OLD_REASONS_MAP[state.selectedOption.reason],
)
@@ -194,7 +202,7 @@ function Inner(props: ReportDialogProps) {
const isAlwaysBskyLabeler =
hasSingleSupportedLabeler && (isBskyOnlyReason || isBskyOnlySubject)
const onSubmit = React.useCallback(async () => {
const onSubmit = useCallback(async () => {
dispatch({type: 'clearError'})
logger.info('submitting')
@@ -587,7 +595,7 @@ function ActionOnce({
check: () => boolean
callback: () => void
}) {
React.useEffect(() => {
useEffect(() => {
if (check()) {
callback()
}
@@ -686,7 +694,7 @@ function CategoryCard({
const t = useTheme()
const {_} = useLingui()
const gutters = useGutters(['compact'])
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
onSelect?.(option)
}, [onSelect, option])
return (
@@ -731,7 +739,7 @@ function OptionCard({
const t = useTheme()
const {_} = useLingui()
const gutters = useGutters(['compact'])
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
onSelect?.(option)
}, [onSelect, option])
return (
@@ -793,7 +801,7 @@ function LabelerCard({
}) {
const t = useTheme()
const {_} = useLingui()
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
onSelect?.(labeler)
}, [onSelect, labeler])
const title = getLabelingServiceTitle({
src/components/moderation/ScreenHider.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useState} from 'react'
import {
type StyleProp,
TouchableWithoutFeedback,
@@ -39,7 +39,7 @@ export function ScreenHider({
}>) {
const t = useTheme()
const {_} = useLingui()
const [override, setOverride] = React.useState(false)
const [override, setOverride] = useState(false)
const navigation = useNavigation<NavigationProp>()
const {isMobile} = useWebMediaQueries()
const control = useModerationDetailsDialogControl()