⚡️ add shared dashboard logic

andrew-bierman · Dec 21, 2024 · 61ce7c0 · 61ce7c0
1 parent 436e2a4
commit 61ce7c0
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 133 deletions.
diff --git 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
@@ -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
@@ -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) => {