From 25cea64f1d025c2910e6251f39cebde280c31f48 Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Mon, 26 Jul 2021 15:34:40 +0900
Subject: [PATCH] search item press events

---
 app/components/ListItem.tsx           | 28 +++++++++++++++++++++
 app/navigation/BottomTabNavigator.tsx |  2 ++
 app/screens/LibraryArtists.tsx        | 19 +++-----------
 app/screens/LibraryPlaylists.tsx      | 20 +++------------
 app/screens/Search.tsx                | 36 ++++++++++++++++-----------
 5 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/app/components/ListItem.tsx b/app/components/ListItem.tsx
index c8f2f0a..cc72bef 100644
--- a/app/components/ListItem.tsx
+++ b/app/components/ListItem.tsx
@@ -2,6 +2,7 @@ import { ListableItem } from '@app/models/music'
 import { currentTrackAtom } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useState } from 'react'
 import { GestureResponderEvent, StyleSheet, Text, View } from 'react-native'
@@ -45,6 +46,7 @@ const ListItem: React.FC<{
   subtitle?: string
 }> = ({ item, onPress, showArt, showStar, subtitle, listStyle }) => {
   const [starred, setStarred] = useState(false)
+  const navigation = useNavigation()
 
   showStar = showStar === undefined ? true : showStar
   listStyle = listStyle || 'small'
@@ -52,6 +54,32 @@ const ListItem: React.FC<{
   const artSource = item.itemType === 'artist' ? { artistId: item.id } : { coverArt: item.coverArt }
   const sizeStyle = listStyle === 'big' ? bigStyles : smallStyles
 
+  if (!onPress) {
+    switch (item.itemType) {
+      case 'album':
+        onPress = () => navigation.navigate('AlbumView', { id: item.id, title: item.name })
+        break
+      case 'artist':
+        onPress = () => navigation.navigate('ArtistView', { id: item.id, title: item.name })
+        break
+      case 'playlist':
+        onPress = () => navigation.navigate('PlaylistView', { id: item.id, title: item.name })
+        break
+    }
+  }
+
+  if (!subtitle) {
+    switch (item.itemType) {
+      case 'song':
+      case 'album':
+        subtitle = item.artist
+        break
+      case 'playlist':
+        subtitle = item.comment
+        break
+    }
+  }
+
   return (
     <View style={[styles.container, sizeStyle.container]}>
       <PressableOpacity onPress={onPress} style={styles.item}>
diff --git a/app/navigation/BottomTabNavigator.tsx b/app/navigation/BottomTabNavigator.tsx
index c88c798..421e250 100644
--- a/app/navigation/BottomTabNavigator.tsx
+++ b/app/navigation/BottomTabNavigator.tsx
@@ -57,6 +57,7 @@ const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
 const styles = StyleSheet.create({
   stackheaderStyle: {
     backgroundColor: colors.gradient.high,
+    // backgroundColor: 'transparent',
   },
   stackheaderTitleStyle: {
     fontSize: 18,
@@ -71,6 +72,7 @@ const itemScreenOptions = {
   headerHideShadow: true,
   headerTintColor: 'white',
   headerTitleStyle: styles.stackheaderTitleStyle,
+  // headerTranslucent: true,
 }
 
 function createTabStackNavigator(Component: React.ComponentType<any>) {
diff --git a/app/screens/LibraryArtists.tsx b/app/screens/LibraryArtists.tsx
index df8df35..ff77ebb 100644
--- a/app/screens/LibraryArtists.tsx
+++ b/app/screens/LibraryArtists.tsx
@@ -2,26 +2,13 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { Artist } from '@app/models/music'
 import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
-import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 
-const ArtistItem = React.memo<{ item: Artist }>(({ item }) => {
-  const navigation = useNavigation()
-
-  return (
-    <ListItem
-      item={item}
-      showArt={true}
-      showStar={false}
-      listStyle="big"
-      onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}
-    />
-  )
-})
-
-const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItem item={item} />
+const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
+  <ListItem item={item} showArt={true} showStar={false} listStyle="big" />
+)
 
 const ArtistsList = () => {
   const artists = useAtomValue(artistsAtom)
diff --git a/app/screens/LibraryPlaylists.tsx b/app/screens/LibraryPlaylists.tsx
index 53a350f..b99c1d0 100644
--- a/app/screens/LibraryPlaylists.tsx
+++ b/app/screens/LibraryPlaylists.tsx
@@ -2,27 +2,13 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { PlaylistListItem } from '@app/models/music'
 import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } from '@app/state/music'
-import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 
-const PlaylistItem = React.memo<{ item: PlaylistListItem }>(({ item }) => {
-  const navigation = useNavigation()
-
-  return (
-    <ListItem
-      item={item}
-      showArt={true}
-      showStar={false}
-      listStyle="big"
-      subtitle={item.comment}
-      onPress={() => navigation.navigate('PlaylistView', { id: item.id, title: item.name })}
-    />
-  )
-})
-
-const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => <PlaylistItem item={item} />
+const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
+  <ListItem item={item} showArt={true} showStar={false} listStyle="big" />
+)
 
 const PlaylistsList = () => {
   const playlists = useAtomValue(playlistsAtom)
diff --git a/app/screens/Search.tsx b/app/screens/Search.tsx
index fc1d498..11af06e 100644
--- a/app/screens/Search.tsx
+++ b/app/screens/Search.tsx
@@ -2,8 +2,9 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
-import { ListableItem, SearchResults } from '@app/models/music'
+import { ListableItem, SearchResults, Song } from '@app/models/music'
 import { searchResultsAtom, searchResultsUpdatingAtom, useUpdateSearchResults } from '@app/state/music'
+import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useAtomValue } from 'jotai/utils'
@@ -11,17 +12,18 @@ import debounce from 'lodash.debounce'
 import React, { useCallback, useMemo, useState } from 'react'
 import { ActivityIndicator, StatusBar, StyleSheet, TextInput, View } from 'react-native'
 
-function getSubtitle(item: ListableItem) {
-  switch (item.itemType) {
-    case 'playlist':
-      return item.comment
-    case 'album':
-    case 'song':
-      return item.artist
-    default:
-      return undefined
-  }
-}
+const SongItem = React.memo<{ item: Song }>(({ item }) => {
+  const setQueue = useSetQueue()
+
+  return (
+    <ListItem
+      item={item}
+      showArt={true}
+      showStar={false}
+      onPress={() => setQueue([item], `Search: ${item.title}`, 0)}
+    />
+  )
+})
 
 const ResultsCategory = React.memo<{
   name: string
@@ -34,9 +36,13 @@ const ResultsCategory = React.memo<{
   return (
     <>
       <Header>{name}</Header>
-      {items.map(a => (
-        <ListItem key={a.id} item={a} showArt={true} showStar={false} subtitle={getSubtitle(a)} />
-      ))}
+      {items.map(a =>
+        a.itemType === 'song' ? (
+          <SongItem key={a.id} item={a} />
+        ) : (
+          <ListItem key={a.id} item={a} showArt={true} showStar={false} />
+        ),
+      )}
     </>
   )
 })