Merge remote-tracking branch 'origin' into eric/app-904-extract-modal…

…-state-into-separate-statecontext * origin: Move invite-state to new persistence + context and replace the notifications with just showing uses in the modal (#1840) Move muted threads to new persistence + context (#1838) Move onboarding state to new persistence + reducer context (#1835) Move require alt-text to new persistence + context (#1839) Move reminders to new persisted state layer (#1834) Add persistent state provider (#1830)
bluesky-social · Nov 8, 2023 · 81232be · 81232be
2 parents 04fe8ca + e75b2d5
commit 81232be
Show file tree

Hide file tree

Showing 44 changed files with 1,012 additions and 699 deletions.
diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -10,6 +10,8 @@ import {QueryClientProvider} from '@tanstack/react-query'
 
 import 'view/icons'
 
+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {s} from 'lib/styles'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
@@ -21,10 +23,13 @@ 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'
 
 SplashScreen.preventAutoHideAsync()
 
-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -45,26 +50,46 @@ const App = observer(function AppImpl() {
   if (!rootStore) {
     return null
   }
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={colorMode}>
+        <RootSiblingParent>
+          <analytics.Provider>
+            <RootStoreProvider value={rootStore}>
+              <GestureHandlerRootView style={s.h100pct}>
+                <TestCtrls />
+                <Shell />
+              </GestureHandlerRootView>
+            </RootStoreProvider>
+          </analytics.Provider>
+        </RootSiblingParent>
+      </ThemeProvider>
+    </QueryClientProvider>
+  )
+})
+
+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
   return (
     <ShellStateProvider>
-      <ModalStateProvider>
-        <QueryClientProvider client={queryClient}>
-          <ThemeProvider theme={rootStore.shell.colorMode}>
-            <RootSiblingParent>
-              <analytics.Provider>
-                <RootStoreProvider value={rootStore}>
-                  <GestureHandlerRootView style={s.h100pct}>
-                    <TestCtrls />
-                    <Shell />
-                  </GestureHandlerRootView>
-                </RootStoreProvider>
-              </analytics.Provider>
-            </RootSiblingParent>
-          </ThemeProvider>
-        </QueryClientProvider>
-      </ModalStateProvider>
+      <MutedThreadsProvider>
+        <InvitesStateProvider>
+          <ModalStateProvider>
+            <InnerApp />
+          </ModalStateProvider>
+        </InvitesStateProvider>
+      </MutedThreadsProvider>
     </ShellStateProvider>
   )
-})
+}
 
 export default App
diff --git a/src/App.web.tsx b/src/App.web.tsx
@@ -8,6 +8,8 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 
 import 'view/icons'
 
+import {init as initPersistedState} from '#/state/persisted'
+import {useColorMode} from 'state/shell'
 import * as analytics from 'lib/analytics/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from 'view/shell/index'
@@ -16,8 +18,11 @@ import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
 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'
 
-const App = observer(function AppImpl() {
+const InnerApp = observer(function AppImpl() {
+  const colorMode = useColorMode()
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -35,26 +40,46 @@ const App = observer(function AppImpl() {
     return null
   }
 
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={colorMode}>
+        <RootSiblingParent>
+          <analytics.Provider>
+            <RootStoreProvider value={rootStore}>
+              <SafeAreaProvider>
+                <Shell />
+              </SafeAreaProvider>
+              <ToastContainer />
+            </RootStoreProvider>
+          </analytics.Provider>
+        </RootSiblingParent>
+      </ThemeProvider>
+    </QueryClientProvider>
+  )
+})
+
+function App() {
+  const [isReady, setReady] = useState(false)
+
+  React.useEffect(() => {
+    initPersistedState().then(() => setReady(true))
+  }, [])
+
+  if (!isReady) {
+    return null
+  }
+
   return (
     <ShellStateProvider>
-      <ModalStateProvider>
-        <QueryClientProvider client={queryClient}>
-          <ThemeProvider theme={rootStore.shell.colorMode}>
-            <RootSiblingParent>
-              <analytics.Provider>
-                <RootStoreProvider value={rootStore}>
-                  <SafeAreaProvider>
-                    <Shell />
-                  </SafeAreaProvider>
-                  <ToastContainer />
-                </RootStoreProvider>
-              </analytics.Provider>
-            </RootSiblingParent>
-          </ThemeProvider>
-        </QueryClientProvider>
-      </ModalStateProvider>
+      <MutedThreadsProvider>
+        <InvitesStateProvider>
+          <ModalStateProvider>
+            <InnerApp />
+          </ModalStateProvider>
+        </InvitesStateProvider>
+      </MutedThreadsProvider>
     </ShellStateProvider>
   )
-})
+}
 
 export default App
diff --git a/src/state/invites.tsx b/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)
+}
diff --git a/src/state/models/content/post-thread-item.ts b/src/state/models/content/post-thread-item.ts
@@ -63,10 +63,6 @@ export class PostThreadItemModel {
     return this.post.uri
   }
 
-  get isThreadMuted() {
-    return this.data.isThreadMuted
-  }
-
   get moderation(): PostModeration {
     return this.data.moderation
   }
@@ -129,10 +125,6 @@ export class PostThreadItemModel {
     this.data.toggleRepost()
   }
 
-  async toggleThreadMute() {
-    this.data.toggleThreadMute()
-  }
-
   async delete() {
     this.data.delete()
   }

diff --git a/src/state/models/content/post-thread.ts b/src/state/models/content/post-thread.ts
@@ -74,10 +74,6 @@ export class PostThreadModel {
     return this.resolvedUri
   }
 
-  get isThreadMuted() {
-    return this.rootStore.mutedThreads.uris.has(this.rootUri)
-  }
-
   get isCachedPostAReply() {
     if (AppBskyFeedPost.isRecord(this.thread?.post.record)) {
       return !!this.thread?.post.record.reply
@@ -140,14 +136,6 @@ export class PostThreadModel {
     this.refresh()
   }
 
-  async toggleThreadMute() {
-    if (this.isThreadMuted) {
-      this.rootStore.mutedThreads.uris.delete(this.rootUri)
-    } else {
-      this.rootStore.mutedThreads.uris.add(this.rootUri)
-    }
-  }
-
   // state transitions
   // =
 

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts