added search results "more" screen

app/screens/Search.tsx

@@ -1,3 +1,4 @@
+import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
@@ -9,6 +10,7 @@ import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
 import debounce from 'lodash.debounce'
 import React, { useCallback, useMemo, useState } from 'react'
 import { ActivityIndicator, StatusBar, StyleSheet, TextInput, View } from 'react-native'
@@ -30,8 +32,11 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
 
 const ResultsCategory = React.memo<{
   name: string
+  query: string
   items: ListableItem[]
-}>(({ name, items }) => {
+}>(({ name, query, items }) => {
+  const navigation = useNavigation()
+
   if (items.length === 0) {
     return <></>
   }
@@ -46,39 +51,53 @@ const ResultsCategory = React.memo<{
           <ListItem key={a.id} item={a} showArt={true} showStar={false} />
         ),
       )}
+      {items.length === 5 && (
+        <Button
+          title="More..."
+          buttonStyle="hollow"
+          style={styles.more}
+          onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
+        />
+      )}
     </>
   )
 })
 
 const Results = React.memo<{
   results: SearchResults
-}>(({ results }) => {
+  query: string
+}>(({ results, query }) => {
   return (
     <>
-      <ResultsCategory name="Artists" items={results.artists} />
-      <ResultsCategory name="Albums" items={results.albums} />
-      <ResultsCategory name="Songs" items={results.songs} />
+      <ResultsCategory name="Artists" query={query} items={results.artists} />
+      <ResultsCategory name="Albums" query={query} items={results.albums} />
+      <ResultsCategory name="Songs" query={query} items={results.songs} />
     </>
   )
 })
 
 const Search = () => {
-  const updateSearch = useStore(selectMusic.fetchSearchResults)
-  const clearSearch = useStore(selectMusic.clearSearchResults)
-  const updating = useStore(selectMusic.searchResultsUpdating)
-  const results = useStore(selectMusic.searchResults)
+  const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
+  const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
+  const [refreshing, setRefreshing] = useState(false)
+  const [text, setText] = useState('')
 
   useActiveServerRefresh(
     useCallback(() => {
       setText('')
-      clearSearch()
-    }, [clearSearch]),
+      setResults({ artists: [], albums: [], songs: [] })
+    }, []),
   )
 
-  const [text, setText] = useState('')
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedonUpdateSearch = useMemo(() => debounce(updateSearch, 400), [])
+  const debouncedonUpdateSearch = useMemo(
+    () =>
+      debounce(async (query: string) => {
+        setRefreshing(true)
+        setResults(await fetchSearchResults(query))
+        setRefreshing(false)
+      }, 400),
+    [fetchSearchResults],
+  )
 
   const onChangeText = useCallback(
     (value: string) => {
@@ -102,9 +121,14 @@ const Search = () => {
             value={text}
             onChangeText={onChangeText}
           />
-          <ActivityIndicator animating={updating} size="small" color={colors.text.secondary} style={styles.activity} />
+          <ActivityIndicator
+            animating={refreshing}
+            size="small"
+            color={colors.text.secondary}
+            style={styles.activity}
+          />
         </View>
-        {resultsCount > 0 ? <Results results={results} /> : <NothingHere style={styles.noResults} />}
+        {resultsCount > 0 ? <Results results={results} query={text} /> : <NothingHere style={styles.noResults} />}
       </View>
     </GradientScrollView>
   )
@@ -119,6 +143,7 @@ const styles = StyleSheet.create({
   },
   content: {
     paddingHorizontal: 20,
+    paddingBottom: 20,
     alignItems: 'stretch',
   },
   inputBar: {
@@ -147,6 +172,10 @@ const styles = StyleSheet.create({
     fontFamily: font.regular,
     fontSize: 14,
   },
+  more: {
+    marginTop: 5,
+    marginBottom: 10,
+  },
 })
 
 export default Search

app/screens/SearchResultsView.tsx

@@ -0,0 +1,93 @@
+import GradientFlatList from '@app/components/GradientFlatList'
+import ListItem from '@app/components/ListItem'
+import { useFetchPaginatedList } from '@app/hooks/list'
+import { AlbumListItem, Artist, Song } from '@app/models/music'
+import { selectMusic } from '@app/state/music'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
+import { useNavigation } from '@react-navigation/native'
+import React, { useCallback, useEffect } from 'react'
+import { StyleSheet } from 'react-native'
+
+type SearchListItemType = AlbumListItem | Song | Artist
+
+const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
+  const setQueue = useStore(selectTrackPlayer.setQueue)
+
+  let onPress
+  if (item.itemType === 'song') {
+    onPress = () => setQueue([item], item.title, 'song', item.id, 0)
+  }
+
+  return (
+    <ListItem
+      item={item}
+      contextId={item.id}
+      queueId={0}
+      showArt={true}
+      showStar={false}
+      listStyle="small"
+      onPress={onPress}
+    />
+  )
+}
+
+const SearchResultsRenderItem: React.FC<{ item: SearchListItemType }> = ({ item }) => <ResultsListItem item={item} />
+
+const SearchResultsView: React.FC<{
+  query: string
+  type: 'album' | 'artist' | 'song'
+}> = ({ query, type }) => {
+  const navigation = useNavigation()
+  const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
+  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>(
+    useCallback(
+      (size, offset) =>
+        fetchSearchResults(query, type, size, offset).then(results => {
+          switch (type) {
+            case 'album':
+              return results.albums
+            case 'artist':
+              return results.artists
+            case 'song':
+              return results.songs
+            default:
+              return []
+          }
+        }),
+      [fetchSearchResults, query, type],
+    ),
+    50,
+  )
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: `Search: "${query}"`,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <GradientFlatList
+      contentContainerStyle={styles.listContent}
+      data={list}
+      renderItem={SearchResultsRenderItem}
+      keyExtractor={item => item.id}
+      onRefresh={refresh}
+      refreshing={refreshing}
+      overScrollMode="never"
+      onEndReached={fetchNextPage}
+      onEndReachedThreshold={1}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  listContent: {
+    minHeight: '100%',
+    paddingHorizontal: 10,
+    paddingTop: 6,
+  },
+})
+
+export default SearchResultsView