diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx index ea8832909..fbce2dcaa 100644 --- a/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx +++ b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx @@ -1,118 +1,20 @@ import { useOfflineStore } from 'app/atoms'; -import { SearchResults } from 'app/components/SearchInput/SearchResults'; -import { useRouter } from 'app/hooks/router'; import useTheme from 'app/hooks/useTheme'; -import { LoginScreen, useAuthUser } from 'app/modules/auth'; -import { DashboardScreen } from 'app/modules/dashboard'; +import { useAuthUser } from 'app/modules/auth'; import { theme } from 'app/theme'; import { Redirect, Stack } from 'expo-router'; import Head from 'expo-router/head'; import { useAtom } from 'jotai'; -import React, { useState } from 'react'; -import { Platform, View } from 'react-native'; - -import { PlaceItem } from 'app/components/PlacesAutocomplete/PlacesAutocomplete'; -import { - placesAutocompleteSearchAtom, - usePlacesAutoComplete, -} from 'app/components/PlacesAutocomplete/usePlacesAutoComplete'; - -interface SearchResult { - properties: { - osm_id: number; - osm_type: string; - name: string; - }; - geometry: { - coordinates: [number, number]; - }; -} - -function NativeHomeScreen() { - const user = useAuthUser(); - const router = useRouter(); - const { currentTheme } = useTheme(); - const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom); - - const handleSearchSelect = async (selectedResult: SearchResult) => { - try { - const { osm_id, osm_type, name } = selectedResult.properties; - - const coordinates = selectedResult.geometry.coordinates; - - if (!osm_id || !osm_type) { - console.error( - 'No OSM ID or OSM type found in the selected search result', - ); - } else { - router.push({ - pathname: '/destination/query', - query: { - osmType: osm_type, - osmId: osm_id, - name, - }, - }); - } - } catch (error) { - console.error('errorrrrrr', error); - } - }; - const { - data: searchResults, - handleSelect, - search, - setSearch, - } = usePlacesAutoComplete(handleSearchSelect); - - const [isFocused, setIsFocused] = useState(false); // Track focus state for input +import React from 'react'; +import { Platform } from 'react-native'; - console.log('searchResults', searchResults); - - const mutualStyles = { - backgroundColor: currentTheme.colors.background, - flex: 1, - }; - - const DashboardWithNativeSearch = () => { - if (searchQuery) { - return ( - <SearchResults - results={searchResults} - onResultClick={(result) => { - handleSelect(result); // Handle the selection logic - setSearchQuery(''); // Clear search query - }} - resultItemComponent={<PlaceItem />} // Custom item rendering - isVisible={true} - /> - ); - } - return <DashboardScreen />; - }; - - return ( - <View style={mutualStyles}> - {!user ? ( - <LoginScreen /> - ) : ( - <> - {/* Dashboard or Search Results */} - <DashboardWithNativeSearch /> - </> - )} - </View> - ); -} +import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete'; +import { LoginScreen } from 'app/modules/auth'; +import { DashboardScreen } from 'app/modules/dashboard'; +import { View } from 'tamagui'; export default function HomeScreen() { - const { - enableDarkMode, - enableLightMode, - isDark, - isLight, - currentTheme = theme, - } = useTheme(); + const { currentTheme = theme } = useTheme(); const user = useAuthUser(); const { connectionStatus } = useOfflineStore(); @@ -142,7 +44,18 @@ export default function HomeScreen() { }, }} /> - {connectionStatus === 'connected' && <NativeHomeScreen />} + {connectionStatus === 'connected' && ( + <View style={mutualStyles}> + {!user ? ( + <LoginScreen /> + ) : ( + <> + {/* Dashboard or Search Results */} + <DashboardScreen /> + </> + )} + </View> + )} {connectionStatus === 'offline' && <Redirect href="offline/maps" />} </> ); diff --git a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx index 419d16ffd..6d31e14fd 100644 --- a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx +++ b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx @@ -1,13 +1,13 @@ -import React from 'react'; -import { RStack, RText as OriginalRText, RButton } from '@packrat/ui'; import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { Platform, View } from 'react-native'; +import { RText as OriginalRText, RButton, RStack, XStack } from '@packrat/ui'; +import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete'; +import { useRouter } from 'app/hooks/router'; +import useCustomStyles from 'app/hooks/useCustomStyles'; import useTheme from 'app/hooks/useTheme'; import { useAuthUser } from 'app/modules/auth'; -import { useRouter } from 'app/hooks/router'; import { first } from 'lodash'; -import useCustomStyles from 'app/hooks/useCustomStyles'; -import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete'; +import React from 'react'; +import { Platform, View } from 'react-native'; const RText: any = OriginalRText; @@ -59,7 +59,7 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => { const firstNameOrUser = first(user?.name?.split(' ')) ?? 'User'; const bannerText = firstNameOrUser !== 'User' - ? `Let's find a new trail, ${firstNameOrUser}` + ? `Let's find a new trail, ${String(firstNameOrUser)}` : "Let's find a new trail"; return ( @@ -74,19 +74,14 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => { style={styles.searchBar} /> </View> - ) : ( + ) : Platform.OS === 'android' ? ( <RButton style={styles.searchButton} onPress={() => { router.push('/search'); }} > - <RStack - style={{ - alignItems: 'center', - flexDirection: 'row', - }} - > + <XStack ai="center" jc="flex-start" f={1} gap="$2"> <MaterialCommunityIcons name="magnify" size={24} @@ -95,9 +90,9 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => { <RText color={currentTheme.colors.text} opacity={0.6}> Search by park, city, or trail </RText> - </RStack> + </XStack> </RButton> - )} + ) : null} </RStack> </View> ); @@ -145,7 +140,8 @@ const loadStyles = (theme: any) => { minWidth: '100%', flexDirection: 'row', justifyContent: 'flex-start', - padding: 10, + padding: 0, + paddingHorizontal: 10, borderRadius: 5, }, }; diff --git a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx index 55811301a..ef09816a1 100644 --- a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx +++ b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx @@ -1,14 +1,89 @@ -import React from 'react'; -import { Platform, View } from 'react-native'; -import { RStack, RScrollView } from '@packrat/ui'; -import { HeroSection, Section, SectionHeader } from '../../components'; -import useCustomStyles from 'app/hooks/useCustomStyles'; +import { useRouter } from '@packrat/crosspath'; +import { RScrollView, RStack } from '@packrat/ui'; +import FAB from 'app/components/Fab/Fab'; import Layout from 'app/components/layout/Layout'; +import { SearchResults } from 'app/components/SearchInput/SearchResults'; import { useScreenWidth } from 'app/hooks/common'; -import FAB from 'app/components/Fab/Fab'; +import useCustomStyles from 'app/hooks/useCustomStyles'; import { FeedPreview } from 'app/modules/feed'; -import { Button, Stack } from 'tamagui'; -import { useRouter } from '@packrat/crosspath'; +import { useAtom } from 'jotai'; +import React from 'react'; +import { Platform, View } from 'react-native'; +import { Stack } from 'tamagui'; +import { HeroSection, Section, SectionHeader } from '../../components'; + +import { PlaceItem } from 'app/components/PlacesAutocomplete/PlacesAutocomplete'; +import { + placesAutocompleteSearchAtom, + usePlacesAutoComplete, +} from 'app/components/PlacesAutocomplete/usePlacesAutoComplete'; + +interface SearchResult { + properties: { + osm_id: number; + osm_type: string; + name: string; + }; + geometry: { + coordinates: [number, number]; + }; +} + +function NativeDashboardScreen() { + const router = useRouter(); + const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom); + + const handleSearchSelect = async (selectedResult: SearchResult) => { + try { + const { osm_id, osm_type, name } = selectedResult.properties; + + const coordinates = selectedResult.geometry.coordinates; + + if (!osm_id || !osm_type) { + console.error( + 'No OSM ID or OSM type found in the selected search result', + ); + } else { + router.push({ + pathname: '/destination/query', + query: { + osmType: osm_type, + osmId: osm_id, + name, + }, + }); + } + } catch (error) { + console.error('errorrrrrr', error); + } + }; + + const { + data: searchResults, + handleSelect, + search, + setSearch, + } = usePlacesAutoComplete(handleSearchSelect); + + const DashboardWithNativeSearch = () => { + if (searchQuery) { + return ( + <SearchResults + results={searchResults} + onResultClick={(result) => { + handleSelect(result); // Handle the selection logic + setSearchQuery(''); // Clear search query + }} + resultItemComponent={<PlaceItem />} // Custom item rendering + isVisible={true} + /> + ); + } + return <DashboardScreenInner />; + }; + + return <DashboardWithNativeSearch />; +} const DashboardScreenInner = () => { const styles = useCustomStyles(loadStyles); @@ -62,7 +137,10 @@ const DashboardScreenInner = () => { }; export const DashboardScreen = () => { - return <DashboardScreenInner />; + if (Platform.OS === 'web') { + return <DashboardScreenInner />; + } + return <NativeDashboardScreen />; }; const loadStyles = (theme) => {