[Gekidou MM-45792] Remove recent searches title if there are no recent searches for the team. (#6484)

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

@@ -1,6 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
 import compose from 'lodash/fp/compose';
@@ -9,7 +8,7 @@ import {switchMap, distinctUntilChanged} from 'rxjs/operators';
 
 import {observeTeam, queryTeamSearchHistoryByTeamId} from '@queries/servers/team';
 
-import RecentSearches from './recent_searches';
+import Initial from './initial';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
 
@@ -30,4 +29,5 @@ const enhance = withObservables(['teamId'], ({database, teamId}: EnhanceProps) =
 export default compose(
     withDatabase,
     enhance,
-)(RecentSearches);
+)(Initial);
+

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

@@ -0,0 +1,41 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import Modifiers from './modifiers';
+import RecentSearches from './recent_searches';
+
+import type TeamSearchHistoryModel from '@typings/database/models/servers/team_search_history';
+
+type Props = {
+    recentSearches: TeamSearchHistoryModel[];
+    searchValue?: string;
+    setRecentValue: (value: string) => void;
+    setSearchValue: (value: string) => void;
+    setTeamId: (value: string) => void;
+    teamId: string;
+    teamName: string;
+}
+
+const Initial = ({setRecentValue, recentSearches, searchValue, teamId, teamName, setTeamId, setSearchValue}: Props) => {
+    return (
+        <>
+            <Modifiers
+                searchValue={searchValue}
+                setSearchValue={setSearchValue}
+                setTeamId={setTeamId}
+                teamId={teamId}
+            />
+            {Boolean(recentSearches.length) &&
+                <RecentSearches
+                    recentSearches={recentSearches}
+                    setRecentValue={setRecentValue}
+                    teamName={teamName}
+                />
+            }
+        </>
+    );
+};
+
+export default Initial;

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

@@ -8,11 +8,10 @@ import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-nati
 
 import FormattedText from '@components/formatted_text';
 import {useTheme} from '@context/theme';
+import TeamPickerIcon from '@screens/home/search/team_picker_icon';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
-import TeamPickerIcon from '../team_picker_icon';
-
 import Modifier, {ModifierItem} from './modifier';
 import ShowMoreButton from './show_more';
 

app/screens/home/search/initial/recent_searches/recent_item.tsx

@@ -56,7 +56,7 @@ const RecentItem = ({item, setRecentValue}: Props) => {
 
     const handleRemove = useCallback(async () => {
         await removeSearchFromTeamSearchHistory(serverUrl, item.id);
-    }, [item.id]);
+    }, [item.id, serverUrl]);
 
     return (
         <MenuItem

app/screens/home/search/search.tsx

@@ -20,8 +20,7 @@ import {useCollapsibleHeader} from '@hooks/header';
 import {FileFilter, FileFilters, filterFileExtensions} from '@utils/file';
 import {TabTypes, TabType} from '@utils/search';
 
-import Modifiers from './modifiers';
-import RecentSearches from './recent_searches';
+import Initial from './initial';
 import Results from './results';
 import Header from './results/header';
 
@@ -156,19 +155,14 @@ const SearchScreen = ({teamId}: Props) => {
         />
     ), [theme, scrollPaddingTop]);
 
-    const modifiersComponent = useMemo(() => (
-        <>
-            <Modifiers
-                setSearchValue={setSearchValue}
-                searchValue={searchValue}
-                teamId={searchTeamId}
-                setTeamId={setSearchTeamId}
-            />
-            <RecentSearches
-                setRecentValue={handleRecentSearch}
-                teamId={searchTeamId}
-            />
-        </>
+    const initialComponent = useMemo(() => (
+        <Initial
+            searchValue={searchValue}
+            setRecentValue={handleRecentSearch}
+            setSearchValue={setSearchValue}
+            setTeamId={setSearchTeamId}
+            teamId={searchTeamId}
+        />
     ), [searchValue, searchTeamId, handleRecentSearch]);
 
     const resultsComponent = useMemo(() => (
@@ -187,12 +181,12 @@ const SearchScreen = ({teamId}: Props) => {
             return loadingComponent;
         }
         if (!showResults) {
-            return modifiersComponent;
+            return initialComponent;
         }
         return resultsComponent;
     }, [
         loading && loadingComponent,
-        !loading && !showResults && modifiersComponent,
+        !loading && !showResults && initialComponent,
         !loading && showResults && resultsComponent,
     ]);