From d015656944564d25aa5fa216af09ac3bfc24cfb4 Mon Sep 17 00:00:00 2001
From: Jason Frerich <jason.frerich@mattermost.com>
Date: Tue, 12 Jul 2022 13:05:35 -0500
Subject: [PATCH] [Gekidou  MM-45521] Remove show results button (#6465)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* - calculate the bottom sheet height dynamically
- remove show results button
- set the new fitler when select a new item

* when the user selects the same filter, just dismiss the bottom sheet,
don't fetch the values again

* Update app/screens/home/search/results/header.tsx

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

* Use OptionItem instead of MenuItem

Co-authored-by: Daniel Espino García <larkox@gmail.com>
---
 app/components/option_item/index.tsx          |  4 +-
 app/screens/bottom_sheet/content.tsx          | 15 ++--
 .../browse_channels/channel_dropdown.tsx      |  3 +-
 app/screens/home/search/results/filter.tsx    | 84 +++++++------------
 app/screens/home/search/results/header.tsx    | 26 ++++--
 assets/base/i18n/en.json                      |  1 -
 6 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/app/components/option_item/index.tsx b/app/components/option_item/index.tsx
index 041d32629d..c68f176a02 100644
--- a/app/components/option_item/index.tsx
+++ b/app/components/option_item/index.tsx
@@ -34,6 +34,8 @@ const OptionType = {
 
 type OptionType = typeof OptionType[keyof typeof OptionType];
 
+export const ITEM_HEIGHT = 48;
+
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         actionContainer: {
@@ -44,7 +46,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         container: {
             flexDirection: 'row',
             alignItems: 'center',
-            minHeight: 48,
+            minHeight: ITEM_HEIGHT,
         },
         destructive: {
             color: theme.dndIndicator,
diff --git a/app/screens/bottom_sheet/content.tsx b/app/screens/bottom_sheet/content.tsx
index cdaad3c275..498cb9ddb3 100644
--- a/app/screens/bottom_sheet/content.tsx
+++ b/app/screens/bottom_sheet/content.tsx
@@ -23,7 +23,12 @@ type Props = {
     titleSeparator?: boolean;
 }
 
-export const TITLE_HEIGHT = 38;
+const TITLE_MARGIN_TOP = 4;
+const TITLE_MARGIN_BOTTOM = 12;
+
+export const TITLE_HEIGHT = TITLE_MARGIN_TOP + TITLE_MARGIN_BOTTOM + 30; // typography 600 line height
+export const SEPARATOR_MARGIN = 12;
+export const SEPARATOR_MARGIN_TABLET = 20;
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
@@ -31,8 +36,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             flex: 1,
         },
         titleContainer: {
-            marginTop: 4,
-            marginBottom: 12,
+            marginTop: TITLE_MARGIN_TOP,
+            marginBottom: TITLE_MARGIN_BOTTOM,
         },
         titleText: {
             color: theme.centerChannelColor,
@@ -71,14 +76,14 @@ const BottomSheetContent = ({buttonText, buttonIcon, children, disableButton, on
                 </View>
             }
             {titleSeparator &&
-                <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? 20 : 12)}]}/>
+                <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? SEPARATOR_MARGIN_TABLET : SEPARATOR_MARGIN)}]}/>
             }
             <>
                 {children}
             </>
             {showButton && (
                 <>
-                    <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? 20 : 12)}]}/>
+                    <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? SEPARATOR_MARGIN_TABLET : SEPARATOR_MARGIN)}]}/>
                     <Button
                         disabled={disableButton}
                         onPress={onPress}
