Gekidou bugs fixes (#6473)

* Timezone search results not updating on term edit MM-45621

* Fix update theme MM-45604 / MM-45591

* Prevent channel items from stacking when collapse/expand category MM-45590

* Remove current channel from unread section MM-45589

* Latex code block style MM-45572

* Update Post input style when theme update

* Show tutorial only for the first item in the first section MM-45549

* Fix close user profile modal on iPad

* Move style out of component

Co-authored-by: Daniel Espino García <larkox@gmail.com>

app/components/markdown/markdown_latex_block/index.tsx

@@ -213,7 +213,7 @@ const LatexCodeBlock = ({content, theme}: Props) => {
                                     math={latexCode}
                                     renderError={onRenderErrorMessage}
                                     resizeMode={'cover'}
-                                    style={styles}
+                                    style={styles.mathStyle}
                                 />
                             </View>
                         ))}

app/components/post_draft/post_input/post_input.tsx

@@ -128,7 +128,7 @@ export default function PostInput({
     const maxHeight = isTablet ? 150 : 88;
     const pasteInputStyle = useMemo(() => {
         return {...style.input, maxHeight};
-    }, [maxHeight]);
+    }, [maxHeight, style.input]);
 
     const blur = () => {
         input.current?.blur();

app/context/theme/index.tsx

@@ -69,6 +69,10 @@ const ThemeProvider = ({currentTeamId, children, themes}: Props) => {
         updateThemeIfNeeded(theme);
     }, [theme]);
 
+    useEffect(() => {
+        setTheme(getTheme(currentTeamId, themes));
+    }, [currentTeamId, themes]);
+
     return (<Provider value={theme}>{children}</Provider>);
 };
 

app/screens/create_direct_message/user_list.tsx

@@ -142,6 +142,13 @@ export default function UserList({
         {paddingBottom: keyboardHeight},
     ], [style, keyboardHeight]);
 
