remove dir

scrollEventThrottle

app/components/navigation_header/header.tsx

@@ -47,19 +47,23 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
     container: {
         alignItems: 'center',
-        backgroundColor: theme.sidebarBg,
+        backgroundColor: 'red',
+
+        // backgroundColor: theme.sidebarBg,
         flexDirection: 'row',
         justifyContent: 'flex-start',
         paddingHorizontal: 16,
         zIndex: 10,
     },
     subtitleContainer: {
+        backgroundColor: 'purple',
         flexDirection: 'row',
         justifyContent: Platform.select({android: 'flex-start', ios: 'center'}),
         left: Platform.select({ios: undefined, default: 3}),
     },
     subtitle: {
         color: changeOpacity(theme.sidebarHeaderTextColor, 0.72),
+        backgroundColor: 'green',
         ...typography('Body', 75),
         lineHeight: 12,
         marginBottom: 8,
@@ -68,6 +72,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
     titleContainer: {
         alignItems: Platform.select({android: 'flex-start', ios: 'center'}),
+        backgroundColor: 'purple',
         justifyContent: 'center',
         flex: 3,
         height: '100%',
@@ -166,6 +171,7 @@ const Header = ({
     const containerStyle = useMemo(() => {
         return [styles.container, {height: defaultHeight + top, paddingTop: top}];
     }, [defaultHeight, theme]);
+    console.log('containerStyle', containerStyle);
 
     const additionalTitleStyle = useMemo(() => ({
         marginLeft: Platform.select({android: showBackButton && !leftComponent ? 20 : 0}),
@@ -194,7 +200,7 @@ const Header = ({
                 </TouchableWithFeedback>
             </Animated.View>
             }
-            <Animated.View style={[styles.titleContainer, additionalTitleStyle]}>
+            <Animated.View style={[additionalTitleStyle]}>
                 <TouchableWithFeedback
                     disabled={!onTitlePress}
                     onPress={onTitlePress}

app/components/navigation_header/index.tsx

@@ -32,7 +32,10 @@ type Props = SearchProps & {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
-        backgroundColor: theme.sidebarBg,
+
+        backgroundColor: 'brown',
+
+        // backgroundColor: theme.sidebarBg,
         position: 'absolute',
         width: '100%',
         zIndex: 10,
@@ -69,6 +72,7 @@ const NavigationHeader = ({
             maxHeight: largeHeight + insets.top + MAX_OVERSCROLL,
         };
     });
+    console.log('containerHeight.value', containerHeight.value);
 
     return (
         <>

app/components/navigation_header/large.tsx

@@ -20,6 +20,8 @@ type Props = {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
+
+        // backgroundColor: 'green',
         backgroundColor: theme.sidebarBg,
         paddingHorizontal: 20,
     },
@@ -53,6 +55,10 @@ const NavigationHeaderLargeTitle = ({
 
     const containerStyle = useMemo(() => {
         return [{height: largeHeight - defaultHeight}, styles.container];
+
+        // const height = largeHeight - defaultHeight;
+        //
+        // return [{height}, styles.container];
     }, [defaultHeight, largeHeight, theme]);
 
     return (

app/components/navigation_header/search.tsx

@@ -24,6 +24,8 @@ const INITIAL_TOP = -45;
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
+
+        // backgroundColor: 'purple',
         backgroundColor: theme.sidebarBg,
         height: HEADER_SEARCH_HEIGHT,
         justifyContent: 'center',

app/components/rounded_header_context/index.tsx

@@ -9,13 +9,15 @@ import {makeStyleSheetFromTheme} from '@utils/theme';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
-        backgroundColor: theme.sidebarBg,
+
+        // backgroundColor: 'blue',
         height: 40,
         width: '100%',
         position: 'absolute',
     },
     content: {
-        backgroundColor: theme.centerChannelBg,
+
+        // backgroundColor: 'blue',
         borderTopLeftRadius: 12,
         borderTopRightRadius: 12,
         flex: 1,

app/database/operator/server_data_operator/transformers/team.ts

@@ -123,7 +123,7 @@ export const transformTeamSearchHistoryRecord = ({action, database, value}: Tran
 
     const fieldsMapper = (teamSearchHistory: TeamSearchHistoryModel) => {
         teamSearchHistory._raw.id = isCreateAction ? (teamSearchHistory.id) : record.id;
-        teamSearchHistory.createdAt = raw.created_at;
+        teamSearchHistory.createdAt = Date.now();
         teamSearchHistory.displayTerm = raw.display_term;
         teamSearchHistory.term = raw.term;
         teamSearchHistory.teamId = raw.team_id;

app/hooks/header.ts

@@ -34,6 +34,26 @@ export const useDefaultHeaderHeight = () => {
 export const useLargeHeaderHeight = () => {
     const defaultHeight = useDefaultHeaderHeight();
     return defaultHeight + ViewConstants.LARGE_HEADER_TITLE + ViewConstants.HEADER_WITH_SUBTITLE;
+
+    // const defaultHeight + ViewConstants.LARGE_HEADER_TITLE + ViewConstants.HEADER_WITH_SUBTITLE;
+
+    // const defaultHeight = useDefaultHeaderHeight();
+
+    // let defaultHeight = useDefaultHeaderHeight();
+    // if (showTitle) {
+    //     defaultHeight += ViewConstants.LARGE_HEADER_TITLE;
+    // }
+    //
+    // if (hasSubTitle) {
+    //     defaultHeight += ViewConstants.HEADER_WITH_SUBTITLE;
+    // }
+    // if (hasSearch) {
+    //     defaultHeight += ViewConstants.HEADER_SEARCH_HEIGHT;
+    // }
+
+    // return defaultHeight;
+
+    // return defaultHeight + ViewConstants.LARGE_HEADER_TITLE + ViewConstants.HEADER_WITH_SUBTITLE;
 };
 
 export const useHeaderHeight = () => {
@@ -47,7 +67,11 @@ export const useHeaderHeight = () => {
     }, [defaultHeight, largeHeight]);
 };
 
-export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset: number) => void) => {
+export const useCollapsibleHeader = <T>(
+    isLargeTitle: boolean,
+    onSnap?:
+    (offset: number) => void,
+) => {
     const insets = useSafeAreaInsets();
     const animatedRef = useAnimatedRef<Animated.ScrollView>();
     const {largeHeight, defaultHeight} = useHeaderHeight();
@@ -60,8 +84,16 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
         const value = -(scrollValue?.value || 0);
         const header = (isLargeTitle ? largeHeight : defaultHeight);
         const height = header + value + insets.top;
+
+        // console.log('-- height', height);
+        // console.log('-- header', header);
         if (height > header + (insets.top * 2)) {
             return Math.min(height, largeHeight + insets.top + MAX_OVERSCROLL);
+
+            // const returnMin = Math.min(height, largeHeight + MAX_OVERSCROLL);
+            // const returnMin = Math.min(height, largeHeight + insets.top + MAX_OVERSCROLL);
+            // console.log('-- XXX returnMin', returnMin);
+            // return returnMin;
         }
         return Math.max(height, minHeight);
     });
@@ -122,6 +154,7 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
     const hideHeader = useCallback(() => {
         const offset = largeHeight - defaultHeight;
         if (animatedRef?.current && Math.abs((scrollValue?.value || 0)) <= insets.top) {
+            console.log('\n\nIN HIDE HEADER\n\n');
             autoScroll.value = true;
             if ('scrollTo' in animatedRef.current) {
                 animatedRef.current.scrollTo({y: offset, animated: true});
@@ -136,9 +169,17 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
         }
     }, [largeHeight, defaultHeight]);
 
+    // const scrollPaddingTop = (isLargeTitle ? largeHeight : defaultHeight) + insets.top;
+
+    // console.log('<><> scrollPaddingTop', scrollPaddingTop);
+    // console.log('<><> scrollValue', scrollValue);
+    // console.log('<><> headerHeight', headerHeight);
+
     return {
         defaultHeight,
         largeHeight,
+
+        // scrollPaddingTop,
         scrollPaddingTop: (isLargeTitle ? largeHeight : defaultHeight) + insets.top,
         scrollRef: animatedRef as unknown as React.RefObject<T>,
         scrollValue,

app/screens/home/index.tsx

@@ -20,10 +20,9 @@ import Account from './account';
 import ChannelList from './channel_list';
 import RecentMentions from './recent_mentions';
 import SavedMessages from './saved_messages';
+import Search from './search';
 import TabBar from './tab_bar';
 
-// import Search from './search';
-
 import type {LaunchProps} from '@typings/launch';
 
 if (Platform.OS === 'ios') {
@@ -102,6 +101,8 @@ export default function HomeScreen(props: HomeProps) {
                 dark: false,
                 colors: {
                     primary: theme.centerChannelColor,
+
+                    // background: 'yellow',
                     background: 'transparent',
                     card: theme.centerChannelBg,
                     text: theme.centerChannelColor,
@@ -125,11 +126,11 @@ export default function HomeScreen(props: HomeProps) {
                 >
                     {() => <ChannelList {...props}/>}
                 </Tab.Screen>
-                {/* <Tab.Screen
+                <Tab.Screen
                     name={Screens.SEARCH}
                     component={Search}
                     options={{unmountOnBlur: false, lazy: true, tabBarTestID: 'tab_bar.search.tab'}}
-                /> */}
+                />
                 <Tab.Screen
                     name={Screens.MENTIONS}
                     component={RecentMentions}

app/screens/home/search/initial/modifiers/index.tsx

@@ -116,7 +116,7 @@ const Modifiers = ({searchValue, setSearchValue, setTeamId, teamId}: Props) => {
         <>
             <View style={styles.titleContainer}>
                 <FormattedText
-                    style={styles.title}
+                    style={[styles.title, {backgroundColor: 'cyan'}]}
                     id={'screen.search.modifier.header'}
                     defaultMessage='Search options'
                 />

app/screens/home/search/results/results.tsx

@@ -251,7 +251,7 @@ const SearchResults = ({
             indicatorStyle='black'
             refreshing={false}
             renderItem={renderItem}
-            contentContainerStyle={paddingTop}
+            contentContainerStyle={[paddingTop, {backgroundColor: 'cyan'}]}
             nestedScrollEnabled={true}
             removeClippedSubviews={true}
             style={containerStyle}

app/screens/home/search/search.tsx

@@ -68,7 +68,6 @@ const SearchScreen = ({teamId}: Props) => {
     const isFocused = useIsFocused();
     const intl = useIntl();
     const theme = useTheme();
-
     const stateIndex = nav.getState().index;
     const serverUrl = useServerUrl();
     const searchTerm = (nav.getState().routes[stateIndex].params as any)?.searchTerm;
@@ -87,8 +86,7 @@ const SearchScreen = ({teamId}: Props) => {
     const [fileInfos, setFileInfos] = useState<FileInfo[]>(emptyFileResults);
     const [fileChannelIds, setFileChannelIds] = useState<string[]>([]);
 
-    const onSnap = (offset: number) => {
-        scrollRef.current?.scrollToOffset({offset, animated: true});
+        // hideHeader();
     };
 
     const {scrollPaddingTop, scrollRef, scrollValue, onScroll, headerHeight, hideHeader} = useCollapsibleHeader<FlatList>(true, onSnap);
@@ -138,6 +136,7 @@ const SearchScreen = ({teamId}: Props) => {
     }, [handleSearch, handleTextChange, searchTeamId]);
 
     const handleFilterChange = useCallback(async (filterValue: FileFilter) => {
+        console.log('--- handleFilterChange --- ');
         setLoading(true);
         setFilter(filterValue);
         const searchParams = getSearchParams(lastSearchedValue, filterValue);
@@ -247,12 +246,41 @@ const SearchScreen = ({teamId}: Props) => {
         />
     ), [cursorPosition, handleTextChange, searchValue]);
 
-    return (
-        <FreezeScreen freeze={!isFocused}>
+        // console.log('showResults', showResults);
+        // console.log('loading', loading);
+
+        // if (showResults && !loading) {
+        if (lastSearchedValue && !loading) {
+            return (
+                <Header
+                    onTabSelect={setSelectedTab}
+                    onFilterChanged={handleFilterChange}
+                    numberMessages={postIds.length}
+                    selectedTab={selectedTab}
+                    numberFiles={fileInfos.length}
+                    selectedFilter={filter}
+                />
+            );
+        }
+
+        // }
+    }, [loading, lastSearchedValue, selectedTab]);
+
+    const renderNavigationHeader = useMemo(() => {
+        console.log('--- RERENDER renderNavigationHeader ---');
+        const title = showResults ? undefined : intl.formatMessage({id: 'screen.search.title', defaultMessage: 'Search'});
+
+        console.log('\n');
+
+        // console.log('<><>title', title);
+        // console.log('<><>scrollValue', scrollValue);
+        // console.log('<><>searchValue', searchValue);
+        // console.log('<><>onSubmit', onSubmit);
+        return (
             <NavigationHeader
                 isLargeTitle={true}
                 showBackButton={false}
-                title={intl.formatMessage({id: 'screen.search.title', defaultMessage: 'Search'})}
+                title={title}
                 hasSearch={true}
                 scrollValue={scrollValue}
                 hideHeader={hideHeader}
@@ -272,9 +300,10 @@ const SearchScreen = ({teamId}: Props) => {
                 edges={EDGES}
             >
                 <Animated.View style={animated}>
-                    <Animated.View style={top}>
+                    {/* <Animated.View style={[{backgroundColor: 'cyan'}, top]}> */}
+                    <Animated.View style={[top]}>
                         <RoundedHeaderContext/>
-                        {header}
+                        {showResults && renderResultsHeader()}
                     </Animated.View>
                     <AnimatedFlatList
                         data={dummyData}