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-typeszio/stable
parent
69209c988f
commit
8a93321fb1
|
@ -26,4 +26,7 @@ module.exports = {
|
|||
'*.html',
|
||||
'bskyweb',
|
||||
],
|
||||
settings: {
|
||||
componentWrapperFunctions: ['observer'],
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
)
|
||||
|
|
|
@ -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,
|
||||
)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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 = (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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}))
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -52,7 +52,7 @@ interface Author {
|
|||
moderation: ProfileModeration
|
||||
}
|
||||
|
||||
export const FeedItem = observer(function ({
|
||||
export const FeedItem = observer(function FeedItemImpl({
|
||||
item,
|
||||
}: {
|
||||
item: NotificationsFeedItemModel
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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'}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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(
|
||||
{
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>(
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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')
|
||||
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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]}>
|
||||
|
|
Loading…
Reference in New Issue