Merge pull request #535 from andrew-bierman/fix/refactor-search-input…

…-initial

moving SearchInput logic to custom hook, adding to component

client/components/SearchInput.tsx

@@ -1,151 +1,25 @@
-import {
-  VStack,
-  Input,
-  Icon,
-  Text,
-  ScrollView,
-  HStack,
-  List,
-  View,
-  Pressable,
-} from 'native-base';
-import { RStack, RInput, RButton, RText, RScrollView } from '@packrat/ui';
-import { MaterialIcons } from '@expo/vector-icons';
-import useTheme from '../hooks/useTheme';
+import React from 'react';
 import { Platform } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
-import { useState, useEffect } from 'react';
-import { fetchTrails } from '../store/trailsStore';
-import { fetchParks } from '../store/parksStore';
-import {
-  setSelectedSearchResult,
-  clearSearchResults,
-  fetchPhotonSearchResults,
-} from '../store/searchStore';
-import {
-  fetchWeather,
-  fetchWeatherWeek,
-  setLatLng,
-  setSearchResult,
-} from '../store/weatherStore';
+import { MaterialIcons } from '@expo/vector-icons';
+import useSearchInput from '~/hooks/search/useSearchInput';
+import useTheme from '~/hooks/useTheme';
 import useCustomStyles from '~/hooks/useCustomStyles';
-import { setFilteredTrails, setTrails } from '~/store/trailsStore_copy'; // REMOVE
-import useTrails from '~/hooks/trails';
-import useParks from '~/hooks/parks';
-import { usePhotonDetail } from '~/hooks/photonDetail';
-import { useFetchWeather, useFetchWeatherWeak } from '~/hooks/weather';
+import { RStack, RInput, RButton, RText, RScrollView } from '@packrat/ui';
+import { View, Pressable } from 'react-native';
 
 export const SearchInput = ({ onSelect, placeholder }) => {
-  const [searchString, setSearchString] = useState('');
-  console.log(
-    '🚀 ~ file: SearchInput.tsx:40 ~ SearchInput ~ searchString:',
-    searchString,
-  );
-  const [isLoadingMobile, setIsLoadingMobile] = useState(false);
-  const { selectedSearch } = useSelector((state) => state.weather);
-  // const [selectedSearch, setSelectedSearch] = useState('');
-  const [showSearchResults, setShowSearchResults] = useState(false);
-
-  const { refetch, data, isError, isLoading } = usePhotonDetail(
+  const {
     searchString,
+    setSearchString,
     showSearchResults,
-  );
+    data,
+    handleSearchResultClick,
+    handleClearSearch,
+    isLoadingMobile,
+  } = useSearchInput(onSelect);
 
   const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadStyles());
-  // const [selectedSearchResult, setSelectedSearchResult] = useState({});
-  // const searchResults =
-  //   useSelector((state) => state.search.searchResults) || [];
-  // const [latLng,setLatLng] = useState({});
-
-  const selectedSearchResult =
-    useSelector((state) => state.search.selectedSearchResult) || {};
-  console.log(
-    '🚀 ~ file: SearchInput.tsx:59 ~ SearchInput ~ selectedSearchResult:',
-    selectedSearchResult,
-  );
-
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    setShowSearchResults(searchString.length > 0);
-    const timeout = setTimeout(() => {
-      if (!searchString) return;
-      refetch();
-      // dispatch(fetchPhotonSearchResults(searchString));
-    }, 2000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [searchString, dispatch]);
-
-  const getTrailsParksAndWeatherDetails = async () => {
-    console.log(selectedSearchResult, 'selected search result');
-    if (
-      !selectedSearchResult ||
-      Object.keys(selectedSearchResult).length === 0
-    ) {
-      return;
-    }
-
-    setIsLoadingMobile(true);
-
-    const {
-      geometry: { coordinates },
-      properties,
-    } = selectedSearchResult;
-    const [lon, lat] = coordinates;
-    if (!lat || !lon) {
-      setIsLoadingMobile(false);
-      return;
-    } else {
-      dispatch(setLatLng({ lat, lon }));
-    }
-
-    try {
-      // console.log('before parksData:', parksData);
-      // console.log('after parksData:', parksData);
-      // console.log('parksData:', parksData);
-      // console.log('data:', data);
-      // console.log('error:', error);
-      // console.log('isLoading:', isLoading);
-      // await Promise.all([
-      //   // dispatch(fetchTrails({ lat, lon, selectedSearch })),
-      //   // dispatch(fetchParks({ lat, lon, selectedSearch })),
-      //   dispatch(fetchWeather({ lat, lon })),
-      //   dispatch(fetchWeatherWeek({ lat, lon })),
-      // ]);
-    } catch (error) {
-      console.error(error);
-    }
-
-    setIsLoadingMobile(false);
-  };
-
-  // useEffect(() => {
-
-  //   const timeout = setTimeout(getTrailsParksAndWeatherDetails, 1000);
-
-  //   return () => {
-  //     clearTimeout(timeout);
-  //   };
-  // }, [selectedSearch, selectedSearchResult, dispatch]);
-
-  const handleSearchResultClick = (result, index) => {
-    const {
-      properties: { name, osm_id },
-    } = result;
-    // console.log(result, 'line 136');
-    dispatch(setSearchResult(name));
-    setSearchString(name);
-    setShowSearchResults(false);
-    dispatch(setSelectedSearchResult(result));
-
-    if (onSelect) {
-      onSelect(result);
-    }
-  };
+  const styles = useCustomStyles(loadStyles);
 
   return Platform.OS === 'web' ? (
     <RStack style={styles.container}>

client/hooks/search/index.ts

@@ -0,0 +1 @@
+export * from './useSearchInput';

client/hooks/search/useSearchInput.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  setSelectedSearchResult,
+  clearSearchResults,
+} from '../../store/searchStore';
+import { setLatLng } from '../../store/weatherStore';
+import { usePhotonDetail } from '~/hooks/photonDetail';
+
+const useSearchInput = (onSelect) => {
+  const [searchString, setSearchString] = useState('');
+  const [showSearchResults, setShowSearchResults] = useState(false);
+  const [isLoadingMobile, setIsLoadingMobile] = useState(false);
+  const selectedSearchResult =
+    useSelector((state) => state.search.selectedSearchResult) || {};
+
+  const { refetch, data } = usePhotonDetail(searchString, showSearchResults);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    setShowSearchResults(searchString.length > 0);
+    const timeout = setTimeout(() => {
+      if (!searchString) return;
+      refetch();
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, [searchString]);
+
+  const handleSearchResultClick = (result) => {
+    dispatch(setSelectedSearchResult(result));
+    setSearchString(result.properties.name);
+    setShowSearchResults(false);
+    if (onSelect) {
+      onSelect(result);
+    }
+  };
+
+  const handleClearSearch = () => {
+    setShowSearchResults(false);
+    setSearchString('');
+    dispatch(clearSearchResults());
+  };
+
+  return {
+    searchString,
+    setSearchString,
+    showSearchResults,
+    setShowSearchResults,
+    selectedSearchResult,
+    setSelectedSearchResult,
+    data,
+    handleSearchResultClick,
+    handleClearSearch,
+    isLoadingMobile,
+  };
+};
+
+export default useSearchInput;