Shell behaviors update (react-query refactor) (#1915)

* Move tick-every-minute into a hook/context

* Move soft-reset event out of the shell model

* Update soft-reset listener on new search page

* Implement session-loaded and session-dropped events

* Update analytics and push-notifications to use new session system

src/view/com/feeds/FeedPage.tsx

@@ -14,7 +14,6 @@ import {ComposeIcon2} from 'lib/icons'
 import {colors, s} from 'lib/styles'
 import React from 'react'
 import {FlatList, View, useWindowDimensions} from 'react-native'
-import {useStores} from 'state/index'
 import {Feed} from '../posts/Feed'
 import {TextLink} from '../util/Link'
 import {FAB} from '../util/fab/FAB'
@@ -23,6 +22,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
+import {listenSoftReset, emitSoftReset} from '#/state/events'
 
 const POLL_FREQ = 30e3 // 30sec
 
@@ -41,7 +41,6 @@ export function FeedPage({
   renderEmptyState: () => JSX.Element
   renderEndOfFeed?: () => JSX.Element
 }) {
-  const store = useStores()
   const {isSandbox} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -73,12 +72,9 @@ export function FeedPage({
     if (!isPageFocused || !isScreenFocused) {
       return
     }
-    const softResetSub = store.onScreenSoftReset(onSoftReset)
     screen('Feed')
-    return () => {
-      softResetSub.remove()
-    }
-  }, [store, onSoftReset, screen, feed, isPageFocused, isScreenFocused])
+    return listenSoftReset(onSoftReset)
+  }, [onSoftReset, screen, isPageFocused, isScreenFocused])
 
   const onPressCompose = React.useCallback(() => {
     track('HomeScreen:PressCompose')
@@ -125,7 +121,7 @@ export function FeedPage({
                 )}
               </>
             }
-            onPress={() => store.emitScreenSoftReset()}
+            onPress={emitSoftReset}
           />
           <TextLink
             type="title-lg"
@@ -144,16 +140,7 @@ export function FeedPage({
       )
     }
     return <></>
-  }, [
-    isDesktop,
-    pal.view,
-    pal.text,
-    pal.textLight,
-    store,
-    hasNew,
-    _,
-    isSandbox,
-  ])
+  }, [isDesktop, pal.view, pal.text, pal.textLight, hasNew, _, isSandbox])
 
   return (
     <View testID={testID} style={s.h100pct}>

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -20,6 +20,7 @@ import {ImagesLightbox} from 'state/models/ui/shell'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 import {useSetDrawerOpen} from '#/state/shell'
+import {emitSoftReset} from '#/state/events'
 
 export const ProfileSubpageHeader = observer(function HeaderImpl({
   isLoading,
@@ -145,7 +146,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
               href={href}
               style={[pal.text, {fontWeight: 'bold'}]}
               text={title || ''}
-              onPress={() => store.emitScreenSoftReset()}
+              onPress={emitSoftReset}
               numberOfLines={4}
             />
           )}

src/view/com/util/TimeElapsed.tsx

@@ -1,24 +1,23 @@
 import React from 'react'
-import {observer} from 'mobx-react-lite'
 import {ago} from 'lib/strings/time'
-import {useStores} from 'state/index'
+import {useTickEveryMinute} from '#/state/shell'
 
 // FIXME(dan): Figure out why the false positives
 /* eslint-disable react/prop-types */
 
-export const TimeElapsed = observer(function TimeElapsed({
+export function TimeElapsed({
   timestamp,
   children,
 }: {
   timestamp: string
   children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element
 }) {
-  const stores = useStores()
+  const tick = useTickEveryMinute()
   const [timeElapsed, setTimeAgo] = React.useState(ago(timestamp))
 
   React.useEffect(() => {
     setTimeAgo(ago(timestamp))
-  }, [timestamp, setTimeAgo, stores.shell.tickEveryMinute])
+  }, [timestamp, setTimeAgo, tick])
 
   return children({timeElapsed})
-})
+}