updated branch with hooks of pack screens

client/app/(app)/items/index.js

@@ -13,6 +13,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getItemsGlobal } from '../../../store/globalItemsStore';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import { useFetchGlobalItems } from '~/hooks/globalItems';
 
 export default function Items() {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
@@ -21,19 +22,23 @@ export default function Items() {
   // page number for pagination
   const [page, setPage] = useState(1);
   // it will be used as a dependency for reloading the data in case of some modifications
-  const [refetch, setRefetch] = useState(false);
+  // const [refetch, setRefetch] = useState(false);
 
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     UseTheme();
-  const data = useSelector((state) => state.globalItems);
 
-  const isLoading = useSelector((state) => state.globalItems.isLoading);
-  const isError = useSelector((state) => state.globalItems.isError);
 
+  const { data, isLoading, isError, refetch } = useFetchGlobalItems(limit, page);
+  console.log("🚀 ~ file: index.js:32 ~ Items ~ data:", data)
+  // const data = useSelector((state) => state.globalItems);
+
+  // const isLoading = useSelector((state) => state.globalItems.isLoading);
+  // const isError = useSelector((state) => state.globalItems.isError);
+
   const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(getItemsGlobal({ limit, page }));
-  }, [limit, page, refetch]);
+  // useEffect(() => {
+    // dispatch(getItemsGlobal({ limit, page }));
+  // }, [limit, page]);
 
   return (
     <ScrollView>
@@ -95,23 +100,23 @@ export default function Items() {
             onCancel={setIsAddItemModalOpen}
           >
             <AddItemGlobal
-              setRefetch={setRefetch}
-              refetch={refetch}
+              setRefetch={() => refetch()}
+              // refetch={refetch}
               setIsAddItemModalOpen={setIsAddItemModalOpen}
             />
           </CustomModal>
         </>
-        {!isError && Array.isArray(data.globalItems.items) ? (
+        {!isError ? (
           <ItemsTable
             limit={limit}
             setLimit={setLimit}
             page={page}
             setPage={setPage}
             data={data}
             isLoading={isLoading}
-            totalPages={data?.globalItems?.totalPages}
+            totalPages={data?.totalPages}
             refetch={refetch}
-            setRefetch={setRefetch}
+            setRefetch={() => refetch()}
           />
         ) : null}
       </Box>

client/app/_layout.js

@@ -1,6 +1,7 @@
 import { Slot } from 'expo-router';
-
+import { useState } from 'react';
 import { Platform, View } from 'react-native';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import Navigation from '../screens/Navigation';
 
@@ -14,19 +15,47 @@ import { ThemeProvider } from '../context/theme';
 import FlashMessage from 'react-native-flash-message';
 import Footer from '../components/footer/Footer';
 
+import { queryTrpc, getToken } from '../trpc';
+import { httpBatchLink } from '@trpc/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { api } from '~/constants/api';
+
+import { TrpcQueryProvider } from '../context/tRPC';
+
 export default function HomeLayout() {
+  const queryClient = new QueryClient();
+
+  const trpcClient = queryTrpc.createClient({
+    links: [
+      httpBatchLink({
+        url: `${api}/trpc`,
+        async headers() {
+          const token = await getToken('session');
+          return {
+            authorization: token ? `Bearer ${token}` : '',
+          };
+        },
+      }),
+    ],
+  });
+
   return (
     <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <SessionProvider>
-          <ThemeProvider>
-            <FlashMessage position="top" />
-            <Navigation />
-            <Slot />
-            {/* {Platform.OS === 'web' ? <Footer /> : null} */}
-          </ThemeProvider>
-        </SessionProvider>
-      </PersistGate>
+      <queryTrpc.Provider client={trpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <PersistGate loading={null} persistor={persistor}>
+            <SessionProvider>
+              <ThemeProvider>
+                <FlashMessage position="top" />
+                <Navigation />
+                <Slot />
+                {/* {Platform.OS === 'web' ? <Footer /> : null} */}
+              </ThemeProvider>
+            </SessionProvider>
+          </PersistGate>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+      </queryTrpc.Provider>
     </Provider>
   );
 }

client/components/SearchInput.js

@@ -18,36 +18,46 @@ import { useState, useEffect } from 'react';
 import { fetchTrails } from '../store/trailsStore';
 import { fetchParks } from '../store/parksStore';
 import {
-  setSelectedSearchResult,
+  // setSelectedSearchResult,
   clearSearchResults,
   fetchPhotonSearchResults,
 } from '../store/searchStore';
-import { fetchWeather, fetchWeatherWeek } from '../store/weatherStore';
+import { fetchWeather, fetchWeatherWeek, setLatLng, setSearchResult } from '../store/weatherStore';
 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';
 
 export const SearchInput = ({ onSelect, placeholder }) => {
   const [searchString, setSearchString] = useState('');
   const [isLoadingMobile, setIsLoadingMobile] = useState(false);
-  const [selectedSearch, setSelectedSearch] = useState('');
-
+  const { selectedSearch } = useSelector(state => state.weather)
+  // const [selectedSearch, setSelectedSearch] = useState('');
+  const [showSearchResults, setShowSearchResults] = useState(false);
+
+  const { refetch, data, isError, isLoading } = usePhotonDetail(searchString,showSearchResults);
+
   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) || {};
 
-  const selectedSearchResult =
-    useSelector((state) => state.search.selectedSearchResult) || {};
-
-  const [showSearchResults, setShowSearchResults] = useState(false);
 
   const dispatch = useDispatch();
-
+  
   useEffect(() => {
     setShowSearchResults(searchString.length > 0);
-
     const timeout = setTimeout(() => {
       if (!searchString) return;
-      dispatch(fetchPhotonSearchResults(searchString));
+      refetch();
+      // dispatch(fetchPhotonSearchResults(searchString));
     }, 2000);
 
     return () => {
@@ -56,6 +66,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
   }, [searchString, dispatch]);
 
   const getTrailsParksAndWeatherDetails = async () => {
+    console.log(selectedSearchResult, 'selected search result')
     if (
       !selectedSearchResult ||
       Object.keys(selectedSearchResult).length === 0
@@ -73,15 +84,31 @@ export const SearchInput = ({ onSelect, placeholder }) => {
     if (!lat || !lon) {
       setIsLoadingMobile(false);
       return;
+    } else {
+     dispatch(setLatLng({ lat, lon }))
     }
+
 
     try {
-      await Promise.all([
-        dispatch(fetchTrails({ lat, lon, selectedSearch })),
-        dispatch(fetchParks({ lat, lon, selectedSearch })),
-        dispatch(fetchWeather({ lat, lon })),
-        dispatch(fetchWeatherWeek({ lat, lon })),
-      ]);
+
+
+      // 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);
     }
@@ -90,6 +117,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
   };
 
   useEffect(() => {
+    console.log('why not here?')
     const timeout = setTimeout(getTrailsParksAndWeatherDetails, 1000);
 
     return () => {
@@ -101,11 +129,13 @@ export const SearchInput = ({ onSelect, placeholder }) => {
     const {
       properties: { name, osm_id },
     } = result;
-
-    setSelectedSearch(name);
+    // console.log(result, 'line 136');
+    dispatch(setSearchResult(name));
     setSearchString(name);
     setShowSearchResults(false);
-    dispatch(setSelectedSearchResult(result));
+    setSelectedSearchResult(result);
+
+    // dispatch(setSelectedSearchResult(result));
 
     if (onSelect) {
       onSelect(result);
@@ -167,7 +197,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
         </RStack>
 
         <RStack style={{ position: 'relative' }}>
-          {showSearchResults && searchResults?.length > 0 && (
+          {data && data?.length > 0 && (
             <RScrollView
               position="absolute"
               top="100%"
@@ -181,7 +211,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
               zIndex={20000}
             >
               <RStack space={2} w="100%">
-                {searchResults.map((result, i) => (
+                {data.map((result, i) => (
                   <RStack
                     key={`result + ${i}`}
                     onPress={() => {
@@ -240,7 +270,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
         }
       />
 
-      {showSearchResults && searchResults?.length > 0 && (
+      {showSearchResults && data?.length > 0 && (
         <ScrollView
           position="absolute"
           top="100%"
@@ -255,7 +285,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
           zIndex={10}
         >
           <List space={2} w="100%">
-            {searchResults.map((result, i) => (
+            {data.map((result, i) => (
               <Pressable
                 key={`result + ${i}`}
                 onPress={() => {

client/components/dashboard/FeedPreview.js

@@ -9,24 +9,33 @@ import { getPublicPacks, getPublicTrips } from '../../store/feedStore';
 import useTheme from '../../hooks/useTheme';
 import Carousel from '../carousel';
 import useCustomStyles from '~/hooks/useCustomStyles';
+import { useFeed } from '~/hooks/feed';
 
 const { height, width } = Dimensions.get('window');
 
 const FeedPreviewScroll = () => {
   const dispatch = useDispatch();
   const styles = useCustomStyles(loadStyles);
 
-  useEffect(() => {
-    dispatch(getPublicPacks());
-    dispatch(getPublicTrips());
-  }, []);
+  // useEffect(() => {
+  //   dispatch(getPublicPacks());
+  //   dispatch(getPublicTrips());
+  // }, []);
 
-  const feedData = useSelector((state) => state.feed);
-  const filteredFeedData = feedData.publicTrips.concat(feedData.publicPacks);
+  const {
+    data: feedData,
+    error,
+    isLoading,
+  } = useFeed(
+    // queryString = 'Most Recent',
+    // ownerId,
+    (feedType = 'public'),
+    (selectedTypes = { pack: true, trip: true }),
+  );
 
   return (
     <Carousel itemWidth={250}>
-      {filteredFeedData.map((item, index) => {
+      {feedData?.map((item, index) => {
         const linkStr = `/${item.type}/${item._id}`;
         return linkStr ? (
           <Link href={linkStr} key={`${linkStr}`}>

client/components/dashboard/HeroBanner.js

@@ -39,7 +39,7 @@ const HeroSection = ({ onSelect }) => {
       console.log('selectedResult ------->', selectedResult);
 
       // Set the selected search result in the Redux store
-      dispatch(setSelectedSearchResult(selectedResult));
+      // dispatch(setSelectedSearchResult(selectedResult));
 
       const { osm_id, osm_type } = selectedResult.properties;