feat: Added filtering / sorting in mode screens

pct-org · Oct 14, 2020 · d4b9298 · d4b9298
1 parent a7286df
commit d4b9298
Show file tree

Hide file tree

Showing 19 changed files with 231 additions and 340 deletions.
diff --git a/app/mobile/components/ItemOptions/ItemOptions.js b/app/mobile/components/ItemOptions/ItemOptions.js
@@ -138,7 +138,7 @@ export const ItemOptions = ({
                 disabled
                 icon={'content-copy'}
                 label={i18n.t('Copy to phone')}
-                subLabel={'Item needs to be downloaded for this to become available'} />
+                labelLine2={'Item needs to be downloaded for this to become available'} />
             </OptionsGroup>
           </>
         )}

diff --git a/app/mobile/components/OptionsItem/OptionsItemInner.js b/app/mobile/components/OptionsItem/OptionsItemInner.js
@@ -16,19 +16,17 @@ export const styles = StyleSheet.create({
     marginRight: dimensions.UNIT,
   },
 
-  labels: {
+  labelsContainer: {
     flex: 1,
   },
 
-  label: {},
-
-  subLabels: {
+  labels: {
     flexDirection: 'row',
   },
 
 })
 
-export const SettingsItem = ({ label, subLabel, subLabelLine2, icon, disabled, loading, downloading }) => {
+export const SettingsItem = ({ label, labelLine2, subLabel, subLabelLine2, icon, disabled, loading, downloading }) => {
   return (
     <>
       {loading && (
@@ -73,21 +71,39 @@ export const SettingsItem = ({ label, subLabel, subLabelLine2, icon, disabled, l
           } />
       )}
 
-      <View style={styles.labels}>
-        <Typography
-          emphasis={
-            disabled
-              ? 'low'
-              : 'high'
-          }
-          style={styles.label}
-          variant={'overline'}>
-          {label}
-        </Typography>
+      <View style={styles.labelsContainer}>
+        {(label || subLabel) && (
+          <View style={styles.labels}>
+            <Typography
+              style={{
+                flex: 1,
+              }}
+              emphasis={
+                disabled
+                  ? 'low'
+                  : 'high'
+              }
+              variant={'overline'}>
+              {label}
+            </Typography>
 
-        {(subLabel || subLabelLine2) && (
-          <View style={styles.subLabels}>
             {subLabel && (
+              <Typography
+                emphasis={
+                  disabled
+                    ? 'low'
+                    : 'medium'
+                }
+                variant={'captionSmall'}>
+                {subLabel}
+              </Typography>
+            )}
+          </View>
+        )}
+
+        {(labelLine2 || subLabelLine2) && (
+          <View style={styles.labels}>
+            {labelLine2 && (
               <Typography
                 style={{
                   flex: 1,
@@ -98,7 +114,7 @@ export const SettingsItem = ({ label, subLabel, subLabelLine2, icon, disabled, l
                     : 'medium'
                 }
                 variant={'captionSmall'}>
-                {subLabel}
+                {labelLine2}
               </Typography>
             )}
 

diff --git a/app/mobile/components/OptionsItemTorrent/OptionsItemTorrent.js b/app/mobile/components/OptionsItemTorrent/OptionsItemTorrent.js
@@ -35,14 +35,23 @@ export const OptionsItemTorrent = ({
     return !(download.torrentType === torrent.type && download.quality === torrent.quality)
   }, [download, disabled])
 
-  const itemSubLabel = React.useMemo(() => {
+  const labelLine2 = React.useMemo(() => {
     if (!isItemDisabled && download?.status === constants.STATUS_DOWNLOADING) {
       return download.timeRemaining
     }
 
     return `${torrent.provider} - ${torrent.sizeString}`
   }, [download, isItemDisabled])
 
+  const subLabel = React.useMemo(() => {
+    if (!isItemDisabled && download?.status === constants.STATUS_DOWNLOADING) {
+      return `${download.numPeers} peer${download.numPeers > 1 ? 's' : ''}`
+    }
+
+    return null
+
+  }, [download, isItemDisabled])
+
   const subLabelLine2 = React.useMemo(() => {
     if (!isItemDisabled && download?.status === constants.STATUS_DOWNLOADING) {
       return `${download.progress}% / ${download.speed}`
@@ -96,7 +105,8 @@ export const OptionsItemTorrent = ({
         ].includes(download.status)
       }
       label={torrent.quality}
-      subLabel={itemSubLabel}
+      labelLine2={labelLine2}
+      subLabel={subLabel}
       subLabelLine2={subLabelLine2}
       onPress={handleOnTorrentClick()}
     />

diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js
@@ -8,6 +8,7 @@ import { getDefaultHeaderHeight } from 'react-navigation-collapsible/lib/src/uti
 import i18n from 'modules/i18n'
 import colors from 'modules/colors'
 import dimensions from 'modules/dimensions'
+import constants from 'modules/constants'
 import useBackButton from 'modules/hooks/useBackButton'
 import { MoviesModeQuery } from 'modules/GraphQL/MoviesGraphQL'
 import { ShowsModeQuery } from 'modules/GraphQL/ShowsGraphQL'
@@ -40,57 +41,44 @@ const styles = StyleSheet.create({
 })
 
 export const useMode = (mode) => React.useMemo(() => {
-  const defaultSortingContent = 'trending'
-  const sortingOptionsContent = ['trending', 'name', 'rating', 'released', 'added', 'year']
-
   switch (mode) {
-    case 'movies':
-      return {
-        query: MoviesModeQuery,
-        sort: defaultSortingContent,
-        sortOptions: sortingOptionsContent,
-      }
-    case 'shows':
-      return {
-        query: ShowsModeQuery,
-        sort: defaultSortingContent,
-        sortOptions: sortingOptionsContent,
-      }
-
-    case 'bookmarks':
-      return {
-        query: BookmarksModeQuery,
-        sort: null,
-      }
+    case constants.MODE_MOVIES:
+      return MoviesModeQuery
+
+    case constants.MODE_SHOWS:
+      return ShowsModeQuery
+
+    case constants.MODE_BOOKMARKS:
+      return BookmarksModeQuery
 
     default:
-      return {
-        query: null,
-        sort: null,
-      }
+      return 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 modeQuery = useMode(mode)
+  const [sort, setSorting] = useState(undefined)
+  const [filter, setFilter] = useState(undefined)
+  const [query, setQuery] = useState(undefined)
 
   const [executeQuery, { loading, data, fetchMore }] = useLazyQuery(
-    modeInfo.query,
+    modeQuery,
     {
       variables: {
         offset: 0,
         query,
         sort,
+        filter,
       },
     },
   )
 
   useBackButton(() => {
-    if (query?.trim()?.length > 0 && navigation.isFocused()) {
+    if ((query?.trim()?.length > 0 || filter) && navigation.isFocused()) {
       setQuery(null)
+      setFilter(undefined)
 
       return true
     }
@@ -183,6 +171,9 @@ export const Mode = ({ mode, navigation }) => {
         flatListRef={flatListRef}
         searchedQuery={query}
         search={setQuery}
+        mode={mode}
+        setSorting={setSorting}
+        setFilter={setFilter}
       />
 
     </View>