[lib] SyncCommunityStoreHandler

Summary: With the introduction of the farcasterBot, it's possible for a user to be added to a community and not have this community in their communityStore. in this scenario, the UpdateHandler should handle adding the community thread to the threadStore. the handler in this diff will check if any of the COMMUNITY_ROOT threads are missing in the communityStore. If there are missing communities, callFetchCommunityInfos is invoked

Test Plan: applied [this patch](https://gist.github.com/vdhanan/b1d65616283f69c801d4057bc4aceffd) and confirmed with logs that my handler was invoked. also confirmed that communityStore was immediately updated and thread avatars were immediately rendered

Reviewers: will, ashoat

Reviewed By: ashoat

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D13810

lib/components/sync-community-store-handler.react.js

@@ -0,0 +1,76 @@
+// @flow
+
+import * as React from 'react';
+
+import {
+  useFetchCommunityInfos,
+  fetchCommunityInfosActionTypes,
+} from '../actions/community-actions.js';
+import { isLoggedIn } from '../selectors/user-selectors.js';
+import { threadTypeIsCommunityRoot } from '../types/thread-types-enum.js';
+import { FetchTimeout } from '../utils/errors.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
+import { useSelector } from '../utils/redux-utils.js';
+
+function SyncCommunityStoreHandler(): React.Node {
+  const loggedIn = useSelector(isLoggedIn);
+  const threadInfos = useSelector(state => state.threadStore.threadInfos);
+  const communityInfos = useSelector(
+    state => state.communityStore.communityInfos,
+  );
+  const callFetchCommunityInfos = useFetchCommunityInfos();
+  const dispatchActionPromise = useDispatchActionPromise();
+
+  const requestedCommunityInfosRef = React.useRef(new Set<string>());
+
+  React.useEffect(() => {
+    if (!loggedIn) {
+      return;
+    }
+
+    const communityRootThreads = Object.values(threadInfos).filter(thread =>
+      threadTypeIsCommunityRoot(thread.type),
+    );
+
+    const missingCommunityInfos = communityRootThreads.filter(
+      thread =>
+        !(thread.id in communityInfos) &&
+        !requestedCommunityInfosRef.current.has(thread.id),
+    );
+
+    if (missingCommunityInfos.length === 0) {
+      return;
+    }
+
+    missingCommunityInfos.forEach(thread =>
+      requestedCommunityInfosRef.current.add(thread.id),
+    );
+
+    const fetchCommunityInfosPromise = (async () => {
+      try {
+        return await callFetchCommunityInfos();
+      } catch (e) {
+        if (e instanceof FetchTimeout) {
+          missingCommunityInfos.forEach(thread =>
+            requestedCommunityInfosRef.current.delete(thread.id),
+          );
+        }
+        throw e;
+      }
+    })();
+    void dispatchActionPromise(
+      fetchCommunityInfosActionTypes,
+      fetchCommunityInfosPromise,
+    );
+  }, [
+    callFetchCommunityInfos,
+    communityInfos,
+    dispatchActionPromise,
+    loggedIn,
+    threadInfos,
+  ]);
+
+  return null;
+}
+
+export default SyncCommunityStoreHandler;

native/root.react.js

@@ -34,6 +34,7 @@ import PlatformDetailsSynchronizer from 'lib/components/platform-details-synchro
 import PrekeysHandler from 'lib/components/prekeys-handler.react.js';
 import { QRAuthProvider } from 'lib/components/qr-auth-provider.react.js';
 import { StaffContextProvider } from 'lib/components/staff-provider.react.js';
+import SyncCommunityStoreHandler from 'lib/components/sync-community-store-handler.react.js';
 import { UserIdentityCacheProvider } from 'lib/components/user-identity-cache.react.js';
 import { DBOpsHandler } from 'lib/handlers/db-ops-handler.react.js';
 import { HoldersHandler } from 'lib/handlers/holders-handler.react.js';
@@ -390,6 +391,7 @@ function Root() {
                                                     <PrekeysHandler />
                                                     <ReportHandler />
                                                     <AutoJoinCommunityHandler />
+                                                    <SyncCommunityStoreHandler />
                                                     <InitialStateSharingHandler />
                                                   </PersistedStateGate>
                                                   {navigation}

web/app.react.js

@@ -24,6 +24,7 @@ import { NeynarClientProvider } from 'lib/components/neynar-client-provider.reac
 import PlatformDetailsSynchronizer from 'lib/components/platform-details-synchronizer.react.js';
 import { QRAuthProvider } from 'lib/components/qr-auth-provider.react.js';
 import { StaffContextProvider } from 'lib/components/staff-provider.react.js';
+import SyncCommunityStoreHandler from 'lib/components/sync-community-store-handler.react.js';
 import { DBOpsHandler } from 'lib/handlers/db-ops-handler.react.js';
 import { HoldersHandler } from 'lib/handlers/holders-handler.react.js';
 import { TunnelbrokerDeviceTokenHandler } from 'lib/handlers/tunnelbroker-device-token-handler.react.js';
@@ -258,6 +259,7 @@ class App extends React.PureComponent<Props> {
                   <TunnelbrokerDeviceTokenHandler />
                   <FarcasterDataHandler />
                   <AutoJoinCommunityHandler />
+                  <SyncCommunityStoreHandler />
                   <DMActivityHandler />
                   <HoldersHandler />
                   {content}