Give explicit names to MobX observer components (#1413)

* Consider observer(...) as components

* Add display names to MobX observers

* Temporarily suppress nested components

* Suppress new false positives for react/prop-types
zio/stable
dan 2023-09-08 01:36:08 +01:00 committed by GitHub
parent 69209c988f
commit 8a93321fb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
72 changed files with 2868 additions and 2836 deletions

View File

@ -26,4 +26,7 @@ module.exports = {
'*.html',
'bskyweb',
],
settings: {
componentWrapperFunctions: ['observer'],
},
}

View File

@ -19,7 +19,7 @@ import {handleLink} from './Navigation'
SplashScreen.preventAutoHideAsync()
const App = observer(() => {
const App = observer(function AppImpl() {
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
undefined,
)

View File

@ -10,7 +10,7 @@ import {ToastContainer} from './view/com/util/Toast.web'
import {ThemeProvider} from 'lib/ThemeContext'
import {observer} from 'mobx-react-lite'
const App = observer(() => {
const App = observer(function AppImpl() {
const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
undefined,
)

View File

@ -330,7 +330,7 @@ function NotificationsTabNavigator() {
)
}
const MyProfileTabNavigator = observer(() => {
const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() {
const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark)
const store = useStores()
return (
@ -360,7 +360,7 @@ const MyProfileTabNavigator = observer(() => {
* The FlatNavigator is used by Web to represent the routes
* in a single ("flat") stack.
*/
const FlatNavigator = observer(() => {
const FlatNavigator = observer(function FlatNavigatorImpl() {
const pal = usePalette('default')
const unreadCountLabel = useStores().me.notifications.unreadCountLabel
const title = (page: string) => bskyTitle(page, unreadCountLabel)

View File

@ -16,7 +16,7 @@ enum ScreenState {
S_CreateAccount,
}
export const LoggedOut = observer(() => {
export const LoggedOut = observer(function LoggedOutImpl() {
const pal = usePalette('default')
const store = useStores()
const {screen} = useAnalytics()

View File

@ -8,7 +8,7 @@ import {useStores} from 'state/index'
import {Welcome} from './onboarding/Welcome'
import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
export const Onboarding = observer(() => {
export const Onboarding = observer(function OnboardingImpl() {
const pal = usePalette('default')
const store = useStores()

View File

@ -20,8 +20,11 @@ import {Step1} from './Step1'
import {Step2} from './Step2'
import {Step3} from './Step3'
export const CreateAccount = observer(
({onPressBack}: {onPressBack: () => void}) => {
export const CreateAccount = observer(function CreateAccountImpl({
onPressBack,
}: {
onPressBack: () => void
}) {
const {track, screen} = useAnalytics()
const pal = usePalette('default')
const store = useStores()
@ -126,8 +129,7 @@ export const CreateAccount = observer(
</ScrollView>
</LoggedOutLayout>
)
},
)
})
const styles = StyleSheet.create({
stepContainer: {

View File

@ -20,7 +20,11 @@ import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
* @field Bluesky (default)
* @field Other (staging, local dev, your own PDS, etc.)
*/
export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
export const Step1 = observer(function Step1Impl({
model,
}: {
model: CreateAccountModel
}) {
const pal = usePalette('default')
const [isDefaultSelected, setIsDefaultSelected] = React.useState(true)

View File

@ -21,7 +21,11 @@ import {useStores} from 'state/index'
* @field Birth date
* @readonly Terms of service & privacy policy
*/
export const Step2 = observer(({model}: {model: CreateAccountModel}) => {
export const Step2 = observer(function Step2Impl({
model,
}: {
model: CreateAccountModel
}) {
const pal = usePalette('default')
const store = useStores()

View File

@ -13,7 +13,11 @@ import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
/** STEP 3: Your user handle
* @field User handle
*/
export const Step3 = observer(({model}: {model: CreateAccountModel}) => {
export const Step3 = observer(function Step3Impl({
model,
}: {
model: CreateAccountModel
}) {
const pal = usePalette('default')
return (
<View>

View File

@ -15,7 +15,9 @@ import {RECOMMENDED_FEEDS} from 'lib/constants'
type Props = {
next: () => void
}
export const RecommendedFeeds = observer(({next}: Props) => {
export const RecommendedFeeds = observer(function RecommendedFeedsImpl({
next,
}: Props) {
const pal = usePalette('default')
const {isTabletOrMobile} = useWebMediaQueries()

View File

@ -13,8 +13,13 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {makeRecordUri} from 'lib/strings/url-helpers'
import {sanitizeHandle} from 'lib/strings/handles'
export const RecommendedFeedsItem = observer(
({did, rkey}: {did: string; rkey: string}) => {
export const RecommendedFeedsItem = observer(function RecommendedFeedsItemImpl({
did,
rkey,
}: {
did: string
rkey: string
}) {
const {isMobile} = useWebMediaQueries()
const pal = usePalette('default')
const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
@ -138,5 +143,4 @@ export const RecommendedFeedsItem = observer(
</View>
</View>
)
},
)
})

View File

@ -14,7 +14,9 @@ type Props = {
skip: () => void
}
export const WelcomeDesktop = observer(({next}: Props) => {
export const WelcomeDesktop = observer(function WelcomeDesktopImpl({
next,
}: Props) {
const pal = usePalette('default')
const horizontal = useMediaQuery({minWidth: 1300})
const title = (

View File

@ -13,7 +13,10 @@ type Props = {
skip: () => void
}
export const WelcomeMobile = observer(({next, skip}: Props) => {
export const WelcomeMobile = observer(function WelcomeMobileImpl({
next,
skip,
}: Props) {
const pal = usePalette('default')
return (

View File

@ -17,7 +17,7 @@ import {STATUS_PAGE_URL} from 'lib/constants'
export const withAuthRequired = <P extends object>(
Component: React.ComponentType<P>,
): React.FC<P> =>
observer((props: P) => {
observer(function AuthRequired(props: P) {
const store = useStores()
if (store.session.isResumingSession) {
return <Loading />

View File

@ -16,7 +16,7 @@ interface Props {
gallery: GalleryModel
}
export const Gallery = observer(function ({gallery}: Props) {
export const Gallery = observer(function GalleryImpl({gallery}: Props) {
const store = useStores()
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()

View File

@ -8,14 +8,13 @@ import {Text} from 'view/com/util/text/Text'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {useGrapheme} from '../hooks/useGrapheme'
export const Autocomplete = observer(
({
export const Autocomplete = observer(function AutocompleteImpl({
view,
onSelect,
}: {
view: UserAutocompleteModel
onSelect: (item: string) => void
}) => {
}) {
const pal = usePalette('default')
const positionInterp = useAnimatedValue(0)
const {getGraphemeString} = useGrapheme()
@ -90,8 +89,7 @@ export const Autocomplete = observer(
) : null}
</Animated.View>
)
},
)
})
const styles = StyleSheet.create({
container: {

View File

@ -15,8 +15,7 @@ import {AtUri} from '@atproto/api'
import * as Toast from 'view/com/util/Toast'
import {sanitizeHandle} from 'lib/strings/handles'
export const CustomFeed = observer(
({
export const CustomFeed = observer(function CustomFeedImpl({
item,
style,
showSaveBtn = false,
@ -28,7 +27,7 @@ export const CustomFeed = observer(
showSaveBtn?: boolean
showDescription?: boolean
showLikes?: boolean
}) => {
}) {
const store = useStores()
const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>()
@ -127,8 +126,7 @@ export const CustomFeed = observer(
) : null}
</Pressable>
)
},
)
})
const styles = StyleSheet.create({
container: {

View File

@ -35,8 +35,7 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
const ERROR_ITEM = {_reactKey: '__error__'}
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
export const ListItems = observer(
({
export const ListItems = observer(function ListItemsImpl({
list,
style,
scrollElRef,
@ -62,7 +61,7 @@ export const ListItems = observer(
renderEmptyState?: () => JSX.Element
testID?: string
headerOffset?: number
}) => {
}) {
const pal = usePalette('default')
const store = useStores()
const {track} = useAnalytics()
@ -260,11 +259,9 @@ export const ListItems = observer(
)}
</View>
)
},
)
})
const ListHeader = observer(
({
const ListHeader = observer(function ListHeaderImpl({
list,
isOwner,
onToggleSubscribed,
@ -280,7 +277,7 @@ const ListHeader = observer(
onPressDeleteList: () => void
onPressShareList: () => void
onPressReportList: () => void
}) => {
}) {
const pal = usePalette('default')
const store = useStores()
const {isDesktop} = useWebMediaQueries()
@ -337,8 +334,7 @@ const ListHeader = observer(
</View>
<View
style={{flexDirection: 'row', paddingHorizontal: isDesktop ? 16 : 6}}>
<View
style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
<View style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
<Text type="md-medium" style={[pal.text]}>
Muted users
</Text>
@ -346,8 +342,7 @@ const ListHeader = observer(
</View>
</>
)
},
)
})
const styles = StyleSheet.create({
header: {

View File

@ -30,8 +30,7 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
const ERROR_ITEM = {_reactKey: '__error__'}
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
export const ListsList = observer(
({
export const ListsList = observer(function ListsListImpl({
listsList,
showAddBtns,
style,
@ -53,7 +52,7 @@ export const ListsList = observer(
renderEmptyState?: () => JSX.Element
testID?: string
headerOffset?: number
}) => {
}) {
const pal = usePalette('default')
const {track} = useAnalytics()
const [isRefreshing, setIsRefreshing] = React.useState(false)
@ -195,8 +194,7 @@ export const ListsList = observer(
)}
</View>
)
},
)
})
function CreateNewItem({onPress}: {onPress: () => void}) {
const pal = usePalette('default')

View File

@ -17,7 +17,8 @@ import * as Toast from '../util/Toast'
export const snapPoints = ['90%']
export const Component = observer(({}: {}) => {
export const Component = observer(
function ContentFilteringSettingsImpl({}: {}) {
const store = useStores()
const {isMobile} = useWebMediaQueries()
const pal = usePalette('default')
@ -35,7 +36,9 @@ export const Component = observer(({}: {}) => {
!store.preferences.adultContentEnabled,
)
} catch (e) {
Toast.show('There was an issue syncing your preferences with the server')
Toast.show(
'There was an issue syncing your preferences with the server',
)
store.log.error('Failed to update preferences with server', {e})
}
}, [store])
@ -115,17 +118,17 @@ export const Component = observer(({}: {}) => {
</View>
</View>
)
})
},
)
// TODO: Refactor this component to pass labels down to each tab
const ContentLabelPref = observer(
({
const ContentLabelPref = observer(function ContentLabelPrefImpl({
group,
disabled,
}: {
group: keyof typeof CONFIGURABLE_LABEL_GROUPS
disabled?: boolean
}) => {
}) {
const store = useStores()
const pal = usePalette('default')
@ -168,8 +171,7 @@ const ContentLabelPref = observer(
)}
</View>
)
},
)
})
interface SelectGroupProps {
current: LabelPreference

View File

@ -46,7 +46,10 @@ interface Props {
gallery: GalleryModel
}
export const Component = observer(function ({image, gallery}: Props) {
export const Component = observer(function EditImageImpl({
image,
gallery,
}: Props) {
const pal = usePalette('default')
const theme = useTheme()
const store = useStores()

View File

@ -79,8 +79,15 @@ export function Component({}: {}) {
)
}
const InviteCode = observer(
({testID, code, used}: {testID: string; code: string; used?: boolean}) => {
const InviteCode = observer(function InviteCodeImpl({
testID,
code,
used,
}: {
testID: string
code: string
used?: boolean
}) {
const pal = usePalette('default')
const store = useStores()
const {invitesAvailable} = store.me
@ -121,8 +128,7 @@ const InviteCode = observer(
)}
</TouchableOpacity>
)
},
)
})
const styles = StyleSheet.create({
container: {

View File

@ -24,8 +24,7 @@ import isEqual from 'lodash.isequal'
export const snapPoints = ['fullscreen']
export const Component = observer(
({
export const Component = observer(function ListAddRemoveUserImpl({
subject,
displayName,
onUpdate,
@ -33,14 +32,14 @@ export const Component = observer(
subject: string
displayName: string
onUpdate?: () => void
}) => {
}) {
const store = useStores()
const pal = usePalette('default')
const palPrimary = usePalette('primary')
const palInverted = usePalette('inverted')
const [originalSelections, setOriginalSelections] = React.useState<
string[]
>([])
const [originalSelections, setOriginalSelections] = React.useState<string[]>(
[],
)
const [selected, setSelected] = React.useState<string[]>([])
const [membershipsLoaded, setMembershipsLoaded] = React.useState(false)
@ -132,8 +131,7 @@ export const Component = observer(
{sanitizeDisplayName(list.name)}
</Text>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
{list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'}{' '}
by{' '}
{list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'} by{' '}
{list.creator.did === store.me.did
? 'you'
: sanitizeHandle(list.creator.handle, '@')}
@ -226,8 +224,7 @@ export const Component = observer(
</View>
</View>
)
},
)
})
const styles = StyleSheet.create({
container: {

View File

@ -14,7 +14,11 @@ import {s} from 'lib/styles'
export const snapPoints = [520, '100%']
export const Component = observer(({did}: {did: string}) => {
export const Component = observer(function ProfilePreviewImpl({
did,
}: {
did: string
}) {
const store = useStores()
const pal = usePalette('default')
const [model] = useState(new ProfileModel(store, {actor: did}))

View File

@ -5,8 +5,7 @@ import {observer} from 'mobx-react-lite'
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
import {useStores} from 'state/index'
export const LanguageToggle = observer(
({
export const LanguageToggle = observer(function LanguageToggleImpl({
code2,
name,
onPress,
@ -16,7 +15,7 @@ export const LanguageToggle = observer(
name: string
onPress: () => void
langType: 'contentLanguages' | 'postLanguages'
}) => {
}) {
const pal = usePalette('default')
const store = useStores()
@ -40,8 +39,7 @@ export const LanguageToggle = observer(
style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]}
/>
)
},
)
})
const styles = StyleSheet.create({
languageToggle: {

View File

@ -13,7 +13,7 @@ import {ToggleButton} from 'view/com/util/forms/ToggleButton'
export const snapPoints = ['100%']
export const Component = observer(() => {
export const Component = observer(function PostLanguagesSettingsImpl() {
const store = useStores()
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()

View File

@ -52,7 +52,7 @@ interface Author {
moderation: ProfileModeration
}
export const FeedItem = observer(function ({
export const FeedItem = observer(function FeedItemImpl({
item,
}: {
item: NotificationsFeedItemModel

View File

@ -18,7 +18,7 @@ import {s} from 'lib/styles'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {makeProfileLink} from 'lib/routes/links'
export const InvitedUsers = observer(() => {
export const InvitedUsers = observer(function InvitedUsersImpl() {
const store = useStores()
return (
<CenteredView>

View File

@ -9,23 +9,20 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
export const FeedsTabBar = observer(
(
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
) {
const {isMobile} = useWebMediaQueries()
if (isMobile) {
return <FeedsTabBarMobile {...props} />
} else {
return <FeedsTabBarDesktop {...props} />
}
},
)
})
const FeedsTabBarDesktop = observer(
(
const FeedsTabBarDesktop = observer(function FeedsTabBarDesktopImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
) {
const store = useStores()
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
@ -60,8 +57,7 @@ const FeedsTabBarDesktop = observer(
/>
</Animated.View>
)
},
)
})
const styles = StyleSheet.create({
tabBar: {

View File

@ -14,10 +14,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {s} from 'lib/styles'
import {HITSLOP_10} from 'lib/constants'
export const FeedsTabBar = observer(
(
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
) {
const store = useStores()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
@ -85,8 +84,7 @@ export const FeedsTabBar = observer(
/>
</Animated.View>
)
},
)
})
const styles = StyleSheet.create({
tabBar: {

View File

@ -8,7 +8,11 @@ import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
export const PostLikedBy = observer(function ({uri}: {uri: string}) {
export const PostLikedBy = observer(function PostLikedByImpl({
uri,
}: {
uri: string
}) {
const pal = usePalette('default')
const store = useStores()
const view = React.useMemo(() => new LikesModel(store, {uri}), [store, uri])
@ -64,6 +68,8 @@ export const PostLikedBy = observer(function ({uri}: {uri: string}) {
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{view.isLoading && <ActivityIndicator />}

View File

@ -8,7 +8,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
export const PostRepostedBy = observer(function PostRepostedBy({
export const PostRepostedBy = observer(function PostRepostedByImpl({
uri,
}: {
uri: string
@ -75,6 +75,8 @@ export const PostRepostedBy = observer(function PostRepostedBy({
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{view.isLoading && <ActivityIndicator />}

View File

@ -31,7 +31,7 @@ import {usePalette} from 'lib/hooks/usePalette'
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {makeProfileLink} from 'lib/routes/links'
export const Post = observer(function Post({
export const Post = observer(function PostImpl({
view,
showReplyLine,
hideError,
@ -88,8 +88,7 @@ export const Post = observer(function Post({
)
})
const PostLoaded = observer(
({
const PostLoaded = observer(function PostLoadedImpl({
item,
record,
setDeleted,
@ -101,7 +100,7 @@ const PostLoaded = observer(
setDeleted: (v: boolean) => void
showReplyLine?: boolean
style?: StyleProp<ViewStyle>
}) => {
}) {
const pal = usePalette('default')
const store = useStores()
@ -294,8 +293,7 @@ const PostLoaded = observer(
</View>
</Link>
)
},
)
})
const styles = StyleSheet.create({
outer: {

View File

@ -30,7 +30,7 @@ import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
import {makeProfileLink} from 'lib/routes/links'
import {isEmbedByEmbedder} from 'lib/embeds'
export const FeedItem = observer(function ({
export const FeedItem = observer(function FeedItemImpl({
item,
isThreadChild,
isThreadLastChild,

View File

@ -10,14 +10,13 @@ import {FeedItem} from './FeedItem'
import {usePalette} from 'lib/hooks/usePalette'
import {makeProfileLink} from 'lib/routes/links'
export const FeedSlice = observer(
({
export const FeedSlice = observer(function FeedSliceImpl({
slice,
ignoreFilterFor,
}: {
slice: PostsFeedSliceModel
ignoreFilterFor?: string
}) => {
}) {
if (slice.shouldFilter(ignoreFilterFor)) {
return null
}
@ -65,8 +64,7 @@ export const FeedSlice = observer(
))}
</>
)
},
)
})
function ViewFullThread({slice}: {slice: PostsFeedSliceModel}) {
const pal = usePalette('default')

View File

@ -6,8 +6,7 @@ import {useStores} from 'state/index'
import * as Toast from '../util/Toast'
import {FollowState} from 'state/models/cache/my-follows'
export const FollowButton = observer(
({
export const FollowButton = observer(function FollowButtonImpl({
unfollowedType = 'inverted',
followedType = 'default',
did,
@ -17,7 +16,7 @@ export const FollowButton = observer(
followedType?: ButtonType
did: string
onToggleFollow?: (v: boolean) => void
}) => {
}) {
const store = useStores()
const followState = store.me.follows.getFollowState(did)
@ -57,5 +56,4 @@ export const FollowButton = observer(
label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
/>
)
},
)
})

View File

@ -22,8 +22,7 @@ import {
getModerationCauseKey,
} from 'lib/moderation'
export const ProfileCard = observer(
({
export const ProfileCard = observer(function ProfileCardImpl({
testID,
profile,
noBg,
@ -36,17 +35,12 @@ export const ProfileCard = observer(
noBg?: boolean
noBorder?: boolean
followers?: AppBskyActorDefs.ProfileView[] | undefined
renderButton?: (
profile: AppBskyActorDefs.ProfileViewBasic,
) => React.ReactNode
}) => {
renderButton?: (profile: AppBskyActorDefs.ProfileViewBasic) => React.ReactNode
}) {
const store = useStores()
const pal = usePalette('default')
const moderation = moderateProfile(
profile,
store.preferences.moderationOpts,
)
const moderation = moderateProfile(profile, store.preferences.moderationOpts)
return (
<Link
@ -103,8 +97,7 @@ export const ProfileCard = observer(
<FollowersList followers={followers} />
</Link>
)
},
)
})
function ProfileCardPills({
followedBy,
@ -146,8 +139,11 @@ function ProfileCardPills({
)
}
const FollowersList = observer(
({followers}: {followers?: AppBskyActorDefs.ProfileView[] | undefined}) => {
const FollowersList = observer(function FollowersListImpl({
followers,
}: {
followers?: AppBskyActorDefs.ProfileView[] | undefined
}) {
const store = useStores()
const pal = usePalette('default')
if (!followers?.length) {
@ -180,11 +176,10 @@ const FollowersList = observer(
))}
</View>
)
},
)
})
export const ProfileCardWithFollowBtn = observer(
({
function ProfileCardWithFollowBtnImpl({
profile,
noBg,
noBorder,
@ -194,7 +189,7 @@ export const ProfileCardWithFollowBtn = observer(
noBg?: boolean
noBorder?: boolean
followers?: AppBskyActorDefs.ProfileView[] | undefined
}) => {
}) {
const store = useStores()
const isMe = store.me.did === profile.did

View File

@ -78,6 +78,8 @@ export const ProfileFollowers = observer(function ProfileFollowers({
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{view.isLoading && <ActivityIndicator />}

View File

@ -75,6 +75,8 @@ export const ProfileFollows = observer(function ProfileFollows({
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{view.isLoading && <ActivityIndicator />}

View File

@ -45,8 +45,11 @@ interface Props {
hideBackButton?: boolean
}
export const ProfileHeader = observer(
({view, onRefreshAll, hideBackButton = false}: Props) => {
export const ProfileHeader = observer(function ProfileHeaderImpl({
view,
onRefreshAll,
hideBackButton = false,
}: Props) {
const pal = usePalette('default')
// loading
@ -56,11 +59,7 @@ export const ProfileHeader = observer(
<View style={pal.view}>
<LoadingPlaceholder width="100%" height={120} />
<View
style={[
pal.view,
{borderColor: pal.colors.background},
styles.avi,
]}>
style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
<LoadingPlaceholder width={80} height={80} style={styles.br40} />
</View>
<View style={styles.content}>
@ -98,11 +97,13 @@ export const ProfileHeader = observer(
hideBackButton={hideBackButton}
/>
)
},
)
})
const ProfileHeaderLoaded = observer(
({view, onRefreshAll, hideBackButton = false}: Props) => {
const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
view,
onRefreshAll,
hideBackButton = false,
}: Props) {
const pal = usePalette('default')
const palInverted = usePalette('inverted')
const store = useStores()
@ -421,11 +422,7 @@ const ProfileHeaderLoaded = observer(
testID="profileHeaderDropdownBtn"
items={dropdownItems}>
<View style={[styles.btn, styles.secondaryBtn, pal.btn]}>
<FontAwesomeIcon
icon="ellipsis"
size={20}
style={[pal.text]}
/>
<FontAwesomeIcon icon="ellipsis" size={20} style={[pal.text]} />
</View>
</NativeDropdown>
) : undefined}
@ -533,11 +530,7 @@ const ProfileHeaderLoaded = observer(
accessibilityLabel={`View ${view.handle}'s avatar`}
accessibilityHint="">
<View
style={[
pal.view,
{borderColor: pal.colors.background},
styles.avi,
]}>
style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
<UserAvatar
size={80}
avatar={view.avatar}
@ -547,8 +540,7 @@ const ProfileHeaderLoaded = observer(
</TouchableWithoutFeedback>
</View>
)
},
)
})
const styles = StyleSheet.create({
banner: {

View File

@ -18,7 +18,11 @@ import {s} from 'lib/styles'
const SECTIONS = ['Posts', 'Users']
export const SearchResults = observer(({model}: {model: SearchUIModel}) => {
export const SearchResults = observer(function SearchResultsImpl({
model,
}: {
model: SearchUIModel
}) {
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
@ -56,7 +60,11 @@ export const SearchResults = observer(({model}: {model: SearchUIModel}) => {
)
})
const PostResults = observer(({model}: {model: SearchUIModel}) => {
const PostResults = observer(function PostResultsImpl({
model,
}: {
model: SearchUIModel
}) {
const pal = usePalette('default')
if (model.isPostsLoading) {
return (
@ -88,7 +96,11 @@ const PostResults = observer(({model}: {model: SearchUIModel}) => {
)
})
const Profiles = observer(({model}: {model: SearchUIModel}) => {
const Profiles = observer(function ProfilesImpl({
model,
}: {
model: SearchUIModel
}) {
const pal = usePalette('default')
if (model.isProfilesLoading) {
return (

View File

@ -38,6 +38,9 @@ interface ProfileView {
}
type Item = Heading | RefWrapper | SuggestWrapper | ProfileView
// FIXME(dan): Figure out why the false positives
/* eslint-disable react/prop-types */
export const Suggestions = observer(
forwardRef(function SuggestionsImpl(
{

View File

@ -25,7 +25,7 @@ interface PostMetaOpts {
timestamp: string
}
export const PostMeta = observer(function (opts: PostMetaOpts) {
export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
const pal = usePalette('default')
const displayName = opts.author.displayName || opts.author.handle
const handle = opts.author.handle

View File

@ -3,6 +3,9 @@ import {observer} from 'mobx-react-lite'
import {ago} from 'lib/strings/time'
import {useStores} from 'state/index'
// FIXME(dan): Figure out why the false positives
/* eslint-disable react/prop-types */
export const TimeElapsed = observer(function TimeElapsed({
timestamp,
children,

View File

@ -14,7 +14,7 @@ import {NavigationProp} from 'lib/routes/types'
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
export const ViewHeader = observer(function ({
export const ViewHeader = observer(function ViewHeaderImpl({
title,
canGoBack,
showBackButton = true,
@ -140,8 +140,7 @@ function DesktopWebHeader({
)
}
const Container = observer(
({
const Container = observer(function ContainerImpl({
children,
hideOnScroll,
showBorder,
@ -149,7 +148,7 @@ const Container = observer(
children: React.ReactNode
hideOnScroll: boolean
showBorder?: boolean
}) => {
}) {
const store = useStores()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
@ -202,8 +201,7 @@ const Container = observer(
{children}
</Animated.View>
)
},
)
})
const styles = StyleSheet.create({
header: {

View File

@ -14,7 +14,11 @@ export interface FABProps
icon: JSX.Element
}
export const FABInner = observer(({testID, icon, ...props}: FABProps) => {
export const FABInner = observer(function FABInnerImpl({
testID,
icon,
...props
}: FABProps) {
const {isTablet} = useWebMediaQueries()
const store = useStores()
const interp = useAnimatedValue(0)

View File

@ -9,8 +9,7 @@ import {usePalette} from 'lib/hooks/usePalette'
import {colors} from 'lib/styles'
import {HITSLOP_20} from 'lib/constants'
export const LoadLatestBtn = observer(
({
export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
onPress,
label,
showIndicator,
@ -19,7 +18,7 @@ export const LoadLatestBtn = observer(
label: string
showIndicator: boolean
minimalShellMode?: boolean // NOTE not used on mobile -prf
}) => {
}) {
const store = useStores()
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
@ -42,8 +41,7 @@ export const LoadLatestBtn = observer(
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
</TouchableOpacity>
)
},
)
})
const styles = StyleSheet.create({
loadLatest: {

View File

@ -6,14 +6,13 @@ import {ListCard} from 'view/com/lists/ListCard'
import {AppBskyGraphDefs} from '@atproto/api'
import {s} from 'lib/styles'
export const ListEmbed = observer(
({
export const ListEmbed = observer(function ListEmbedImpl({
item,
style,
}: {
item: AppBskyGraphDefs.ListView
style?: StyleProp<ViewStyle>
}) => {
}) {
const pal = usePalette('default')
return (
@ -21,8 +20,7 @@ export const ListEmbed = observer(
<ListCard list={item} style={[style, styles.card]} />
</View>
)
},
)
})
const styles = StyleSheet.create({
container: {

View File

@ -19,7 +19,7 @@ import {CenteredView} from 'view/com/util/Views'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
export const AppPasswords = withAuthRequired(
observer(({}: Props) => {
observer(function AppPasswordsImpl({}: Props) {
const pal = usePalette('default')
const store = useStores()
const {screen} = useAnalytics()

View File

@ -42,7 +42,7 @@ import {NavigationProp} from 'lib/routes/types'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
export const CustomFeedScreen = withAuthRequired(
observer((props: Props) => {
observer(function CustomFeedScreenImpl(props: Props) {
const pal = usePalette('default')
const store = useStores()
const navigation = useNavigation<NavigationProp>()
@ -119,7 +119,10 @@ export const CustomFeedScreen = withAuthRequired(
)
export const CustomFeedScreenInner = observer(
({route, feedOwnerDid}: Props & {feedOwnerDid: string}) => {
function CustomFeedScreenInnerImpl({
route,
feedOwnerDid,
}: Props & {feedOwnerDid: string}) {
const store = useStores()
const pal = usePalette('default')
const {isTabletOrDesktop} = useWebMediaQueries()

View File

@ -19,7 +19,7 @@ import debounce from 'lodash.debounce'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'DiscoverFeeds'>
export const DiscoverFeedsScreen = withAuthRequired(
observer(({}: Props) => {
observer(function DiscoverFeedsScreenImpl({}: Props) {
const store = useStores()
const pal = usePalette('default')
const feeds = React.useMemo(() => new FeedsDiscoveryModel(store), [store])

View File

@ -25,7 +25,7 @@ const MOBILE_HEADER_OFFSET = 40
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
export const FeedsScreen = withAuthRequired(
observer<Props>(({}: Props) => {
observer<Props>(function FeedsScreenImpl({}: Props) {
const pal = usePalette('default')
const store = useStores()
const {isMobile} = useWebMediaQueries()

View File

@ -28,7 +28,7 @@ const POLL_FREQ = 30e3 // 30sec
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
export const HomeScreen = withAuthRequired(
observer(({}: Props) => {
observer(function HomeScreenImpl({}: Props) {
const store = useStores()
const pagerRef = React.useRef<PagerRef>(null)
const [selectedPage, setSelectedPage] = React.useState(0)
@ -142,8 +142,7 @@ export const HomeScreen = withAuthRequired(
}),
)
const FeedPage = observer(
({
const FeedPage = observer(function FeedPageImpl({
testID,
isPageFocused,
feed,
@ -153,11 +152,10 @@ const FeedPage = observer(
feed: PostsFeedModel
isPageFocused: boolean
renderEmptyState?: () => JSX.Element
}) => {
}) {
const store = useStores()
const {isMobile} = useWebMediaQueries()
const [onMainScroll, isScrolledDown, resetMainScroll] =
useOnMainScroll(store)
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
const {screen, track} = useAnalytics()
const [headerOffset, setHeaderOffset] = React.useState(
isMobile ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP,
@ -233,15 +231,7 @@ const FeedPage = observer(
softResetSub.remove()
feedCleanup()
}
}, [
store,
doPoll,
onSoftReset,
screen,
feed,
isPageFocused,
isScreenFocused,
])
}, [store, doPoll, onSoftReset, screen, feed, isPageFocused, isScreenFocused])
const onPressCompose = React.useCallback(() => {
track('HomeScreen:PressCompose')
@ -289,5 +279,4 @@ const FeedPage = observer(
/>
</View>
)
},
)
})

View File

@ -27,7 +27,7 @@ type Props = NativeStackScreenProps<
'ModerationBlockedAccounts'
>
export const ModerationBlockedAccounts = withAuthRequired(
observer(({}: Props) => {
observer(function ModerationBlockedAccountsImpl({}: Props) {
const pal = usePalette('default')
const store = useStores()
const {isTabletOrDesktop} = useWebMediaQueries()
@ -116,6 +116,8 @@ export const ModerationBlockedAccounts = withAuthRequired(
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{blockedAccounts.isLoading && <ActivityIndicator />}

View File

@ -27,7 +27,7 @@ type Props = NativeStackScreenProps<
'ModerationMutedAccounts'
>
export const ModerationMutedAccounts = withAuthRequired(
observer(({}: Props) => {
observer(function ModerationMutedAccountsImpl({}: Props) {
const pal = usePalette('default')
const store = useStores()
const {isTabletOrDesktop} = useWebMediaQueries()
@ -112,6 +112,8 @@ export const ModerationMutedAccounts = withAuthRequired(
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}
// FIXME(dan)
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => (
<View style={styles.footer}>
{mutedAccounts.isLoading && <ActivityIndicator />}

View File

@ -24,7 +24,7 @@ type Props = NativeStackScreenProps<
'Notifications'
>
export const NotificationsScreen = withAuthRequired(
observer(({}: Props) => {
observer(function NotificationsScreenImpl({}: Props) {
const store = useStores()
const [onMainScroll, isScrolledDown, resetMainScroll] =
useOnMainScroll(store)

View File

@ -48,7 +48,9 @@ type Props = NativeStackScreenProps<
CommonNavigatorParams,
'PreferencesHomeFeed'
>
export const PreferencesHomeFeed = observer(({navigation}: Props) => {
export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
navigation,
}: Props) {
const pal = usePalette('default')
const store = useStores()
const {isTabletOrDesktop} = useWebMediaQueries()

View File

@ -32,7 +32,7 @@ import {combinedDisplayName} from 'lib/strings/display-names'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
export const ProfileScreen = withAuthRequired(
observer(({route}: Props) => {
observer(function ProfileScreenImpl({route}: Props) {
const store = useStores()
const {screen, track} = useAnalytics()
const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)

View File

@ -23,7 +23,7 @@ import {s} from 'lib/styles'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'>
export const ProfileListScreen = withAuthRequired(
observer(({route}: Props) => {
observer(function ProfileListScreenImpl({route}: Props) {
const store = useStores()
const navigation = useNavigation<NavigationProp>()
const {isTabletOrDesktop} = useWebMediaQueries()

View File

@ -35,7 +35,7 @@ import {Link, TextLink} from 'view/com/util/Link'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
export const SavedFeeds = withAuthRequired(
observer(({}: Props) => {
observer(function SavedFeedsImpl({}: Props) {
const pal = usePalette('default')
const store = useStores()
const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
@ -151,8 +151,13 @@ export const SavedFeeds = withAuthRequired(
}),
)
const ListItem = observer(
({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
const ListItem = observer(function ListItemImpl({
item,
drag,
}: {
item: CustomFeedModel
drag: () => void
}) {
const pal = usePalette('default')
const store = useStores()
const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
@ -192,9 +197,7 @@ const ListItem = observer(
style={[styles.itemContainer, pal.border]}>
{isPinned && isWeb ? (
<View style={styles.webArrowButtonsContainer}>
<TouchableOpacity
accessibilityRole="button"
onPress={onPressUp}>
<TouchableOpacity accessibilityRole="button" onPress={onPressUp}>
<FontAwesomeIcon
icon="arrow-up"
size={12}
@ -239,8 +242,7 @@ const ListItem = observer(
</ShadowDecorator>
</ScaleDecorator>
)
},
)
})
const styles = StyleSheet.create({
desktopContainer: {

View File

@ -18,7 +18,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
export const SearchScreen = withAuthRequired(
observer(({navigation, route}: Props) => {
observer(function SearchScreenImpl({navigation, route}: Props) {
const store = useStores()
const params = route.params || {}
const foafs = React.useMemo<FoafsModel>(

View File

@ -30,7 +30,7 @@ import {isAndroid, isIOS} from 'platform/detection'
type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
export const SearchScreen = withAuthRequired(
observer<Props>(({}: Props) => {
observer<Props>(function SearchScreenImpl({}: Props) {
const pal = usePalette('default')
const store = useStores()
const scrollViewRef = React.useRef<ScrollView>(null)

View File

@ -6,8 +6,7 @@ import {ComposerOpts} from 'state/models/ui/shell'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {usePalette} from 'lib/hooks/usePalette'
export const Composer = observer(
({
export const Composer = observer(function ComposerImpl({
active,
winHeight,
replyTo,
@ -23,7 +22,7 @@ export const Composer = observer(
onClose: () => void
quote?: ComposerOpts['quote']
mention?: ComposerOpts['mention']
}) => {
}) {
const pal = usePalette('default')
const initInterp = useAnimatedValue(0)
@ -71,8 +70,7 @@ export const Composer = observer(
/>
</Animated.View>
)
},
)
})
const styles = StyleSheet.create({
wrapper: {

View File

@ -8,8 +8,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
const BOTTOM_BAR_HEIGHT = 61
export const Composer = observer(
({
export const Composer = observer(function ComposerImpl({
active,
replyTo,
quote,
@ -24,7 +23,7 @@ export const Composer = observer(
onPost?: ComposerOpts['onPost']
onClose: () => void
mention?: ComposerOpts['mention']
}) => {
}) {
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
@ -54,8 +53,7 @@ export const Composer = observer(
</View>
</View>
)
},
)
})
const styles = StyleSheet.create({
mask: {

View File

@ -44,7 +44,7 @@ import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
import {isWeb} from 'platform/detection'
import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
export const DrawerContent = observer(() => {
export const DrawerContent = observer(function DrawerContentImpl() {
const theme = useTheme()
const pal = usePalette('default')
const store = useStores()
@ -400,7 +400,7 @@ function MenuItem({
)
}
const InviteCodes = observer(() => {
const InviteCodes = observer(function InviteCodesImpl() {
const {track} = useAnalytics()
const store = useStores()
const pal = usePalette('default')

View File

@ -32,7 +32,9 @@ import {UserAvatar} from 'view/com/util/UserAvatar'
type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
export const BottomBar = observer(function BottomBarImpl({
navigation,
}: BottomTabBarProps) {
const store = useStores()
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()

View File

@ -23,7 +23,7 @@ import {Link} from 'view/com/util/Link'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {makeProfileLink} from 'lib/routes/links'
export const BottomBarWeb = observer(() => {
export const BottomBarWeb = observer(function BottomBarWebImpl() {
const store = useStores()
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()

View File

@ -40,7 +40,7 @@ import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
import {router} from '../../../routes'
import {makeProfileLink} from 'lib/routes/links'
const ProfileCard = observer(() => {
const ProfileCard = observer(function ProfileCardImpl() {
const store = useStores()
const {isDesktop} = useWebMediaQueries()
const size = isDesktop ? 64 : 48
@ -103,8 +103,13 @@ interface NavItemProps {
iconFilled: JSX.Element
label: string
}
const NavItem = observer(
({count, href, icon, iconFilled, label}: NavItemProps) => {
const NavItem = observer(function NavItemImpl({
count,
href,
icon,
iconFilled,
label,
}: NavItemProps) {
const pal = usePalette('default')
const store = useStores()
const {isDesktop, isTablet} = useWebMediaQueries()
@ -173,8 +178,7 @@ const NavItem = observer(
)}
</PressableWithHover>
)
},
)
})
function ComposeBtn() {
const store = useStores()

View File

@ -13,7 +13,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {pluralize} from 'lib/strings/helpers'
import {formatCount} from 'view/com/util/numeric/format'
export const DesktopRightNav = observer(function DesktopRightNav() {
export const DesktopRightNav = observer(function DesktopRightNavImpl() {
const store = useStores()
const pal = usePalette('default')
const palError = usePalette('error')
@ -78,7 +78,7 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
)
})
const InviteCodes = observer(() => {
const InviteCodes = observer(function InviteCodesImpl() {
const store = useStores()
const pal = usePalette('default')

View File

@ -24,7 +24,7 @@ import {isStateAtTabRoot} from 'lib/routes/helpers'
import {SafeAreaProvider} from 'react-native-safe-area-context'
import {useOTAUpdate} from 'lib/hooks/useOTAUpdate'
const ShellInner = observer(() => {
const ShellInner = observer(function ShellInnerImpl() {
const store = useStores()
useOTAUpdate() // this hook polls for OTA updates every few seconds
const winDim = useWindowDimensions()
@ -81,7 +81,7 @@ const ShellInner = observer(() => {
)
})
export const Shell: React.FC = observer(() => {
export const Shell: React.FC = observer(function ShellImpl() {
const pal = usePalette('default')
const theme = useTheme()
return (

View File

@ -17,7 +17,7 @@ import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
const ShellInner = observer(() => {
const ShellInner = observer(function ShellInnerImpl() {
const store = useStores()
const {isDesktop, isMobile} = useWebMediaQueries()
const navigator = useNavigation<NavigationProp>()
@ -71,7 +71,7 @@ const ShellInner = observer(() => {
)
})
export const Shell: React.FC = observer(() => {
export const Shell: React.FC = observer(function ShellImpl() {
const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
return (
<View style={[s.hContentRegion, pageBg]}>