Search edits (#86)

* Fix search header shadow

* Prevent udpate search history before result

* Put search history in ref

* Reset the results on search clear

packages/audius-mobile-client/src/components/header/Header.tsx

@@ -20,8 +20,8 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontFamily: 'AvenirNextLTPro-Heavy',
     textShadowColor: 'rgba(126, 27, 204, 0.15)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 4
   }
 })
 

packages/audius-mobile-client/src/components/search/SearchHistory.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import {
   StyleSheet,
@@ -113,31 +113,42 @@ const SearchHistoryItem = ({ text }: SearchHistoryItemProps) => {
 }
 
 const SearchHistory = () => {
-  const { searchHistory, clearHistory } = useSearchHistory()
+  const { searchHistory, clearHistory, hasFetched } = useSearchHistory()
+  const [displayHistory, setDisplayHistory] = useState(searchHistory.current)
+
+  // Only update history on component load and clearing of search history
+  useEffect(() => {
+    if (hasFetched) setDisplayHistory(searchHistory.current)
+  }, [hasFetched, setDisplayHistory])
+
+  const onClearHistory = useCallback(() => {
+    setDisplayHistory([])
+    clearHistory()
+  }, [clearHistory, setDisplayHistory])
 
   const backgroundColor = useColor('neutralLight8')
   const containerStyles = useTheme(styles.container, {
     borderTopColor: 'neutralLight8'
   })
   const clearTextStyle = useTheme(styles.clearText, { color: 'neutralLight4' })
 
-  if (!searchHistory || searchHistory.length === 0) {
+  if (!displayHistory || displayHistory.length === 0) {
     return <EmptySearch />
   }
 
   return (
     <View style={containerStyles} onTouchStart={Keyboard.dismiss}>
       <FlatList
         keyboardShouldPersistTaps={'always'}
-        data={searchHistory.concat('clear')}
+        data={displayHistory.concat('clear')}
         keyExtractor={(item, idx) => `${item}-${idx}`}
         renderItem={({ item }) =>
           item !== 'clear' ? (
             <SearchHistoryItem key={item} text={item} />
           ) : (
             <TouchableHighlight
               key={'clear'}
-              onPress={clearHistory}
+              onPress={onClearHistory}
               style={styles.clearTouchable}
               underlayColor={backgroundColor}
               activeOpacity={0.8}

packages/audius-mobile-client/src/store/search/hooks.ts

@@ -1,5 +1,5 @@
 import AsyncStorage from '@react-native-community/async-storage'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import * as searchActions from './actions'
 import { getSearchHistory } from './selectors'
@@ -30,14 +30,21 @@ export const setSearchHistory = async (history: string[]) => {
 const useSearchHistory = () => {
   const searchHistory = useSelector(getSearchHistory)
   const dispatch = useDispatch()
+  const [hasFetched, setHasFetched] = useState(false)
+
+  const searchHistoryInstance = useRef(searchHistory)
+  useEffect(() => {
+    searchHistoryInstance.current = searchHistory
+  }, [searchHistory])
 
   useEffect(() => {
     const work = async () => {
       const history = await fetchSearchHistory()
       dispatch(searchActions.setSearchHistory(history))
+      setHasFetched(true)
     }
     work()
-  }, [dispatch])
+  }, [dispatch, setHasFetched])
 
   const clearHistory = useCallback(async () => {
     dispatch(searchActions.setSearchHistory([]))
@@ -57,9 +64,10 @@ const useSearchHistory = () => {
   )
 
   return {
-    searchHistory,
+    searchHistory: searchHistoryInstance,
     clearHistory,
-    appendSearchItem
+    appendSearchItem,
+    hasFetched
   }
 }
 

packages/audius-mobile-client/src/store/search/reducer.ts

@@ -55,10 +55,17 @@ const reducer = (state: SearchState = initialState, action: SearchActions) => {
         isOpen: false
       }
     case UPDATE_QUERY: {
-      return {
+      const updatedState = {
         ...state,
         query: action.query
       }
+      if (action.query === '') {
+        updatedState.results = {
+          ...initialState.results
+        }
+        updatedState.resultQuery = ''
+      }
+      return updatedState
     }
     case SUBMIT_QUERY: {
       return {