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

* 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

src/view/shell/Drawer.tsx

@@ -10,7 +10,6 @@ import {
   ViewStyle,
 } from 'react-native'
 import {useNavigation, StackActions} from '@react-navigation/native'
-import {observer} from 'mobx-react-lite'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -101,7 +100,7 @@ export function DrawerProfileCard({
   )
 }
 
-export const DrawerContent = observer(function DrawerContentImpl() {
+export function DrawerContent() {
   const theme = useTheme()
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -404,7 +403,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
       </SafeAreaView>
     </View>
   )
-})
+}
 
 interface MenuItemProps extends ComponentProps<typeof TouchableOpacity> {
   icon: JSX.Element
@@ -458,11 +457,7 @@ function MenuItem({
   )
 }
 
-const InviteCodes = observer(function InviteCodesImpl({
-  style,
-}: {
-  style?: StyleProp<ViewStyle>
-}) {
+function InviteCodes({style}: {style?: StyleProp<ViewStyle>}) {
   const {track} = useAnalytics()
   const setDrawerOpen = useSetDrawerOpen()
   const pal = usePalette('default')
@@ -502,7 +497,7 @@ const InviteCodes = observer(function InviteCodesImpl({
       </Text>
     </TouchableOpacity>
   )
-})
+}
 
 const styles = StyleSheet.create({
   view: {

src/view/shell/bottom-bar/BottomBar.tsx

@@ -4,7 +4,6 @@ import Animated from 'react-native-reanimated'
 import {StackActions} from '@react-navigation/native'
 import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {observer} from 'mobx-react-lite'
 import {Text} from 'view/com/util/text/Text'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {clamp} from 'lib/numbers'
@@ -34,9 +33,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
-export const BottomBar = observer(function BottomBarImpl({
-  navigation,
-}: BottomTabBarProps) {
+export function BottomBar({navigation}: BottomTabBarProps) {
   const {openModal} = useModalControls()
   const {currentAccount} = useSession()
   const pal = usePalette('default')
@@ -231,7 +228,7 @@ export const BottomBar = observer(function BottomBarImpl({
       />
     </Animated.View>
   )
-})
+}
 
 interface BtnProps
   extends Pick<

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {observer} from 'mobx-react-lite'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useNavigationState} from '@react-navigation/native'
 import Animated from 'react-native-reanimated'
@@ -24,7 +23,7 @@ import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {useSession} from '#/state/session'
 
-export const BottomBarWeb = observer(function BottomBarWebImpl() {
+export function BottomBarWeb() {
   const {currentAccount} = useSession()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
@@ -111,7 +110,7 @@ export const BottomBarWeb = observer(function BottomBarWebImpl() {
       </NavItem>
     </Animated.View>
   )
-})
+}
 
 const NavItem: React.FC<{
   children: (props: {isActive: boolean}) => React.ReactChild

src/view/shell/desktop/Feeds.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import {View, StyleSheet} from 'react-native'
 import {useNavigationState} from '@react-navigation/native'
-import {observer} from 'mobx-react-lite'
 import {usePalette} from 'lib/hooks/usePalette'
 import {TextLink} from 'view/com/util/Link'
 import {getCurrentRoute} from 'lib/routes/helpers'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
 
-export const DesktopFeeds = observer(function DesktopFeeds() {
+export function DesktopFeeds() {
   const pal = usePalette('default')
   const feeds = usePinnedFeedsInfos()
 
@@ -54,7 +53,7 @@ export const DesktopFeeds = observer(function DesktopFeeds() {
       </View>
     </View>
   )
-})
+}
 
 function FeedItem({
   title,

src/view/shell/desktop/LeftNav.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {observer} from 'mobx-react-lite'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {PressableWithHover} from 'view/com/util/PressableWithHover'
 import {
@@ -47,7 +46,7 @@ import {useComposerControls} from '#/state/shell/composer'
 import {useFetchHandle} from '#/state/queries/handle'
 import {emitSoftReset} from '#/state/events'
 
-const ProfileCard = observer(function ProfileCardImpl() {
+function ProfileCard() {
   const {currentAccount} = useSession()
   const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
   const {isDesktop} = useWebMediaQueries()
@@ -73,7 +72,7 @@ const ProfileCard = observer(function ProfileCardImpl() {
       />
     </View>
   )
-})
+}
 
 function BackBtn() {
   const {isTablet} = useWebMediaQueries()
@@ -117,13 +116,7 @@ interface NavItemProps {
   iconFilled: JSX.Element
   label: string
 }
-const NavItem = observer(function NavItemImpl({
-  count,
-  href,
-  icon,
-  iconFilled,
-  label,
-}: NavItemProps) {
+function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
   const pal = usePalette('default')
   const {currentAccount} = useSession()
   const {isDesktop, isTablet} = useWebMediaQueries()
@@ -192,7 +185,7 @@ const NavItem = observer(function NavItemImpl({
       )}
     </PressableWithHover>
   )
-})
+}
 
 function ComposeBtn() {
   const {currentAccount} = useSession()
@@ -264,7 +257,7 @@ function ComposeBtn() {
   )
 }
 
-export const DesktopLeftNav = observer(function DesktopLeftNav() {
+export function DesktopLeftNav() {
   const {currentAccount} = useSession()
   const pal = usePalette('default')
   const {isDesktop, isTablet} = useWebMediaQueries()
@@ -422,7 +415,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
       <ComposeBtn />
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   leftNav: {

src/view/shell/desktop/RightNav.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {observer} from 'mobx-react-lite'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -16,7 +15,7 @@ import {useModalControls} from '#/state/modals'
 import {useSession} from '#/state/session'
 import {useInviteCodesQuery} from '#/state/queries/invites'
 
-export const DesktopRightNav = observer(function DesktopRightNavImpl() {
+export function DesktopRightNav() {
   const pal = usePalette('default')
   const palError = usePalette('error')
   const {isSandbox, hasSession, currentAccount} = useSession()
@@ -80,9 +79,9 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
       <InviteCodes />
     </View>
   )
-})
+}
 
-const InviteCodes = observer(function InviteCodesImpl() {
+function InviteCodes() {
   const pal = usePalette('default')
   const {openModal} = useModalControls()
   const {data: invites} = useInviteCodesQuery()
@@ -118,7 +117,7 @@ const InviteCodes = observer(function InviteCodesImpl() {
       </Text>
     </TouchableOpacity>
   )
-})
+}
 
 const styles = StyleSheet.create({
   rightNav: {

src/view/shell/index.web.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect} from 'react'
-import {observer} from 'mobx-react-lite'
 import {View, StyleSheet, TouchableOpacity} from 'react-native'
 import {DesktopLeftNav} from './desktop/LeftNav'
 import {DesktopRightNav} from './desktop/RightNav'
@@ -76,7 +75,7 @@ function ShellInner() {
   )
 }
 
-export const Shell: React.FC = observer(function ShellImpl() {
+export const Shell: React.FC = function ShellImpl() {
   const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
   return (
     <View style={[s.hContentRegion, pageBg]}>
@@ -85,7 +84,7 @@ export const Shell: React.FC = observer(function ShellImpl() {
       </RoutesContainer>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   bgLight: {