zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Remove deprecated models and mobx usage (react-query refactor) (#1934)

Browse source 
* Update login page to use service query

* Update modal to use session instead of store

* Move image sizes cache off store

* Update settings to no longer use store

* Update link-meta fetch to use agent instead of rootstore

* Remove deprecated resolveName()

* Delete deprecated link-metas cache

* Delete deprecated posts cache

* Delete all remaining mobx models, including the root store

* Strip out unused mobx observer wrappers
This commit is contained in:
Paul Frazee 2023-11-16 12:53:43 -08:00 • committed by GitHub
parent e637798e05
commit 54faa7e176
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
81 changed files with 1084 additions and 1941 deletions
Download patch file Download diff file Expand all files Collapse all files

213
src/view/screens/Home.tsx
View file

@ -1,6 +1,5 @@
import React from 'react'
import {useFocusEffect} from '@react-navigation/native'
import {observer} from 'mobx-react-lite'
import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@ -15,130 +14,126 @@ import {usePreferencesQuery} from '#/state/queries/preferences'
import {emitSoftReset} from '#/state/events'
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
export const HomeScreen = withAuthRequired(
observer(function HomeScreenImpl({}: Props) {
const setMinimalShellMode = useSetMinimalShellMode()
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
const pagerRef = React.useRef<PagerRef>(null)
const [selectedPage, setSelectedPage] = React.useState(0)
const [customFeeds, setCustomFeeds] = React.useState<FeedDescriptor[]>([])
const {data: preferences} = usePreferencesQuery()
export const HomeScreen = withAuthRequired(function HomeScreenImpl({}: Props) {
const setMinimalShellMode = useSetMinimalShellMode()
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
const pagerRef = React.useRef<PagerRef>(null)
const [selectedPage, setSelectedPage] = React.useState(0)
const [customFeeds, setCustomFeeds] = React.useState<FeedDescriptor[]>([])
const {data: preferences} = usePreferencesQuery()
React.useEffect(() => {
if (!preferences?.feeds?.pinned) return
React.useEffect(() => {
if (!preferences?.feeds?.pinned) return
const pinned = preferences.feeds.pinned
const pinned = preferences.feeds.pinned
const feeds: FeedDescriptor[] = []
const feeds: FeedDescriptor[] = []
for (const uri of pinned) {
if (uri.includes('app.bsky.feed.generator')) {
feeds.push(`feedgen|${uri}`)
} else if (uri.includes('app.bsky.graph.list')) {
feeds.push(`list|${uri}`)
}
for (const uri of pinned) {
if (uri.includes('app.bsky.feed.generator')) {
feeds.push(`feedgen|${uri}`)
} else if (uri.includes('app.bsky.graph.list')) {
feeds.push(`list|${uri}`)
}
}
setCustomFeeds(feeds)
setCustomFeeds(feeds)
pagerRef.current?.setPage(0)
}, [preferences?.feeds?.pinned, setCustomFeeds, pagerRef])
pagerRef.current?.setPage(0)
}, [preferences?.feeds?.pinned, setCustomFeeds, pagerRef])
const homeFeedParams = React.useMemo<FeedParams>(() => {
if (!preferences) return {}
const homeFeedParams = React.useMemo<FeedParams>(() => {
if (!preferences) return {}
return {
mergeFeedEnabled: Boolean(
preferences.feedViewPrefs.lab_mergeFeedEnabled,
),
mergeFeedSources: preferences.feeds.saved,
return {
mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled),
mergeFeedSources: preferences.feeds.saved,
}
}, [preferences])
useFocusEffect(
React.useCallback(() => {
setMinimalShellMode(false)
setDrawerSwipeDisabled(selectedPage > 0)
return () => {
setDrawerSwipeDisabled(false)
}
}, [preferences])
}, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]),
)
useFocusEffect(
React.useCallback(() => {
const onPageSelected = React.useCallback(
(index: number) => {
setMinimalShellMode(false)
setSelectedPage(index)
setDrawerSwipeDisabled(index > 0)
},
[setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode],
)
const onPressSelected = React.useCallback(() => {
emitSoftReset()
}, [])
const onPageScrollStateChanged = React.useCallback(
(state: 'idle' | 'dragging' | 'settling') => {
if (state === 'dragging') {
setMinimalShellMode(false)
setDrawerSwipeDisabled(selectedPage > 0)
return () => {
setDrawerSwipeDisabled(false)
}
}, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]),
)
}
},
[setMinimalShellMode],
)
const onPageSelected = React.useCallback(
(index: number) => {
setMinimalShellMode(false)
setSelectedPage(index)
setDrawerSwipeDisabled(index > 0)
},
[setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode],
)
const renderTabBar = React.useCallback(
(props: RenderTabBarFnProps) => {
return (
<FeedsTabBar
key="FEEDS_TAB_BAR"
selectedPage={props.selectedPage}
onSelect={props.onSelect}
testID="homeScreenFeedTabs"
onPressSelected={onPressSelected}
/>
)
},
[onPressSelected],
)
const onPressSelected = React.useCallback(() => {
emitSoftReset()
}, [])
const renderFollowingEmptyState = React.useCallback(() => {
return <FollowingEmptyState />
}, [])
const onPageScrollStateChanged = React.useCallback(
(state: 'idle' | 'dragging' | 'settling') => {
if (state === 'dragging') {
setMinimalShellMode(false)
}
},
[setMinimalShellMode],
)
const renderCustomFeedEmptyState = React.useCallback(() => {
return <CustomFeedEmptyState />
}, [])
const renderTabBar = React.useCallback(
(props: RenderTabBarFnProps) => {
return (
<Pager
ref={pagerRef}
testID="homeScreen"
onPageSelected={onPageSelected}
onPageScrollStateChanged={onPageScrollStateChanged}
renderTabBar={renderTabBar}
tabBarPosition="top">
<FeedPage
key="1"
testID="followingFeedPage"
isPageFocused={selectedPage === 0}
feed="home"
feedParams={homeFeedParams}
renderEmptyState={renderFollowingEmptyState}
renderEndOfFeed={FollowingEndOfFeed}
/>
{customFeeds.map((f, index) => {
return (
<FeedsTabBar
key="FEEDS_TAB_BAR"
selectedPage={props.selectedPage}
onSelect={props.onSelect}
testID="homeScreenFeedTabs"
onPressSelected={onPressSelected}
<FeedPage
key={f}
testID="customFeedPage"
isPageFocused={selectedPage === 1 + index}
feed={f}
renderEmptyState={renderCustomFeedEmptyState}
/>
)
},
[onPressSelected],
)
const renderFollowingEmptyState = React.useCallback(() => {
return <FollowingEmptyState />
}, [])
const renderCustomFeedEmptyState = React.useCallback(() => {
return <CustomFeedEmptyState />
}, [])
return (
<Pager
ref={pagerRef}
testID="homeScreen"
onPageSelected={onPageSelected}
onPageScrollStateChanged={onPageScrollStateChanged}
renderTabBar={renderTabBar}
tabBarPosition="top">
<FeedPage
key="1"
testID="followingFeedPage"
isPageFocused={selectedPage === 0}
feed="home"
feedParams={homeFeedParams}
renderEmptyState={renderFollowingEmptyState}
renderEndOfFeed={FollowingEndOfFeed}
/>
{customFeeds.map((f, index) => {
return (
<FeedPage
key={f}
testID="customFeedPage"
isPageFocused={selectedPage === 1 + index}
feed={f}
renderEmptyState={renderCustomFeedEmptyState}
/>
)
})}
</Pager>
)
}),
)
})}
</Pager>
)
})

