From 2c11addf40fb8c351319580628765e64fe378598 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <arnaud.vergnet@mailo.com>
Date: Sun, 12 Sep 2021 22:38:52 +0200
Subject: [PATCH] fix: make search fields take whole header

---
 src/screens/Amicale/Clubs/ClubListScreen.tsx  |   2 +-
 src/screens/Planex/GroupSelectionScreen.tsx   |  19 +-
 .../Services/Proximo/ProximoListScreen.tsx    | 163 ++++++++----------
 3 files changed, 79 insertions(+), 105 deletions(-)

diff --git a/src/screens/Amicale/Clubs/ClubListScreen.tsx b/src/screens/Amicale/Clubs/ClubListScreen.tsx
index 260ad1b..5d4debb 100644
--- a/src/screens/Amicale/Clubs/ClubListScreen.tsx
+++ b/src/screens/Amicale/Clubs/ClubListScreen.tsx
@@ -93,7 +93,7 @@ function ClubListScreen() {
       headerTitleContainerStyle:
         Platform.OS === 'ios'
           ? { marginHorizontal: 0, width: '70%' }
-          : { marginHorizontal: 0, right: 50, left: 50 },
+          : { width: '100%' },
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigation]);
diff --git a/src/screens/Planex/GroupSelectionScreen.tsx b/src/screens/Planex/GroupSelectionScreen.tsx
index e09b00a..aafc9d3 100644
--- a/src/screens/Planex/GroupSelectionScreen.tsx
+++ b/src/screens/Planex/GroupSelectionScreen.tsx
@@ -81,6 +81,15 @@ function GroupSelectionScreen() {
   const favoriteGroups = getFavoriteGroups();
 
   useLayoutEffect(() => {
+    const getSearchBar = () => {
+      return (
+        // @ts-ignore
+        <Searchbar
+          placeholder={i18n.t('screens.proximo.search')}
+          onChangeText={setCurrentSearchString}
+        />
+      );
+    };
     navigation.setOptions({
       headerTitle: getSearchBar,
       headerBackTitleVisible: false,
@@ -91,16 +100,6 @@ function GroupSelectionScreen() {
     });
   }, [navigation]);
 
-  const getSearchBar = () => {
-    return (
-      // @ts-ignore
-      <Searchbar
-        placeholder={i18n.t('screens.proximo.search')}
-        onChangeText={setCurrentSearchString}
-      />
-    );
-  };
-
   /**
    * Gets a render item for the given article
    *
diff --git a/src/screens/Services/Proximo/ProximoListScreen.tsx b/src/screens/Services/Proximo/ProximoListScreen.tsx
index 2f67cc6..8bf2009 100644
--- a/src/screens/Services/Proximo/ProximoListScreen.tsx
+++ b/src/screens/Services/Proximo/ProximoListScreen.tsx
@@ -120,6 +120,7 @@ function ProximoListScreen(props: Props) {
   const theme = useTheme();
   const { articles, setArticles } = useCachedProximoArticles();
   const modalRef = useRef<Modalize>(null);
+  const navParams = props.route.params;
 
   const [currentSearchString, setCurrentSearchString] = useState('');
   const [currentSortMode, setCurrentSortMode] = useState(2);
@@ -130,6 +131,70 @@ function ProximoListScreen(props: Props) {
   const sortModes = [sortPrice, sortPriceReverse, sortName, sortNameReverse];
 
   useLayoutEffect(() => {
+    const getSearchBar = () => {
+      return (
+        // @ts-ignore
+        <Searchbar
+          placeholder={i18n.t('screens.proximo.search')}
+          onChangeText={setCurrentSearchString}
+          autoFocus={navParams.shouldFocusSearchBar}
+        />
+      );
+    };
+    const getModalSortMenu = () => {
+      return (
+        <View style={styles.modalContainer}>
+          <Title style={styles.sortTitle}>
+            {i18n.t('screens.proximo.sortOrder')}
+          </Title>
+          <RadioButton.Group
+            onValueChange={setSortMode}
+            value={currentSortMode.toString()}
+          >
+            <RadioButton.Item
+              label={i18n.t('screens.proximo.sortPrice')}
+              value={'0'}
+            />
+            <RadioButton.Item
+              label={i18n.t('screens.proximo.sortPriceReverse')}
+              value={'1'}
+            />
+            <RadioButton.Item
+              label={i18n.t('screens.proximo.sortName')}
+              value={'2'}
+            />
+            <RadioButton.Item
+              label={i18n.t('screens.proximo.sortNameReverse')}
+              value={'3'}
+            />
+          </RadioButton.Group>
+        </View>
+      );
+    };
+    const setSortMode = (mode: string) => {
+      const currentMode = parseInt(mode, 10);
+      setCurrentSortMode(currentMode);
+      if (modalRef.current && currentMode !== currentSortMode) {
+        modalRef.current.close();
+      }
+    };
+    const getSortMenuButton = () => {
+      return (
+        <MaterialHeaderButtons>
+          <Item
+            title="main"
+            iconName="sort"
+            onPress={() => {
+              setModalCurrentDisplayItem(getModalSortMenu());
+              if (modalRef.current) {
+                modalRef.current.open();
+              }
+            }}
+          />
+        </MaterialHeaderButtons>
+      );
+    };
+
     navigation.setOptions({
       headerRight: getSortMenuButton,
       headerTitle: getSearchBar,
@@ -137,21 +202,9 @@ function ProximoListScreen(props: Props) {
       headerTitleContainerStyle:
         Platform.OS === 'ios'
           ? { marginHorizontal: 0, width: '70%' }
-          : { marginHorizontal: 0, right: 50, left: 50 },
+          : { width: '100%' },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [navigation, currentSortMode]);
-
-  /**
-   * Callback used when clicking on the sort menu button.
-   * It will open the modal to show a sort selection
-   */
-  const onSortMenuPress = () => {
-    setModalCurrentDisplayItem(getModalSortMenu());
-    if (modalRef.current) {
-      modalRef.current.open();
-    }
-  };
+  }, [navigation, currentSortMode, navParams.shouldFocusSearchBar]);
 
   /**
    * Callback used when clicking an article in the list.
@@ -166,19 +219,6 @@ function ProximoListScreen(props: Props) {
     }
   };
 
-  /**
-   * Sets the current sort mode.
-   *
-   * @param mode The number representing the mode
-   */
-  const setSortMode = (mode: string) => {
-    const currentMode = parseInt(mode, 10);
-    setCurrentSortMode(currentMode);
-    if (modalRef.current && currentMode !== currentSortMode) {
-      modalRef.current.close();
-    }
-  };
-
   /**
    * Gets a color depending on the quantity available
    *
@@ -197,35 +237,6 @@ function ProximoListScreen(props: Props) {
     return color;
   };
 
-  /**
-   * Gets the sort menu header button
-   *
-   * @return {*}
-   */
-  const getSortMenuButton = () => {
-    return (
-      <MaterialHeaderButtons>
-        <Item title="main" iconName="sort" onPress={onSortMenuPress} />
-      </MaterialHeaderButtons>
-    );
-  };
-
-  /**
-   * Gets the header search bar
-   *
-   * @return {*}
-   */
-  const getSearchBar = () => {
-    return (
-      // @ts-ignore
-      <Searchbar
-        placeholder={i18n.t('screens.proximo.search')}
-        onChangeText={setCurrentSearchString}
-        autoFocus={props.route.params.shouldFocusSearchBar}
-      />
-    );
-  };
-
   /**
    * Gets the modal content depending on the given article
    *
@@ -262,42 +273,6 @@ function ProximoListScreen(props: Props) {
     );
   };
 
-  /**
-   * Gets the modal content to display a sort menu
-   *
-   * @return {*}
-   */
-  const getModalSortMenu = () => {
-    return (
-      <View style={styles.modalContainer}>
-        <Title style={styles.sortTitle}>
-          {i18n.t('screens.proximo.sortOrder')}
-        </Title>
-        <RadioButton.Group
-          onValueChange={setSortMode}
-          value={currentSortMode.toString()}
-        >
-          <RadioButton.Item
-            label={i18n.t('screens.proximo.sortPrice')}
-            value={'0'}
-          />
-          <RadioButton.Item
-            label={i18n.t('screens.proximo.sortPriceReverse')}
-            value={'1'}
-          />
-          <RadioButton.Item
-            label={i18n.t('screens.proximo.sortName')}
-            value={'2'}
-          />
-          <RadioButton.Item
-            label={i18n.t('screens.proximo.sortNameReverse')}
-            value={'3'}
-          />
-        </RadioButton.Group>
-      </View>
-    );
-  };
-
   /**
    * Gets a render item for the given article
    *
@@ -341,8 +316,8 @@ function ProximoListScreen(props: Props) {
           data: data
             .filter(
               (d) =>
-                props.route.params.category === -1 ||
-                props.route.params.category === d.category_id
+                navParams.category === -1 ||
+                navParams.category === d.category_id
             )
             .sort(sortModes[currentSortMode]),
           keyExtractor: keyExtractor,