diff --git a/app/screens/browse_channels/channel_dropdown.tsx b/app/screens/browse_channels/channel_dropdown.tsx
index feccd890c3..161c8b2811 100644
--- a/app/screens/browse_channels/channel_dropdown.tsx
+++ b/app/screens/browse_channels/channel_dropdown.tsx
@@ -11,6 +11,7 @@ import {ITEM_HEIGHT} from '@components/slide_up_panel_item';
 import {useTheme} from '@context/theme';
 import {TITLE_HEIGHT} from '@screens/bottom_sheet/content';
 import {bottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
@@ -72,7 +73,7 @@ export default function ChannelDropdown({
             items += 1;
         }
 
-        const itemsSnap = ((items + 1) * ITEM_HEIGHT) + (insets.bottom * 3) + TITLE_HEIGHT;
+        const itemsSnap = bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom) + TITLE_HEIGHT;
         bottomSheet({
             title: intl.formatMessage({id: 'browse_channels.dropdownTitle', defaultMessage: 'Show'}),
             renderContent,
diff --git a/app/screens/home/search/results/filter.tsx b/app/screens/home/search/results/filter.tsx
index 3204e561a3..4f0d58e5de 100644
--- a/app/screens/home/search/results/filter.tsx
+++ b/app/screens/home/search/results/filter.tsx
@@ -1,33 +1,25 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 
-import CompassIcon from '@components/compass_icon';
-import FormattedText from '@components/formatted_text';
-import MenuItem from '@components/menu_item';
+import OptionItem, {ITEM_HEIGHT} from '@components/option_item';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import {t} from '@i18n';
 import BottomSheetContent from '@screens/bottom_sheet/content';
 import {dismissBottomSheet} from '@screens/navigation';
 import {FileFilter, FileFilters} from '@utils/file';
-import {makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
-        labelContainer: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-        },
-        menuText: {
-            color: theme.centerChannelColor,
-            ...typography('Body', 200, 'Regular'),
+        divider: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
+            height: 1,
         },
     };
 });
@@ -76,6 +68,10 @@ const data: FilterItem[] = [
     },
 ];
 
