put focusedChannelId in navigation provider, use that rather than pro…

…p drilling
tloncorp · Dec 5, 2024 · f95d1eb · f95d1eb
1 parent 4ed12c5
commit f95d1eb
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 77 deletions.
diff --git a/packages/app/features/top/ChatListScreen.tsx b/packages/app/features/top/ChatListScreen.tsx
@@ -15,6 +15,7 @@ import {
   GroupPreviewSheet,
   InviteUsersSheet,
   NavBarView,
+  NavigationProvider,
   RequestsProvider,
   ScreenHeader,
   View,
@@ -269,56 +270,57 @@ export function ChatListScreenView({
           setInviteSheetGroup(group);
         }}
       >
-        <View flex={1}>
-          <ScreenHeader
-            title={notReadyMessage ?? screenTitle}
-            rightControls={
-              <>
-                <ScreenHeader.IconButton
-                  type="Search"
-                  onPress={handleSearchInputToggled}
-                />
-                <ScreenHeader.IconButton
-                  type="Add"
-                  onPress={() => setAddGroupOpen(true)}
-                />
-              </>
-            }
-          />
-          {chats && chats.unpinned.length ? (
-            <ChatList
-              activeTab={activeTab}
-              setActiveTab={setActiveTab}
-              pinned={resolvedChats.pinned}
-              unpinned={resolvedChats.unpinned}
-              pending={resolvedChats.pending}
-              onPressItem={onPressChat}
-              onSectionChange={handleSectionChange}
-              showSearchInput={showSearchInput}
-              onSearchToggle={handleSearchInputToggled}
-              searchQuery={searchQuery}
-              onSearchQueryChange={setSearchQuery}
-              focusedChannelId={focusedChannelId}
+        <NavigationProvider focusedChannelId={focusedChannelId}>
+          <View flex={1}>
+            <ScreenHeader
+              title={notReadyMessage ?? screenTitle}
+              rightControls={
+                <>
+                  <ScreenHeader.IconButton
+                    type="Search"
+                    onPress={handleSearchInputToggled}
+                  />
+                  <ScreenHeader.IconButton
+                    type="Add"
+                    onPress={() => setAddGroupOpen(true)}
+                  />
+                </>
+              }
             />
-          ) : null}
-
-          <WelcomeSheet
-            open={splashVisible}
-            onOpenChange={handleWelcomeOpenChange}
-          />
-          <GroupPreviewSheet
-            open={!!selectedGroup}
-            onOpenChange={handleGroupPreviewSheetOpenChange}
-            group={selectedGroup ?? undefined}
-            onActionComplete={handleGroupAction}
-          />
-          <InviteUsersSheet
-            open={inviteSheetGroup !== null}
-            onOpenChange={handleInviteSheetOpenChange}
-            onInviteComplete={() => setInviteSheetGroup(null)}
-            group={inviteSheetGroup ?? undefined}
-          />
-        </View>
+            {chats && chats.unpinned.length ? (
+              <ChatList
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
+                pinned={resolvedChats.pinned}
+                unpinned={resolvedChats.unpinned}
+                pending={resolvedChats.pending}
+                onPressItem={onPressChat}
+                onSectionChange={handleSectionChange}
+                showSearchInput={showSearchInput}
+                onSearchToggle={handleSearchInputToggled}
+                searchQuery={searchQuery}
+                onSearchQueryChange={setSearchQuery}
+              />
+            ) : null}
+
+            <WelcomeSheet
+              open={splashVisible}
+              onOpenChange={handleWelcomeOpenChange}
+            />
+            <GroupPreviewSheet
+              open={!!selectedGroup}
+              onOpenChange={handleGroupPreviewSheetOpenChange}
+              group={selectedGroup ?? undefined}
+              onActionComplete={handleGroupAction}
+            />
+            <InviteUsersSheet
+              open={inviteSheetGroup !== null}
+              onOpenChange={handleInviteSheetOpenChange}
+              onInviteComplete={() => setInviteSheetGroup(null)}
+              group={inviteSheetGroup ?? undefined}
+            />
+          </View>
+        </NavigationProvider>
         <NavBarView
           navigateToContacts={() => {
             navigation.navigate('Contacts');

diff --git a/packages/app/features/top/GroupChannelsScreen.tsx b/packages/app/features/top/GroupChannelsScreen.tsx
@@ -10,6 +10,7 @@ import {
   ChatOptionsProvider,
   GroupChannelsScreenView,
   InviteUsersSheet,
+  NavigationProvider,
 } from '@tloncorp/ui';
 import { useCallback, useState } from 'react';
 
@@ -78,15 +79,16 @@ export function GroupChannelsScreenContent({
       }}
       {...useChatSettingsNavigation()}
     >
-      <GroupChannelsScreenView
-        onChannelPressed={handleChannelSelected}
-        onBackPressed={handleGoBackPressed}
-        onJoinChannel={handleJoinChannel}
-        group={group}
-        unjoinedChannels={unjoinedChannels}
-        enableCustomChannels={enableCustomChannels}
-        focusedChannelId={focusedChannelId}
-      />
+      <NavigationProvider focusedChannelId={focusedChannelId}>
+        <GroupChannelsScreenView
+          onChannelPressed={handleChannelSelected}
+          onBackPressed={handleGoBackPressed}
+          onJoinChannel={handleJoinChannel}
+          group={group}
+          unjoinedChannels={unjoinedChannels}
+          enableCustomChannels={enableCustomChannels}
+        />
+      </NavigationProvider>
       <InviteUsersSheet
         open={inviteSheetGroup !== null}
         onOpenChange={(open) => {

diff --git a/packages/ui/src/components/ChannelNavSection.tsx b/packages/ui/src/components/ChannelNavSection.tsx
@@ -9,13 +9,11 @@ export default function ChannelNavSection({
   channels,
   onSelect,
   onLongPress,
-  focusedChannelId,
 }: {
   section: db.GroupNavSection;
   channels: db.Channel[];
   onSelect: (channel: any) => void;
   onLongPress?: (channel: any) => void;
-  focusedChannelId?: string;
 }) {
   const sectionChannels = useMemo(
     () =>
@@ -53,7 +51,6 @@ export default function ChannelNavSection({
           useTypeIcon={true}
           onPress={onSelect}
           onLongPress={onLongPress}
-          isFocused={focusedChannelId === item.channelId}
         />
       ))}
     </YStack>

diff --git a/packages/ui/src/components/ChannelNavSections.tsx b/packages/ui/src/components/ChannelNavSections.tsx
@@ -12,15 +12,13 @@ export default function ChannelNavSections({
   sortBy,
   paddingBottom,
   onLongPress,
-  focusedChannelId,
 }: {
   group: db.Group;
   channels: db.Channel[];
   onSelect: (channel: any) => void;
   sortBy: 'recency' | 'arranged';
   paddingBottom?: number;
   onLongPress?: (channel: any) => void;
-  focusedChannelId?: string;
 }) {
   const unGroupedChannels = useMemo(
     () =>
@@ -63,7 +61,6 @@ export default function ChannelNavSections({
             onPress={onSelect}
             useTypeIcon={true}
             onLongPress={onLongPress}
-            isFocused={item.id === focusedChannelId}
           />
         ))}
       </YStack>
@@ -88,7 +85,6 @@ export default function ChannelNavSections({
             channels={sectionChannels}
             onSelect={onSelect}
             onLongPress={onLongPress}
-            focusedChannelId={focusedChannelId}
           />
         );
       })}
@@ -109,7 +105,6 @@ export default function ChannelNavSections({
               onPress={onSelect}
               onLongPress={onLongPress}
               useTypeIcon={true}
-              isFocused={item.id === focusedChannelId}
             />
           ))}
         </YStack>

diff --git a/packages/ui/src/components/ChatList.tsx b/packages/ui/src/components/ChatList.tsx
@@ -41,7 +41,6 @@ export const ChatList = React.memo(function ChatListComponent({
   searchQuery,
   onSearchQueryChange,
   onSearchToggle,
-  focusedChannelId,
 }: db.GroupedChats & {
   onPressItem?: (chat: db.Chat) => void;
   onSectionChange?: (title: string) => void;
@@ -51,7 +50,6 @@ export const ChatList = React.memo(function ChatListComponent({
   searchQuery: string;
   onSearchQueryChange: (query: string) => void;
   onSearchToggle: () => void;
-  focusedChannelId?: string;
 }) {
   const displayData = useFilteredChats({
     pinned,
@@ -102,7 +100,6 @@ export const ChatList = React.memo(function ChatListComponent({
             model={item}
             onPress={onPressItem}
             onLongPress={handleLongPress}
-            isFocused={item.id === focusedChannelId}
           />
         );
       } else {
@@ -111,12 +108,11 @@ export const ChatList = React.memo(function ChatListComponent({
             model={item}
             onPress={onPressItem}
             onLongPress={handleLongPress}
-            isFocused={item.id === focusedChannelId}
           />
         );
       }
     },
-    [onPressItem, handleLongPress, focusedChannelId]
+    [onPressItem, handleLongPress]
   );
 
   const handlePressTryAll = useCallback(() => {

diff --git a/packages/ui/src/components/GroupChannelsScreenView.tsx b/packages/ui/src/components/GroupChannelsScreenView.tsx
@@ -20,7 +20,6 @@ type GroupChannelsScreenViewProps = {
   onJoinChannel: (channel: db.Channel) => void;
   onBackPressed: () => void;
   enableCustomChannels?: boolean;
-  focusedChannelId?: string;
 };
 
 export function GroupChannelsScreenView({
@@ -30,7 +29,6 @@ export function GroupChannelsScreenView({
   onJoinChannel,
   onBackPressed,
   enableCustomChannels = false,
-  focusedChannelId,
 }: GroupChannelsScreenViewProps) {
   const [showCreateChannel, setShowCreateChannel] = useState(false);
   const sortBy = db.channelSortPreference.useValue();
@@ -108,7 +106,6 @@ export function GroupChannelsScreenView({
             onSelect={onChannelPressed}
             sortBy={sortBy || 'recency'}
             onLongPress={handleOpenChannelOptions}
-            focusedChannelId={focusedChannelId}
           />
 
           {unjoinedChannels.length > 0 && (

diff --git a/packages/ui/src/components/ListItem/ChannelListItem.tsx b/packages/ui/src/components/ListItem/ChannelListItem.tsx
@@ -3,6 +3,7 @@ import * as logic from '@tloncorp/shared/logic';
 import { useMemo } from 'react';
 import { View, isWeb } from 'tamagui';
 
+import { useNavigation } from '../../contexts';
 import * as utils from '../../utils';
 import { capitalize } from '../../utils';
 import { Badge } from '../Badge';
@@ -19,7 +20,6 @@ export function ChannelListItem({
   onLongPress,
   EndContent,
   dimmed,
-  isFocused,
   ...props
 }: {
   useTypeIcon?: boolean;
@@ -58,6 +58,8 @@ export function ChannelListItem({
     }
   }, [model, firstMemberId, memberCount]);
 
+  const isFocused = useNavigation().focusedChannelId === model.id;
+
   return (
     <View>
       <Pressable

diff --git a/packages/ui/src/contexts/navigation.tsx b/packages/ui/src/contexts/navigation.tsx
@@ -6,6 +6,7 @@ type State = {
   onPressGroupRef?: (group: db.Group) => void;
   onPressGoToDm?: (participants: string[]) => void;
   onGoToUserProfile?: (userId: string) => void;
+  focusedChannelId?: string;
 };
 
 type ContextValue = State;
@@ -41,16 +42,30 @@ export const NavigationProvider = ({
   onPressGroupRef,
   onPressGoToDm,
   onGoToUserProfile,
+  focusedChannelId,
 }: {
   children: React.ReactNode;
   onPressRef?: (channel: db.Channel, post: db.Post) => void;
   onPressGroupRef?: (group: db.Group) => void;
   onPressGoToDm?: (participants: string[]) => void;
   onGoToUserProfile?: (userId: string) => void;
+  focusedChannelId?: string;
 }) => {
   const value = useMemo(
-    () => ({ onPressRef, onPressGroupRef, onPressGoToDm, onGoToUserProfile }),
-    [onPressRef, onPressGroupRef, onPressGoToDm, onGoToUserProfile]
+    () => ({
+      onPressRef,
+      onPressGroupRef,
+      onPressGoToDm,
+      onGoToUserProfile,
+      focusedChannelId,
+    }),
+    [
+      onPressRef,
+      onPressGroupRef,
+      onPressGoToDm,
+      onGoToUserProfile,
+      focusedChannelId,
+    ]
   );
   return <Context.Provider value={value}>{children}</Context.Provider>;
 };