+    const data = useMemo(() => {
+        if (term) {
+            return profiles;
+        }
+        return createProfilesSections(profiles);
+    }, [term, profiles]);
+
     const openUserProfile = useCallback(async (profile: UserProfile) => {
         const {user} = await storeProfile(serverUrl, profile);
         if (user) {
@@ -159,7 +166,7 @@ export default function UserList({
         }
     }, []);
 
-    const renderItem = useCallback(({item, index}: ListRenderItemInfo<UserProfile>) => {
+    const renderItem = useCallback(({item, index, section}: ListRenderItemInfo<UserProfile> & {section?: SectionListData<UserProfile>}) => {
         // The list will re-render when the selection changes because it's passed into the list as extraData
         const selected = Boolean(selectedIds[item.id]);
         const canAdd = Object.keys(selectedIds).length < General.MAX_USERS_IN_GM;
@@ -167,7 +174,7 @@ export default function UserList({
         return (
             <UserListRow
                 key={item.id}
-                highlight={index === 0}
+                highlight={section?.id === data?.[0].id && index === 0}
                 id={item.id}
                 isMyUser={currentUserId === item.id}
                 onPress={handleSelectProfile}
@@ -181,7 +188,7 @@ export default function UserList({
                 user={item}
             />
         );
-    }, [selectedIds, currentUserId, handleSelectProfile, teammateNameDisplay, tutorialWatched]);
+    }, [selectedIds, currentUserId, handleSelectProfile, teammateNameDisplay, tutorialWatched, data]);
 
     const renderLoading = useCallback(() => {
         if (!loading) {
@@ -219,11 +226,11 @@ export default function UserList({
         );
     }, [style]);
 
-    const renderFlatList = (data: UserProfile[]) => {
+    const renderFlatList = (items: UserProfile[]) => {
         return (
             <FlatList
                 contentContainerStyle={style.container}
-                data={data}
+                data={items}
                 extraData={selectedIds}
                 keyboardShouldPersistTaps='always'
                 {...keyboardDismissProp}
@@ -241,7 +248,7 @@ export default function UserList({
         );
     };
 
-    const renderSectionList = (data: Array<SectionListData<UserProfile>>) => {
+    const renderSectionList = (sections: Array<SectionListData<UserProfile>>) => {
         return (
             <SectionList
                 contentContainerStyle={style.container}
@@ -257,7 +264,7 @@ export default function UserList({
                 renderItem={renderItem}
                 renderSectionHeader={renderSectionHeader}
                 scrollEventThrottle={SCROLL_EVENT_THROTTLE}
-                sections={data}
+                sections={sections}
                 style={style.list}
                 stickySectionHeadersEnabled={false}
                 testID={`${testID}.section_list`}
@@ -266,13 +273,6 @@ export default function UserList({
         );
     };
 
-    const data = useMemo(() => {
-        if (term) {
-            return profiles;
-        }
-        return createProfilesSections(profiles);
-    }, [term, profiles]);
-
     if (term) {
         return renderFlatList(data as UserProfile[]);
     }

app/screens/home/channel_list/categories_list/categories/body/category_body.tsx

@@ -77,6 +77,10 @@ const CategoryBody = ({sortedChannels, unreadIds, unreadsOnTop, category, limit,
         };
     }, [height, unreadHeight]);
 
+    const listHeight = useMemo(() => ({
+        height: category.collapsed ? unreadHeight : height,
+    }), [category.collapsed, height, unreadHeight]);
+
     return (
         <Animated.View style={animatedStyle}>
             <FlatList
@@ -86,6 +90,7 @@ const CategoryBody = ({sortedChannels, unreadIds, unreadsOnTop, category, limit,
 
                 // @ts-expect-error strictMode not exposed on the types
                 strictMode={true}
+                style={listHeight}
             />
         </Animated.View>
     );

app/screens/home/channel_list/categories_list/categories/unreads/index.ts

@@ -9,7 +9,7 @@ import {combineLatestWith, map, switchMap} from 'rxjs/operators';
 import {Preferences} from '@constants';
 import {getPreferenceAsBool} from '@helpers/api/preference';
 import {filterAndSortMyChannels, makeChannelsMap} from '@helpers/database';
-import {getChannelById, observeChannelsByLastPostAt, observeCurrentChannel, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel';
+import {getChannelById, observeChannelsByLastPostAt, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel';
 import {queryPreferencesByCategoryAndName} from '@queries/servers/preference';
 import {observeLastUnreadChannelId} from '@queries/servers/system';
 import {observeUnreadsAndMentionsInTeam} from '@queries/servers/thread';
@@ -48,7 +48,6 @@ const enhanced = withObservables(['currentTeamId', 'isTablet', 'onlyUnreads'], (
         if (gU || onlyUnreads) {
             const lastUnread = isTablet ? observeLastUnreadChannelId(database).pipe(
                 switchMap(getC),
-                switchMap((ch) => (ch ? of$(ch) : observeCurrentChannel(database))),
             ) : of$(undefined);
             const myUnreadChannels = queryMyChannelUnreads(database, currentTeamId).observeWithColumns(['last_post_at']);
             const notifyProps = myUnreadChannels.pipe(switchMap((cs) => observeNotifyPropsByChannels(database, cs)));

app/screens/latex/index.tsx

@@ -30,6 +30,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         container: {
             minHeight: '100%',
         },
+        mathStyle: {
+            color: theme.centerChannelColor,
+        },
         scrollCode: {
             minHeight: '100%',
             flexDirection: 'column',
@@ -87,6 +90,7 @@ const Latex = ({content}: Props) => {
                                 onError={onErrorMessage}
                                 renderError={onRenderErrorMessage}
                                 resizeMode={'cover'}
+                                style={style.mathStyle}
                             />
                         </View>
                     ))}

app/screens/settings/display_timezone/display_timezone.tsx

@@ -56,7 +56,7 @@ const DisplayTimezone = ({currentUser, componentId}: DisplayTimezoneProps) => {
         const screen = Screens.SETTINGS_DISPLAY_TIMEZONE_SELECT;
         const title = intl.formatMessage({id: 'settings_display.timezone.select', defaultMessage: 'Select Timezone'});
         const passProps = {
-            selectedTimezone: timezone.manualTimezone,
+            selectedTimezone: userTimezone.manualTimezone || timezone.manualTimezone || timezone.automaticTimezone,
             onBack: updateManualTimezone,
         };
 

app/screens/settings/display_timezone_select/index.tsx

@@ -8,7 +8,6 @@ import {Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import {getAllSupportedTimezones} from '@actions/remote/user';
 import Search from '@components/search';
-import {List} from '@constants';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {popTopScreen} from '@screens/navigation';
@@ -20,6 +19,9 @@ import TimezoneRow from './timezone_row';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
+        flexGrow: {
+            flexGrow: 1,
+        },
         container: {
             flex: 1,
             backgroundColor: theme.centerChannelBg,
@@ -44,8 +46,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
 
 const EDGES: Edge[] = ['left', 'right'];
 const EMPTY_TIMEZONES: string[] = [];
-const ITEM_HEIGHT = 45;
-const VIEWABILITY_CONFIG = List.VISIBILITY_CONFIG_DEFAULTS;
+const ITEM_HEIGHT = 48;
 
 const keyExtractor = (item: string) => item;
 const getItemLayout = (_data: string[], index: number) => ({
@@ -75,7 +76,7 @@ const SelectTimezones = ({selectedTimezone, onBack}: SelectTimezonesProps) => {
     }), [theme.centerChannelColor]);
 
     const [timezones, setTimezones] = useState<string[]>(EMPTY_TIMEZONES);
-    const [initialScrollIndex, setInitialScrollIndex] = useState<number>(0);
+    const [initialScrollIndex, setInitialScrollIndex] = useState<number|undefined>();
     const [value, setValue] = useState('');
 
     const filteredTimezones = (timezonePrefix: string) => {
@@ -85,6 +86,15 @@ const SelectTimezones = ({selectedTimezone, onBack}: SelectTimezonesProps) => {
 
         const lowerCasePrefix = timezonePrefix.toLowerCase();
 
+        // if initial scroll index is set when the items change
+        // and the index is grater than the amount of items
+        // the list starts to render partial results until there is
+        // and interaction, so setting the index as undefined corrects
+        // the rendering
+        if (initialScrollIndex) {
+            setInitialScrollIndex(undefined);
+        }
+
         return timezones.filter((t) => (
             getTimezoneRegion(t).toLowerCase().indexOf(lowerCasePrefix) >= 0 ||
             t.toLowerCase().indexOf(lowerCasePrefix) >= 0
@@ -149,10 +159,9 @@ const SelectTimezones = ({selectedTimezone, onBack}: SelectTimezonesProps) => {
                 keyExtractor={keyExtractor}
                 keyboardDismissMode='on-drag'
                 keyboardShouldPersistTaps='always'
-                maxToRenderPerBatch={15}
                 removeClippedSubviews={true}
                 renderItem={renderItem}
-                viewabilityConfig={VIEWABILITY_CONFIG}
+                contentContainerStyle={styles.flexGrow}
             />
         </SafeAreaView>
     );

app/screens/settings/display_timezone_select/timezone_row.tsx

@@ -10,7 +10,7 @@ import SettingSeparator from '@screens/settings/settings_separator';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
-const ITEM_HEIGHT = 45;
+const ITEM_HEIGHT = 48;
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {

app/screens/user_profile/user_profile.tsx

@@ -22,6 +22,7 @@ import type UserModel from '@typings/database/models/servers/user';
 
 type Props = {
     channelId?: string;
+    closeButtonId: string;
     currentUserId: string;
     enablePostIconOverride: boolean;
     enablePostUsernameOverride: boolean;
@@ -45,7 +46,7 @@ const LABEL_HEIGHT = 58;
 const EXTRA_HEIGHT = 60;
 
 const UserProfile = ({
-    channelId, currentUserId, enablePostIconOverride, enablePostUsernameOverride,
+    channelId, closeButtonId, currentUserId, enablePostIconOverride, enablePostUsernameOverride,
     isChannelAdmin, isDirectMessage, isMilitaryTime, isSystemAdmin, isTeamAdmin,
     location, teamId, teammateDisplayName,
     user, userIconOverride, usernameOverride,
@@ -152,7 +153,7 @@ const UserProfile = ({
     return (
         <BottomSheet
             renderContent={renderContent}
-            closeButtonId='close-post-options'
+            closeButtonId={closeButtonId}
             componentId={Screens.USER_PROFILE}
             initialSnapIndex={0}
             snapPoints={snapPoints}