feat: Improved search on mode screens

Searchbar now disapears when scrolling down and when searching scrolls to top of list
pct-org · Apr 28, 2020 · af0b971 · af0b971
1 parent 5953cfa
commit af0b971
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 37 deletions.
diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, StatusBar, Animated, InteractionManager } from 'react-native'
 import { useLazyQuery } from '@apollo/react-hooks'
-import { useCollapsibleStack, CollapsibleStackSub } from 'react-navigation-collapsible'
+import { useCollapsibleStack } from 'react-navigation-collapsible'
 import { getDefaultHeaderHeight } from 'react-navigation-collapsible/lib/src/utils'
 
 import i18n from 'modules/i18n'
@@ -37,8 +37,8 @@ const styles = StyleSheet.create({
   },
 })
 
-//TODO:: The searchbar does not disapear correctly so that needs to be checked out
 export const Mode = ({ mode, navigation }) => {
+  const flatListRef = useRef(null)
   const [query, setQuery] = useState(null)
   const [executeQuery, { loading, data, fetchMore }] = useLazyQuery(
     mode === 'movies'
@@ -54,7 +54,7 @@ export const Mode = ({ mode, navigation }) => {
     },
   )
 
-  const { onScroll, containerPaddingTop, scrollIndicatorInsetTop } = useCollapsibleStack()
+  const { onScroll, scrollIndicatorInsetTop } = useCollapsibleStack()
 
   useEffect(() => {
     // Execute the query after the component is done navigation
@@ -102,6 +102,7 @@ export const Mode = ({ mode, navigation }) => {
 
       <Animated.FlatList
         removeClippedSubviews
+        ref={flatListRef}
         data={items.length === 0 && !query
           ? Array(24).fill({ loading: true })
           : items
@@ -130,18 +131,14 @@ export const Mode = ({ mode, navigation }) => {
         }
         onEndReachedThreshold={dimensions.CARD_HEIGHT_SMALL * 4}
         onScroll={onScroll}
-        contentContainerStyle={{
-          ...styles.container,
-          paddingTop: containerPaddingTop - getDefaultHeaderHeight(true),
-        }}
+        contentContainerStyle={styles.container}
         scrollIndicatorInsets={{ top: scrollIndicatorInsetTop - getDefaultHeaderHeight(true) }}
       />
 
-      <CollapsibleStackSub>
-        <SearchBar
-          query={query}
-          setQuery={setQuery} />
-      </CollapsibleStackSub>
+      <SearchBar
+        flatListRef={flatListRef}
+        searchedQuery={query}
+        search={setQuery} />
 
     </View>
   )

diff --git a/app/mobile/screens/Mode/SearchBar/SearchBar.js b/app/mobile/screens/Mode/SearchBar/SearchBar.js
@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, StatusBar, View, TextInput } from 'react-native'
+import { StyleSheet, StatusBar, TextInput, Animated } from 'react-native'
 import * as Animatable from 'react-native-animatable'
+import { useNavigation } from '@react-navigation/native'
+import { useCollapsibleStack } from 'react-navigation-collapsible'
 
 import colors from 'modules/colors'
 import dimensions from 'modules/dimensions'
@@ -50,10 +52,13 @@ export const styles = StyleSheet.create({
 
 })
 
-export const SearchBar = ({ query: searchedQuery, setQuery: search }) => {
+export const SearchBar = ({ searchedQuery, search, flatListRef }) => {
+  const navigation = useNavigation()
   const [query, setQuery] = useState(searchedQuery)
   const [timeout, setTheTimeout] = useState(null)
 
+  const { translateY } = useCollapsibleStack()
+
   const cancelSearch = () => {
     setQuery(null)
     search(null)
@@ -63,8 +68,46 @@ export const SearchBar = ({ query: searchedQuery, setQuery: search }) => {
     }
   }
 
+  const handleSearch = (text) => {
+    if (text.trim().length === 0) {
+      cancelSearch()
+
+    } else {
+      setQuery(text)
+
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+
+      setTheTimeout(setTimeout(() => {
+        search(text)
+
+        // Scroll to top
+        if (flatListRef && flatListRef.current) {
+          flatListRef.current.getNode().scrollToOffset({ offset: 0, animated: true })
+        }
+      }, 500))
+    }
+  }
+
+  const handleLayout = ({
+    nativeEvent: {
+      layout: { height = 0 },
+    },
+  }) => {
+    navigation.setParams({
+      collapsibleSubHeaderHeight: height + StatusBar.currentHeight,
+      isCollapsibleDirty: true,
+    })
+  }
+
   return (
-    <View style={styles.root}>
+    <Animated.View
+      onLayout={handleLayout}
+      style={{
+        transform: [{ translateY }],
+        ...styles.root,
+      }}>
 
       <Container
         elevation={1}
@@ -96,37 +139,22 @@ export const SearchBar = ({ query: searchedQuery, setQuery: search }) => {
           style={styles.input}
           selectionColor={'#FFF'}
           underlineColorAndroid={'transparent'}
-          onChangeText={(text) => {
-            if (text.trim().length === 0) {
-              cancelSearch()
-
-            } else {
-              setQuery(text)
-
-              if (timeout) {
-                clearTimeout(timeout)
-              }
-
-              setTheTimeout(setTimeout(() => {
-                search(text)
-              }, 500))
-            }
-          }}
+          onChangeText={handleSearch}
           value={query} />
 
       </Container>
 
-    </View>
+    </Animated.View>
   )
 }
 
 SearchBar.propTypes = {
-  query: PropTypes.string,
-  setQuery: PropTypes.func.isRequired,
+  searchedQuery: PropTypes.string,
+  search: PropTypes.func.isRequired,
 }
 
 SearchBar.defaultProps = {
-  query: null,
+  searchedQuery: null,
 }
 
 export default SearchBar
diff --git a/app/mobile/screens/index.js b/app/mobile/screens/index.js
@@ -11,8 +11,9 @@ const Stack = createStackNavigator()
 
 export default () => (
   <Stack.Navigator
+    initialRouteName={'Home'}
     screenOptions={{
-      headerShown: false
+      headerShown: false,
     }}>
     <Stack.Screen name="Home" component={HomeScreen} />
     <Stack.Screen name="Item" component={ItemScreen} />
@@ -22,18 +23,24 @@ export default () => (
       <Stack.Screen name="Movies">
         {(props) => <ModeScreen mode={'movies'} {...props} />}
       </Stack.Screen>,
+      {},
+      1
     )}
 
     {createCollapsibleStack(
       <Stack.Screen name="Shows">
         {(props) => <ModeScreen mode={'shows'} {...props} />}
       </Stack.Screen>,
+      {},
+      1
     )}
 
     {createCollapsibleStack(
       <Stack.Screen name="MyList">
         {(props) => <ModeScreen mode={'bookmarks'} {...props} />}
       </Stack.Screen>,
+      {},
+      1
     )}
   </Stack.Navigator>
 )