+export const NUMBER_FILTER_ITEMS = data.length;
+export const FILTER_ITEM_HEIGHT = ITEM_HEIGHT;
+export const DIVIDERS_HEIGHT = data.length - 1;
+
 type FilterProps = {
     initialFilter: FileFilter;
     setFilter: (filter: FileFilter) => void;
@@ -87,56 +83,31 @@ const Filter = ({initialFilter, setFilter}: FilterProps) => {
     const style = getStyleSheet(theme);
     const isTablet = useIsTablet();
 
-    const [selectedFilter, setSelectedFilter] = useState<FileFilter>(initialFilter);
-    const disableButton = selectedFilter === initialFilter;
+    const buttonTitle = intl.formatMessage({id: 'screen.search.results.filter.title', defaultMessage: 'Filter by file type'});
 
-    const renderLabelComponent = useCallback((item: FilterItem) => {
-        return (
-            <View style={style.labelContainer}>
-                <FormattedText
-                    style={style.menuText}
-                    id={item.id}
-                    defaultMessage={item.defaultMessage}
-                />
-                {(selectedFilter === item.filterType) && (
-                    <CompassIcon
-                        style={style.selected}
-                        name={'check'}
-                        size={24}
-                    />
-                )}
-            </View>
-        );
-    }, [selectedFilter, style]);
+    const handleOnPress = useCallback((fileType: FileFilter) => {
+        if (fileType !== initialFilter) {
+            setFilter(fileType);
+        }
+        dismissBottomSheet();
+    }, [initialFilter]);
 
-    const renderFilterItem = useCallback(({item}: {item: FilterItem}) => {
+    const separator = useCallback(() => <View style={style.divider}/>, [style]);
+
+    const renderFilterItem = useCallback(({item}) => {
         return (
-            <MenuItem
-                labelComponent={renderLabelComponent(item)}
-                onPress={() => {
-                    setSelectedFilter(item.filterType);
-                }}
-                separator={item.separator}
-                testID={item.id}
-                theme={theme}
+            <OptionItem
+                label={intl.formatMessage({id: item.id, defaultMessage: item.defaultMessage})}
+                type={'select'}
+                action={() => handleOnPress(item.filterType)}
+                selected={initialFilter === item.filterType}
             />
         );
-    }, [renderLabelComponent, theme]);
-
-    const handleShowResults = useCallback(() => {
-        setFilter(selectedFilter);
-        dismissBottomSheet();
-    }, [selectedFilter, setFilter]);
-
-    const buttonText = intl.formatMessage({id: 'screen.search.results.filter.show_button', defaultMessage: 'Show results'});
-    const buttonTitle = intl.formatMessage({id: 'screen.search.results.filter.title', defaultMessage: 'Filter by file type'});
+    }, [handleOnPress, initialFilter, theme]);
 
     return (
         <BottomSheetContent
-            buttonText={buttonText}
-            onPress={handleShowResults}
-            disableButton={disableButton}
-            showButton={true}
+            showButton={false}
             showTitle={!isTablet}
             testID='search.filters'
             title={buttonTitle}
@@ -147,6 +118,7 @@ const Filter = ({initialFilter, setFilter}: FilterProps) => {
                     data={data}
                     renderItem={renderFilterItem}
                     contentContainerStyle={style.contentContainer}
+                    ItemSeparatorComponent={separator}
                 />
             </View>
         </BottomSheetContent>
diff --git a/app/screens/home/search/results/header.tsx b/app/screens/home/search/results/header.tsx
index 5e0ccf2172..11e2a803c8 100644
--- a/app/screens/home/search/results/header.tsx
+++ b/app/screens/home/search/results/header.tsx
@@ -1,21 +1,27 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
+import {bottomSheetSnapPoint} from '@app/utils/helpers';
 import Badge from '@components/badge';
 import CompassIcon from '@components/compass_icon';
 import {useTheme} from '@context/theme';
+import {useIsTablet} from '@hooks/device';
+import {SEPARATOR_MARGIN, SEPARATOR_MARGIN_TABLET, TITLE_HEIGHT} from '@screens/bottom_sheet/content';
 import {bottomSheet} from '@screens/navigation';
 import {FileFilter, FileFilters} from '@utils/file';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
-import Filter from './filter';
+import Filter, {DIVIDERS_HEIGHT, FILTER_ITEM_HEIGHT, NUMBER_FILTER_ITEMS} from './filter';
 import SelectButton from './header_button';
 
 export type SelectTab = 'files' | 'messages'
 
+export const HEADER_HEIGHT = 64;
+
 type Props = {
     onTabSelect: (tab: SelectTab) => void;
     onFilterChanged: (filter: FileFilter) => void;
@@ -25,8 +31,6 @@ type Props = {
     numberFiles: number;
 }
 
-export const HEADER_HEIGHT = 64;
-
 const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         flex: {
@@ -63,6 +67,8 @@ const Header = ({
     const theme = useTheme();
     const styles = getStyleFromTheme(theme);
     const intl = useIntl();
+    const {bottom} = useSafeAreaInsets();
+    const isTablet = useIsTablet();
 
     const messagesText = intl.formatMessage({id: 'screen.search.header.messages', defaultMessage: 'Messages'});
     const filesText = intl.formatMessage({id: 'screen.search.header.files', defaultMessage: 'Files'});
@@ -78,6 +84,16 @@ const Header = ({
         onTabSelect('files');
     }, [onTabSelect]);
 
+    const snapPoints = useMemo(() => {
+        return [
+            bottomSheetSnapPoint(
+                NUMBER_FILTER_ITEMS,
+                FILTER_ITEM_HEIGHT,
+                bottom,
+            ) + TITLE_HEIGHT + DIVIDERS_HEIGHT + (isTablet ? SEPARATOR_MARGIN_TABLET : SEPARATOR_MARGIN),
+            10];
+    }, []);
+
     const handleFilterPress = useCallback(() => {
         const renderContent = () => {
             return (
@@ -90,7 +106,7 @@ const Header = ({
         bottomSheet({
             closeButtonId: 'close-search-filters',
             renderContent,
-            snapPoints: [700, 10],
+            snapPoints,
             theme,
             title: intl.formatMessage({id: 'mobile.add_team.join_team', defaultMessage: 'Join Another Team'}),
         });
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index de4a1bbbc0..eb5e383a1b 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -669,7 +669,6 @@
   "screen.search.results.filter.documents": "Documents",
   "screen.search.results.filter.images": "Images",
   "screen.search.results.filter.presentations": "Presentations",
-  "screen.search.results.filter.show_button": "Show results",
   "screen.search.results.filter.spreadsheets": "Spreadsheets",
   "screen.search.results.filter.title": "Filter by file type",
   "screen.search.results.filter.videos": "Videos",