Merge branch 'main' into internationalization

src/App.native.tsx

@@ -22,6 +22,10 @@ import * as Toast from 'view/com/util/Toast'
 import {queryClient} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as InvitesStateProvider} from 'state/invites'
+import {Provider as PrefsStateProvider} from 'state/preferences'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -78,7 +82,15 @@ function App() {
 
   return (
     <ShellStateProvider>
-      <InnerApp />
+      <PrefsStateProvider>
+        <MutedThreadsProvider>
+          <InvitesStateProvider>
+            <ModalStateProvider>
+              <InnerApp />
+            </ModalStateProvider>
+          </InvitesStateProvider>
+        </MutedThreadsProvider>
+      </PrefsStateProvider>
     </ShellStateProvider>
   )
 }

src/App.web.tsx

@@ -20,6 +20,10 @@ import {i18n} from '@lingui/core'
 import {I18nProvider} from '@lingui/react'
 import {defaultLocale, dynamicActivate} from './locale/i18n'
 import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as InvitesStateProvider} from 'state/invites'
+import {Provider as PrefsStateProvider} from 'state/preferences'
 
 const InnerApp = observer(function AppImpl() {
   const colorMode = useColorMode()
@@ -74,7 +78,15 @@ function App() {
 
   return (
     <ShellStateProvider>
-      <InnerApp />
+      <PrefsStateProvider>
+        <MutedThreadsProvider>
+          <InvitesStateProvider>
+            <ModalStateProvider>
+              <InnerApp />
+            </ModalStateProvider>
+          </InvitesStateProvider>
+        </MutedThreadsProvider>
+      </PrefsStateProvider>
     </ShellStateProvider>
   )
 }

src/lib/hooks/useAccountSwitcher.ts

@@ -7,6 +7,7 @@ import {AccountData} from 'state/models/session'
 import {reset as resetNavigation} from '../../Navigation'
 import * as Toast from 'view/com/util/Toast'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
+import {useModalControls} from '#/state/modals'
 
 export function useAccountSwitcher(): [
   boolean,
@@ -16,6 +17,7 @@ export function useAccountSwitcher(): [
   const {track} = useAnalytics()
   const store = useStores()
   const setDrawerOpen = useSetDrawerOpen()
+  const {closeModal} = useModalControls()
   const [isSwitching, setIsSwitching] = useState(false)
   const navigation = useNavigation<NavigationProp>()
 
@@ -25,6 +27,7 @@ export function useAccountSwitcher(): [
       setIsSwitching(true)
       const success = await store.session.resumeSession(acct)
       setDrawerOpen(false)
+      closeModal()
       store.shell.closeAllActiveElements()
       if (success) {
         resetNavigation()
@@ -36,7 +39,7 @@ export function useAccountSwitcher(): [
         store.session.clear()
       }
     },
-    [track, setIsSwitching, navigation, store, setDrawerOpen],
+    [track, setIsSwitching, navigation, store, setDrawerOpen, closeModal],
   )
 
   return [isSwitching, setIsSwitching, onPressSwitchAccount]

src/lib/hooks/useOTAUpdate.ts

@@ -1,15 +1,15 @@
 import * as Updates from 'expo-updates'
 import {useCallback, useEffect} from 'react'
 import {AppState} from 'react-native'
-import {useStores} from 'state/index'
 import {logger} from '#/logger'
+import {useModalControls} from '#/state/modals'
 
 export function useOTAUpdate() {
-  const store = useStores()
+  const {openModal} = useModalControls()
 
   // HELPER FUNCTIONS
   const showUpdatePopup = useCallback(() => {
-    store.shell.openModal({
+    openModal({
       name: 'confirm',
       title: 'Update Available',
       message:
@@ -20,7 +20,7 @@ export function useOTAUpdate() {
         })
       },
     })
-  }, [store.shell])
+  }, [openModal])
   const checkForUpdate = useCallback(async () => {
     logger.debug('useOTAUpdate: Checking for update...')
     try {

src/lib/media/picker.web.tsx

@@ -4,6 +4,7 @@ import {CameraOpts, CropperOptions} from './types'
 import {RootStoreModel} from 'state/index'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 export {openPicker} from './picker.shared'
+import {unstable__openModal} from '#/state/modals'
 
 export async function openCamera(
   _store: RootStoreModel,
@@ -14,12 +15,12 @@ export async function openCamera(
 }
 
 export async function openCropper(
-  store: RootStoreModel,
+  _store: RootStoreModel,
   opts: CropperOptions,
 ): Promise<RNImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
-    store.shell.openModal({
+    unstable__openModal({
       name: 'crop-image',
       uri: opts.path,
       onSelect: (img?: RNImage) => {

src/state/invites.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['invites']
+type ApiContext = {
+  setInviteCopied: (code: string) => void
+}
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.invites,
+)
+const apiContext = React.createContext<ApiContext>({
+  setInviteCopied(_: string) {},
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(persisted.get('invites'))
+
+  const api = React.useMemo(
+    () => ({
+      setInviteCopied(code: string) {
+        setState(state => {
+          state = {
+            ...state,
+            copiedInvites: state.copiedInvites.includes(code)
+              ? state.copiedInvites
+              : state.copiedInvites.concat([code]),
+          }
+          persisted.write('invites', state)
+          return state
+        })
+      },
+    }),
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(persisted.get('invites'))
+    })
+  }, [setState])
+
+  return (
+    <stateContext.Provider value={state}>
+      <apiContext.Provider value={api}>{children}</apiContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useInvitesState() {
+  return React.useContext(stateContext)
+}
+
+export function useInvitesAPI() {
+  return React.useContext(apiContext)
+}