Akshay/previously searched

package.json

@@ -32,7 +32,7 @@
     "@babel/preset-env": "^7.16.11",
     "@expo-google-fonts/inter": "^0.2.0",
     "@expo/vector-icons": "^12.0.0",
-    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/datetimepicker": "4.0.0",
     "@react-navigation/bottom-tabs": "^6.0.5",
     "@react-navigation/core": "^6.1.0",

src/screens/HomeScreen.js

@@ -3,9 +3,11 @@ import React, {
   useLayoutEffect,
   useCallback,
   useEffect,
+  alert,
 } from 'react';
 
-import { func, shape, string } from 'prop-types';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { bool, func, shape, string } from 'prop-types';
 import { View, Keyboard, TextInput } from 'react-native';
 
 import Icon from '../components/Icon';
@@ -16,7 +18,7 @@ import { getAllTrees, checkID } from '../database/firebase';
 import ListScreen from './ListScreen';
 import MapScreen from './MapScreen';
 
-function Search({ onQueryChange, query }) {
+function Search({ onQueryChange, query, onSubmitSearch }) {
   return (
     <View
       style={{
@@ -46,27 +48,61 @@ function Search({ onQueryChange, query }) {
         placeholder="Search"
         value={query}
         onChangeText={onQueryChange}
+        onSubmitEditing={onSubmitSearch}
       />
     </View>
   );
 }
 Search.propTypes = {
   onQueryChange: func,
   query: string,
+  onSubmitSearch: bool,
 };
 
 export default function HomeScreen({ navigation }) {
   const [searchQuery, setSearchQuery] = useState('');
   const [isListView, setIsListView] = useState(false);
   const [trees, setTrees] = useState([]);
+  const [searchStack, setSearchStack] = useState([]);
+  const [searchEntered, setEnter] = useState(false);
+
+  const suggestedSearch = (query, first, second) => {
+    if (first.slice(0, query.length) === query) {
+      if (second.slice(0, query.length) === query) {
+        if (first < second) return -1;
+        if (first > second) return 1;
+        return 0;
+      }
+      return -1;
+    }
+    if (second.slice(0, query.length) === query) {
+      return 1;
+    }
+    if (first < second) return -1;
+    if (first > second) return 1;
+    return 0;
+  };
+
   const filtered = trees
     .filter(tree => tree !== null && tree.name && tree.id && checkID(tree.uuid))
     .filter(tree => {
       const query = searchQuery.toLowerCase();
       return (
         tree.name?.toLowerCase().includes(query) || tree.id.includes(query)
       );
+    })
+    .sort((a, b) => {
+      const query = searchQuery.toLowerCase();
+      const firstN = a.name.toLowerCase();
+      const secondN = b.name.toLowerCase();
+      const firstId = a.id.toLowerCase();
+      const secondId = b.id.toLowerCase();
+      if (parseInt(query, 10)) {
+        return suggestedSearch(query, firstId, secondId);
+      }
+      return suggestedSearch(query, firstN, secondN);
     });
+
   const toggleView = useCallback(() => {
     setIsListView(!isListView);
   }, [isListView]);
@@ -99,6 +135,50 @@ export default function HomeScreen({ navigation }) {
   const onSearchChange = searchValue => {
     setSearchQuery(searchValue);
     setIsListView(true);
+    setEnter(false);
+  };
+
+  const storeSearchStack = async value => {
+    try {
+      const jsonValue = JSON.stringify(value);
+      await AsyncStorage.setItem('@storage_Key', jsonValue);
+    } catch (e) {
+      alert('Could not store search searchStack');
+    }
+  };
+
+  const getSearchStack = async () => {
+    try {
+      const jsonValue = await AsyncStorage.getItem('@storage_Key');
+      jsonValue != null
+        ? setSearchStack(JSON.parse(jsonValue))
+        : setSearchStack([]);
+    } catch (e) {
+      alert('Could not get searchStack');
+    }
+  };
+
+  useEffect(() => {
+    getSearchStack();
+  }, []);
+
+  const editSearchHistory = newSearch => {
+    if (searchStack?.filter(e => e.uuid === newSearch.uuid).length > 0) {
+      const foundInd = searchStack.findIndex(el => el.uuid === newSearch.uuid);
+      searchStack.splice(foundInd, 1);
+    }
+    searchStack.unshift(newSearch);
+    if (searchStack.length > 5) {
+      searchStack.pop();
+    }
+    storeSearchStack(searchStack);
+  };
+
+  const submitSearch = () => {
+    if (filtered.length !== 0) {
+      editSearchHistory(filtered[0]);
+    }
+    setEnter(true);
   };
 
   return (
@@ -115,6 +195,9 @@ export default function HomeScreen({ navigation }) {
             right: 0,
             zIndex: isListView ? 5 : 0,
           }}
+          searchStack={searchStack}
+          searchQuery={searchQuery}
+          searchEntered={searchEntered}
         />
         <MapScreen
           data={filtered}
@@ -126,13 +209,18 @@ export default function HomeScreen({ navigation }) {
           }}
         />
         <Inset style={{ marginTop: 48, position: 'absolute', zIndex: 100 }}>
-          <Search onQueryChange={onSearchChange} query={searchQuery} />
+          <Search
+            onQueryChange={onSearchChange}
+            query={searchQuery}
+            onSubmitSearch={submitSearch}
+          />
           <ViewToggle setIsListView={setIsListView} isListView={isListView} />
         </Inset>
       </View>
     </ViewContainer>
   );
 }
+
 HomeScreen.propTypes = {
   navigation: shape({
     navigate: func,

src/screens/ListScreen.js

@@ -1,18 +1,19 @@
 import React from 'react';
 
-import { arrayOf, func, shape } from 'prop-types';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { array, bool, func, number, shape, string } from 'prop-types';
 import {
   ScrollView,
   StyleSheet,
   Text,
   View,
   ViewPropTypes,
+  alert,
 } from 'react-native';
 
 import Inset from '../components/Inset';
 import SearchCard from '../components/SearchCard';
 import { color } from '../components/ui/colors';
-import Tree from '../customprops';
 
 const styles = StyleSheet.create({
   list: {
@@ -23,35 +24,125 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function ListScreen({ navigation, style, data }) {
+const storeSearchStack = async value => {
+  try {
+    const jsonValue = JSON.stringify(value);
+    await AsyncStorage.setItem('@storage_Key', jsonValue);
+  } catch (e) {
+    alert('Could not store searchStack');
+  }
+};
+
+const SearchCardsComp = ({
+  scroll,
+  navigation,
+  marginBottom,
+  marginTop,
+  label,
+  labelAlign,
+  searchStack,
+}) => (
+  <View>
+    <Inset>
+      <Text
+        style={{
+          fontSize: 15,
+          color: '#3b3f51',
+          marginTop,
+          textAlign: labelAlign,
+        }}
+      >
+        {label}
+      </Text>
+    </Inset>
+    <View style={{ marginTop: 10, marginBottom }}>
+      {scroll.map(tree => {
+        const { uuid, name, comments } = tree;
+        return (
+          <SearchCard
+            key={uuid}
+            name={name}
+            comments={comments}
+            onPress={() => {
+              navigation.push('TreeScreen', { uuid });
+              if (searchStack?.filter(e => e.uuid === tree.uuid).length > 0) {
+                const foundInd = searchStack.findIndex(
+                  el => el.uuid === tree.uuid,
+                );
+                searchStack.splice(foundInd, 1);
+              }
+              searchStack.unshift(tree);
+              if (searchStack.length > 5) {
+                searchStack.pop();
+              }
+              storeSearchStack(searchStack);
+              // }
+            }}
+          />
+        );
+      })}
+    </View>
+  </View>
+);
+
+SearchCardsComp.propTypes = {
+  scroll: shape({
+    push: func,
+  }),
+  navigation: shape({
+    push: func,
+  }),
+  marginBottom: number,
+  marginTop: number,
+  label: string,
+  labelAlign: string,
+  // eslint-disable-next-line react/forbid-prop-types
+  searchStack: array,
+};
+
+export default function ListScreen({
+  navigation,
+  style,
+  data,
+  searchStack,
+  searchQuery,
+  searchEntered,
+}) {
+  let text;
+  if (searchQuery.length === 0) {
+    text = 'All trees';
+  } else if (searchEntered === true) {
+    text = `${data.length} ${data.length === 1 ? 'result' : 'results'}`;
+  } else if (data.length === 0) {
+    text = 'No matches found for your search. Try again!';
+  } else {
+    text = 'Suggestions';
+  }
   return (
     <ScrollView style={[styles.list, style]}>
-      <Inset>
-        <Text
-          style={{
-            fontSize: 11,
-            color: '#3b3f51',
-            marginTop: 48,
-            textAlign: 'right',
-          }}
-        >
-          {`${data.length} ${data.length === 1 ? 'result' : 'results'}`}
-        </Text>
-      </Inset>
-      <View style={{ marginTop: 10, marginBottom: 248 }}>
-        {data.map(tree => {
-          const { uuid, name, comments, images } = tree;
-          return (
-            <SearchCard
-              key={uuid}
-              uuid={uuid}
-              previewImage={images && images[0]}
-              name={name}
-              comments={comments}
-              onPress={() => navigation.push('TreeScreen', { uuid })}
-            />
-          );
-        })}
+      <View>
+        {searchQuery.length === 0 && searchStack.length !== 0 ? (
+          <SearchCardsComp
+            scroll={searchStack}
+            searchStack={searchStack}
+            navigation={navigation}
+            marginBottom={0}
+            marginTop={50}
+            label="Recents"
+            labelAlign="left"
+          />
+        ) : null}
+      </View>
+      <View>
+        <SearchCardsComp
+          scroll={data}
+          searchStack={searchStack}
+          navigation={navigation}
+          marginBottom={140}
+          marginTop={10}
+          label={text}
+          labelAlign={searchEntered === true ? 'right' : 'left'}
+        />
       </View>
     </ScrollView>
   );
@@ -62,5 +153,11 @@ ListScreen.propTypes = {
     push: func,
   }),
   style: ViewPropTypes.style,
-  data: arrayOf(Tree),
+  // eslint-disable-next-line react/forbid-prop-types
+  data: array,
+  searchStack: shape({
+    push: func,
+  }),
+  searchQuery: string,
+  searchEntered: bool,
 };