7
src/view/screens/LanguageSettings.tsx
View file

@ -1,6 +1,5 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Text} from '../com/util/text/Text'
import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
@ -23,9 +22,7 @@ import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
_: Props,
) {
export function LanguageSettingsScreen(_: Props) {
const pal = usePalette('default')
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
@ -192,7 +189,7 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
</View>
</CenteredView>
)
})
}
const styles = StyleSheet.create({
container: {

5
src/view/screens/Log.tsx
View file

@ -1,7 +1,6 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ScrollView} from '../com/util/Views'
@ -15,7 +14,7 @@ import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import {useSetMinimalShellMode} from '#/state/shell'
export const LogScreen = observer(function Log({}: NativeStackScreenProps<
export function LogScreen({}: NativeStackScreenProps<
CommonNavigatorParams,
'Log'
>) {
@ -88,7 +87,7 @@ export const LogScreen = observer(function Log({}: NativeStackScreenProps<
</ScrollView>
</View>
)
})
}
const styles = StyleSheet.create({
entry: {

5
src/view/screens/Moderation.tsx
View file

@ -5,7 +5,6 @@ import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {observer} from 'mobx-react-lite'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {s} from 'lib/styles'
@ -21,7 +20,7 @@ import {useModalControls} from '#/state/modals'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
export const ModerationScreen = withAuthRequired(
observer(function Moderation({}: Props) {
function Moderation({}: Props) {
const pal = usePalette('default')
const setMinimalShellMode = useSetMinimalShellMode()
const {screen, track} = useAnalytics()
@ -111,7 +110,7 @@ export const ModerationScreen = withAuthRequired(
</Link>
</CenteredView>
)
}),
},
)
const styles = StyleSheet.create({

143
src/view/screens/PostThread.tsx
View file

@ -3,7 +3,6 @@ import {StyleSheet, View} from 'react-native'
import Animated from 'react-native-reanimated'
import {useFocusEffect} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
import {observer} from 'mobx-react-lite'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {makeRecordUri} from 'lib/strings/url-helpers'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@ -26,83 +25,83 @@ import {CenteredView} from '../com/util/Views'
import {useComposerControls} from '#/state/shell/composer'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
export const PostThreadScreen = withAuthRequired(
observer(function PostThreadScreenImpl({route}: Props) {
const queryClient = useQueryClient()
const {fabMinimalShellTransform} = useMinimalShellMode()
const setMinimalShellMode = useSetMinimalShellMode()
const {openComposer} = useComposerControls()
const safeAreaInsets = useSafeAreaInsets()
const {name, rkey} = route.params
const {isMobile} = useWebMediaQueries()
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
const {data: resolvedUri, error: uriError} = useResolveUriQuery(uri)
export const PostThreadScreen = withAuthRequired(function PostThreadScreenImpl({
route,
}: Props) {
const queryClient = useQueryClient()
const {fabMinimalShellTransform} = useMinimalShellMode()
const setMinimalShellMode = useSetMinimalShellMode()
const {openComposer} = useComposerControls()
const safeAreaInsets = useSafeAreaInsets()
const {name, rkey} = route.params
const {isMobile} = useWebMediaQueries()
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
const {data: resolvedUri, error: uriError} = useResolveUriQuery(uri)
useFocusEffect(
React.useCallback(() => {
setMinimalShellMode(false)
}, [setMinimalShellMode]),
useFocusEffect(
React.useCallback(() => {
setMinimalShellMode(false)
}, [setMinimalShellMode]),
)
const onPressReply = React.useCallback(() => {
if (!resolvedUri) {
return
}
const thread = queryClient.getQueryData<ThreadNode>(
POST_THREAD_RQKEY(resolvedUri.uri),
)
const onPressReply = React.useCallback(() => {
if (!resolvedUri) {
return
}
const thread = queryClient.getQueryData<ThreadNode>(
POST_THREAD_RQKEY(resolvedUri.uri),
)
if (thread?.type !== 'post') {
return
}
openComposer({
replyTo: {
uri: thread.post.uri,
cid: thread.post.cid,
text: thread.record.text,
author: {
handle: thread.post.author.handle,
displayName: thread.post.author.displayName,
avatar: thread.post.author.avatar,
},
if (thread?.type !== 'post') {
return
}
openComposer({
replyTo: {
uri: thread.post.uri,
cid: thread.post.cid,
text: thread.record.text,
author: {
handle: thread.post.author.handle,
displayName: thread.post.author.displayName,
avatar: thread.post.author.avatar,
},
onPost: () =>
queryClient.invalidateQueries({
queryKey: POST_THREAD_RQKEY(resolvedUri.uri || ''),
}),
})
}, [openComposer, queryClient, resolvedUri])
},
onPost: () =>
queryClient.invalidateQueries({
queryKey: POST_THREAD_RQKEY(resolvedUri.uri || ''),
}),
})
}, [openComposer, queryClient, resolvedUri])
return (
<View style={s.hContentRegion}>
{isMobile && <ViewHeader title="Post" />}
<View style={s.flex1}>
{uriError ? (
<CenteredView>
<ErrorMessage message={String(uriError)} />
</CenteredView>
) : (
<PostThreadComponent
uri={resolvedUri?.uri}
onPressReply={onPressReply}
/>
)}
</View>
{isMobile && (
<Animated.View
style={[
styles.prompt,
fabMinimalShellTransform,
{
bottom: clamp(safeAreaInsets.bottom, 15, 30),
},
]}>
<ComposePrompt onPressCompose={onPressReply} />
</Animated.View>
return (
<View style={s.hContentRegion}>
{isMobile && <ViewHeader title="Post" />}
<View style={s.flex1}>
{uriError ? (
<CenteredView>
<ErrorMessage message={String(uriError)} />
</CenteredView>
) : (
<PostThreadComponent
uri={resolvedUri?.uri}
onPressReply={onPressReply}
/>
)}
</View>
)
}),
)
{isMobile && (
<Animated.View
style={[
styles.prompt,
fabMinimalShellTransform,
{
bottom: clamp(safeAreaInsets.bottom, 15, 30),
},
]}>
<ComposePrompt onPressCompose={onPressReply} />
</Animated.View>
)}
</View>
)
})
const styles = StyleSheet.create({
prompt: {

7
src/view/screens/PreferencesHomeFeed.tsx
View file

@ -1,6 +1,5 @@
import React, {useState} from 'react'
import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Slider} from '@miblanchard/react-native-slider'
import {Text} from '../com/util/text/Text'
@ -72,9 +71,7 @@ type Props = NativeStackScreenProps<
CommonNavigatorParams,
'PreferencesHomeFeed'
>
export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
navigation,
}: Props) {
export function PreferencesHomeFeed({navigation}: Props) {
const pal = usePalette('default')
const {_} = useLingui()
const {isTabletOrDesktop} = useWebMediaQueries()
@ -308,7 +305,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
</View>
</CenteredView>
)
})
}
const styles = StyleSheet.create({
container: {

7
src/view/screens/PreferencesThreads.tsx
View file

@ -6,7 +6,6 @@ import {
TouchableOpacity,
View,
} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../com/util/text/Text'
import {s, colors} from 'lib/styles'
@ -25,9 +24,7 @@ import {
} from '#/state/queries/preferences'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
export const PreferencesThreads = observer(function PreferencesThreadsImpl({
navigation,
}: Props) {
export function PreferencesThreads({navigation}: Props) {
const pal = usePalette('default')
const {_} = useLingui()
const {isTabletOrDesktop} = useWebMediaQueries()
@ -162,7 +159,7 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({
</View>
</CenteredView>
)
})
}
const styles = StyleSheet.create({
container: {

11
src/view/screens/ProfileFeed.tsx
View file

@ -15,7 +15,6 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {CommonNavigatorParams} from 'lib/routes/types'
import {makeRecordUri} from 'lib/strings/url-helpers'
import {colors, s} from 'lib/styles'
import {observer} from 'mobx-react-lite'
import {FeedDescriptor} from '#/state/queries/post-feed'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
@ -71,7 +70,7 @@ interface SectionRef {
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeed'>
export const ProfileFeedScreen = withAuthRequired(
observer(function ProfileFeedScreenImpl(props: Props) {
function ProfileFeedScreenImpl(props: Props) {
const {rkey, name: handleOrDid} = props.route.params
const pal = usePalette('default')
@ -129,7 +128,7 @@ export const ProfileFeedScreen = withAuthRequired(
</View>
</CenteredView>
)
}),
},
)
function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) {
@ -154,7 +153,7 @@ function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) {
)
}
export const ProfileFeedScreenInner = function ProfileFeedScreenInnerImpl({
export function ProfileFeedScreenInner({
preferences,
feedInfo,
}: {
@ -485,7 +484,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
},
)
const AboutSection = observer(function AboutPageImpl({
function AboutSection({
feedOwnerDid,
feedRkey,
feedInfo,
@ -606,7 +605,7 @@ const AboutSection = observer(function AboutPageImpl({
</View>
</ScrollView>
)
})
}
const styles = StyleSheet.create({
btn: {

5
src/view/screens/SavedFeeds.tsx
View file

@ -14,7 +14,6 @@ import {track} from '#/lib/analytics/analytics'
import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette'
import {CommonNavigatorParams} from 'lib/routes/types'
import {observer} from 'mobx-react-lite'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from 'view/com/util/ViewHeader'
@ -146,7 +145,7 @@ export const SavedFeeds = withAuthRequired(function SavedFeedsImpl({}: Props) {
)
})
const ListItem = observer(function ListItemImpl({
function ListItem({
feedUri,
isPinned,
}: {
@ -269,7 +268,7 @@ const ListItem = observer(function ListItemImpl({
</TouchableOpacity>
</Pressable>
)
})
}
const styles = StyleSheet.create({
desktopContainer: {

1211
src/view/screens/Settings.tsx
View file

File diff suppressed because it is too large Load diff