refactor: Started updating searchbar in mode screen

We are going to add options there to further filter / sort the content
pct-org · Oct 13, 2020 · a7286df · a7286df
1 parent c162be1
commit a7286df
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 52 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -6,7 +6,7 @@ import com.android.build.OutputFile
 
 project.ext.react = [
         entryFile: "index.js",
-        enableHermes: false
+        enableHermes: true
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"

diff --git a/android/build.gradle b/android/build.gradle
@@ -16,7 +16,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.0.1'
+        classpath 'com.android.tools.build:gradle:4.0.2'
         classpath 'com.google.gms:google-services:4.3.2'
 
         // NOTE: Do not place your application dependencies here; they belong

diff --git a/app/mobile/screens/Home/HomeScreen.js b/app/mobile/screens/Home/HomeScreen.js
@@ -48,7 +48,7 @@ export const styles = StyleSheet.create({
 })
 
 export const Home = ({ navigation }) => {
-  const { data: moviesData, fetchMore: moviesFetchMore } = useQuery(
+  const { data: moviesData, fetchMore: moviesFetchMore} = useQuery(
     MoviesQuery,
     {
       variables: {

diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js
@@ -10,8 +10,8 @@ import colors from 'modules/colors'
 import dimensions from 'modules/dimensions'
 import useBackButton from 'modules/hooks/useBackButton'
 import { MoviesModeQuery } from 'modules/GraphQL/MoviesGraphQL'
-import ShowsQuery from 'modules/GraphQL/ShowsGraphQL'
-import BookmarksQuery from 'modules/GraphQL/BookmarksGraphQL'
+import { ShowsModeQuery } from 'modules/GraphQL/ShowsGraphQL'
+import { BookmarksModeQuery } from 'modules/GraphQL/BookmarksGraphQL'
 import fetchMoreUpdateQuery from 'modules/GraphQL/helpers/fetchMoreUpdateQuery'
 
 import Card from 'components/Card'
@@ -39,26 +39,51 @@ const styles = StyleSheet.create({
   },
 })
 
-export const getQuery = (mode) => {
+export const useMode = (mode) => React.useMemo(() => {
+  const defaultSortingContent = 'trending'
+  const sortingOptionsContent = ['trending', 'name', 'rating', 'released', 'added', 'year']
+
   switch (mode) {
     case 'movies':
-      return MoviesModeQuery
+      return {
+        query: MoviesModeQuery,
+        sort: defaultSortingContent,
+        sortOptions: sortingOptionsContent,
+      }
     case 'shows':
-      return ShowsQuery
+      return {
+        query: ShowsModeQuery,
+        sort: defaultSortingContent,
+        sortOptions: sortingOptionsContent,
+      }
+
     case 'bookmarks':
-      return BookmarksQuery
+      return {
+        query: BookmarksModeQuery,
+        sort: null,
+      }
+
+    default:
+      return {
+        query: null,
+        sort: null,
+      }
   }
-}
+}, [mode])
 
 export const Mode = ({ mode, navigation }) => {
   const flatListRef = useRef(null)
+  const modeInfo = useMode(mode)
+  const [sort, setSorting] = useState(modeInfo.sort)
   const [query, setQuery] = useState(null)
+
   const [executeQuery, { loading, data, fetchMore }] = useLazyQuery(
-    getQuery(mode),
+    modeInfo.query,
     {
       variables: {
         offset: 0,
         query,
+        sort,
       },
     },
   )
@@ -134,7 +159,7 @@ export const Mode = ({ mode, navigation }) => {
         ListEmptyComponent={renderNothingFound}
         ListHeaderComponent={() => (
           <View style={{
-            marginTop: 50 + dimensions.STATUSBAR_HEIGHT + dimensions.UNIT,
+            marginTop: dimensions.STATUSBAR_HEIGHT + +dimensions.SEARCH_BAR_HEIGHT + dimensions.UNIT,
           }} />
         )}
         ListFooterComponent={() => <View style={{ width: dimensions.UNIT * 2 }} />}
@@ -157,7 +182,8 @@ export const Mode = ({ mode, navigation }) => {
       <SearchBar
         flatListRef={flatListRef}
         searchedQuery={query}
-        search={setQuery} />
+        search={setQuery}
+      />
 
     </View>
   )

diff --git a/app/mobile/screens/Mode/SearchBar/SearchBar.js b/app/mobile/screens/Mode/SearchBar/SearchBar.js
@@ -7,6 +7,7 @@ import { useCollapsibleStack } from 'react-navigation-collapsible'
 
 import colors from 'modules/colors'
 import dimensions from 'modules/dimensions'
+import constants from 'modules/constants'
 
 import Container from 'components/Container'
 import Icon from 'components/Icon'
@@ -17,7 +18,7 @@ export const styles = StyleSheet.create({
   root: {
     position: 'absolute',
     width: '100%',
-    height: 50,
+    height: dimensions.SEARCH_BAR_HEIGHT,
     top: StatusBar.currentHeight + dimensions.UNIT,
     display: 'flex',
     justifyContent: 'center',
@@ -26,28 +27,21 @@ export const styles = StyleSheet.create({
 
   container: {
     width: dimensions.SCREEN_WIDTH - (dimensions.UNIT * 2),
-    height: '100%',
-    borderRadius: dimensions.BORDER_RADIUS,
+    borderRadius: dimensions.SEARCH_BAR_BORDER_RADIOS,
     overflow: 'hidden',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 
   input: {
     height: '100%',
-    width: '80%',
+    flex: 1,
     color: colors.ICON.WHITE,
-    marginLeft: 40,
-  },
-
-  cancel: {
-    position: 'absolute',
-    right: dimensions.UNIT,
-    top: dimensions.UNIT,
   },
 
   icon: {
-    position: 'absolute',
-    left: dimensions.UNIT,
-    top: dimensions.UNIT,
+    margin: dimensions.UNIT,
   },
 
 })
@@ -120,35 +114,51 @@ export const SearchBar = ({ searchedQuery, search, flatListRef }) => {
         elevation={1}
         style={styles.container}>
 
-        {searchedQuery && (
-          <Animatable.View
-            style={styles.cancel}
-            animation={searchedQuery.trim().length > 0 ? 'zoomIn' : 'zoomOut'}
-            duration={300}
-            useNativeDriver>
-            <IconButton
-              name={'close-circle'}
-              color={'primary'}
-              onPress={cancelSearch}
-              size={dimensions.ICON_SIZE_MEDIUM}
-            />
-          </Animatable.View>
-        )}
-
         <Icon
           style={styles.icon}
           name={'magnify'}
           color={'white'}
-          size={dimensions.ICON_SIZE_MEDIUM}
+          emphasis={'medium'}
+          size={dimensions.SEARCH_BAR_ICON_SIZE}
         />
 
         <TextInput
           style={styles.input}
-          selectionColor={'#FFF'}
+          selectionColor={colors.WHITE}
           underlineColorAndroid={'transparent'}
           onChangeText={handleSearch}
           value={query} />
 
+        {searchedQuery && (
+          <Animatable.View
+            style={styles.icon}
+            animation={searchedQuery.trim().length > 0 ? 'zoomIn' : 'zoomOut'}
+            duration={constants.ANIMATION_DURATIONS.enteringScreen}
+            useNativeDriver>
+            <IconButton
+              name={'close-circle'}
+              color={'primary'}
+              onPress={cancelSearch}
+              size={dimensions.SEARCH_BAR_ICON_SIZE}
+            />
+          </Animatable.View>
+        )}
+
+        {!searchedQuery && (
+          <Animatable.View
+            style={styles.icon}
+            animation={query?.trim()?.length > 0 ? 'zoomOut' : 'zoomIn'}
+            duration={constants.ANIMATION_DURATIONS.enteringScreen}
+            useNativeDriver>
+            <IconButton
+              name={'dots-vertical'}
+              color={'primary'}
+              emphasis={'medium'}
+              onPress={console.log}
+              size={dimensions.SEARCH_BAR_ICON_SIZE}
+            />
+          </Animatable.View>
+        )}
       </Container>
 
     </Animated.View>

diff --git a/app/modules/BottomSheetManager/BottomSheetProvider.js b/app/modules/BottomSheetManager/BottomSheetProvider.js
@@ -127,7 +127,7 @@ export const BottomSheetProvider = ({ children }) => {
             style={{
               height: bottomSheetConfig.biggestSnapPoint,
             }}>
-            {visible && bottomSheetConfig.renderContent()}
+            {bottomSheetConfig.renderContent()}
           </Container>
         )}
       />

diff --git a/app/modules/GraphQL/BookmarksGraphQL.js b/app/modules/GraphQL/BookmarksGraphQL.js
@@ -42,6 +42,19 @@ export const BookmarkedSubscription = gql`
   ${showBookmarkFragment}
 `
 
+export const BookmarksModeQuery = gql`
+  query bookmarks($offset: Float!,  $query: String) {
+    bookmarks(limit: 25, offset: $offset, query: $query) {
+      ...movieBookmark
+
+      ...showBookmark
+    }
+  }
+
+  ${movieBookmarkFragment}
+  ${showBookmarkFragment}
+`
+
 export default gql`
   query bookmarks($offset: Float!) {
     bookmarks(limit: 25, offset: $offset) {

diff --git a/app/modules/GraphQL/MoviesGraphQL.js b/app/modules/GraphQL/MoviesGraphQL.js
@@ -3,8 +3,8 @@ import { gql } from '@apollo/client'
 import movieFragment, { movieMinimalFragment } from './fragments/movieFragment'
 
 export const MoviesModeQuery = gql`
-  query movies($offset: Float!, $query: String) {
-    movies(limit: 25, offset: $offset, query: $query) {
+  query movies($offset: Float!, $query: String, $sort: String!) {
+    movies(limit: 25, offset: $offset, query: $query, sort: $sort) {
       ...movieMinimal
     }
   }

diff --git a/app/modules/GraphQL/ShowsGraphQL.js b/app/modules/GraphQL/ShowsGraphQL.js
@@ -22,6 +22,16 @@ export const MostWatchedShowsQuery = gql`
   ${showMinimalFragment}
 `
 
+export const ShowsModeQuery = gql`
+  query shows($offset: Float!, $query: String, $sort: String!) {
+    shows(limit: 25, offset: $offset, query: $query, sort: $sort) {
+      ...showMinimal
+    }
+  }
+
+  ${showMinimalFragment}
+`
+
 export default gql`
   query shows($offset: Float!, $query: String) {
     shows(limit: 25, offset: $offset, query: $query) {

diff --git a/app/modules/dimensions.js b/app/modules/dimensions.js
@@ -36,6 +36,10 @@ export default {
   BORDER_WIDTH: 1.5,
   BORDER_RADIUS: 5,
 
+  SEARCH_BAR_HEIGHT: getHeight(40),
+  SEARCH_BAR_BORDER_RADIOS: getHeight(6),
+  SEARCH_BAR_ICON_SIZE: getHeight(24),
+
   CARD_HEIGHT: getHeight(useCorrect(130, null, 252)),
   CARD_WIDTH: getWidth(useCorrect(90, null, 175)),
   CARD_HEIGHT_SMALL: getHeight(useCorrect(116, null, 252)),

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@apollo/client": "^3.2.2",
+    "@apollo/client": "^3.2.3",
     "@react-native-community/async-storage": "1.12.1",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "5.9.7",

diff --git a/yarn.lock b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@apollo/client@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.2.2.tgz#fe5cad4d53373979f13a925e9da02d8743e798a5"
-  integrity sha512-lw80L0i8PHhv863iLEwf5AvNak9STPNC6/0MWQYGZHV4yEryj7muLAueRzXkZHpoddGAou80xL8KqLAODNy0/A==
+"@apollo/client@^3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.2.3.tgz#d13e4efa501a1fadefa3cd93e2de99cba2b53999"
+  integrity sha512-AraRQRG4HinqcsuDtRzuavMuSxkK46TO4zh4zfLLCazMYSYP1xY9E5cQEeUHZ993HQMs4A7tyATPaEMfn8UZfA==
   dependencies:
     "@graphql-typed-document-node/core" "^3.0.0"
     "@types/zen-observable" "^0.8.0"