Merge pull request #1360 from andrew-bierman/enhance-createTripScreen

Enhance Create Trip Screen
andrew-bierman · Dec 13, 2024 · 4d70b22 · 4d70b22
2 parents a011a87 + 520f111
commit 4d70b22
Show file tree

Hide file tree

Showing 24 changed files with 408 additions and 548 deletions.
diff --git a/packages/app/components/GearList/GearList.tsx b/packages/app/components/GearList/GearList.tsx
@@ -1,68 +1,33 @@
-import React from 'react';
-import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
-import { FontAwesome5 } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  RStack as OriginalRStack,
+  RText as OriginalRText,
+  View,
+  XStack,
+} from '@packrat/ui';
 import { AddPackContainer } from '../../modules/pack/widgets/AddPackContainer';
-import useTheme from '../../hooks/useTheme';
 import PackContainer from '../../modules/pack/widgets/PackContainer';
-import { usePackId } from 'app/modules/pack';
+import { useFetchSinglePack, usePackId } from 'app/modules/pack';
+import { LayoutCard } from 'app/components/LayoutCard';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 
 export const GearList = () => {
-  const { currentTheme } = useTheme();
-  const [_, setPackIdParam] = usePackId();
+  const [isOpen, setIsOpen] = useState(false);
+  const [packId, setPackIdParam] = usePackId();
+  const { data: currentPack } = useFetchSinglePack(packId);
 
   return (
-    <RStack
-      alignSelf="center"
-      $sm={{
-        borderRadius: 6,
-        width: '100%',
-      }}
-      $gtSm={{
-        borderRadius: 12,
-        width: '90%',
-      }}
-      style={{
-        flexDirection: 'column',
-        backgroundColor: currentTheme.colors.card,
-        gap: 15,
-        marginVertical: 10,
-        alignItems: 'center',
-        padding: 30,
-      }}
-    >
-      <RStack>
-        <RStack
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 10,
-          }}
-        >
-          <FontAwesome5
-            name="clipboard-check"
-            size={20}
-            color={currentTheme.colors.cardIconColor}
-          />
-          <RText
-            style={{
-              color: currentTheme.colors.text,
-              fontSize: currentTheme.font.size,
-              paddingTop: 12,
-              paddingBottom: 12,
-              fontWeight: 600,
-            }}
-            fontFamily="$body"
-          >
-            Gear List
-          </RText>
-        </RStack>
-      </RStack>
-
-      <AddPackContainer onSuccess={setPackIdParam} isCreatingTrip={true} />
-      <PackContainer />
-    </RStack>
+    <>
+      <LayoutCard title="Your Pack">
+        <XStack style={{ alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            <PackContainer />
+          </View>
+          <AddPackContainer onSuccess={setPackIdParam} isCreatingTrip={true} />
+        </XStack>
+      </LayoutCard>
+    </>
   );
 };
diff --git a/packages/app/components/LayoutCard/LayoutCard.tsx b/packages/app/components/LayoutCard/LayoutCard.tsx
@@ -1,10 +1,18 @@
-import React, { type FC } from 'react';
+import React, { type ReactNode, type FC } from 'react';
 import { View, type ViewProps } from 'tamagui';
 import useTheme from 'app/hooks/useTheme';
+import { RText } from '@packrat/ui';
 
-interface LayoutCardProps extends ViewProps {}
+interface LayoutCardProps extends ViewProps {
+  title?: ReactNode;
+}
 
-export const LayoutCard: FC<LayoutCardProps> = ({ style, ...props }) => {
+export const LayoutCard: FC<LayoutCardProps> = ({
+  style,
+  title,
+  children,
+  ...props
+}) => {
   const { currentTheme } = useTheme();
 
   return (
@@ -20,6 +28,13 @@ export const LayoutCard: FC<LayoutCardProps> = ({ style, ...props }) => {
         },
         style,
       ]}
-    />
+    >
+      {title && (
+        <RText style={{ fontWeight: 600, fontSize: 24, marginBottom: 24 }}>
+          {title}
+        </RText>
+      )}
+      {children}
+    </View>
   );
 };
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
@@ -1,6 +1,12 @@
 import useTheme from 'app/hooks/useTheme';
 import React from 'react';
-import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  Platform,
+  ScrollView,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
 const Layout = ({
   children,
@@ -30,7 +36,11 @@ const Layout = ({
         customStyle,
       ]}
     >
-      {children}
+      <View style={{ width: '100%' }}>
+        <ScrollView contentContainerStyle={{ width: '100%' }}>
+          {children}
+        </ScrollView>
+      </View>
     </View>
   );
 };

diff --git a/packages/app/components/trip/TripCards/TripActivityCard.tsx b/packages/app/components/trip/TripCards/TripActivityCard.tsx
@@ -7,25 +7,8 @@ import { formatTripActivityLabel } from 'app/utils/tripUtils';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { Select as OriginalSelect } from '@packrat/ui';
 
-enum TripActivity {
-  TRIP = 'trip',
-  RUNNING = 'running',
-  BIKING = 'biking',
-  CAMPING = 'camping',
-  FISHING = 'fishing',
-  TREKKING = 'trekking',
-  ROCK_CLIMBING = 'rock-climbing',
-  HIKING = 'hiking',
-  SWIMMING = 'swimming',
-}
-
 const Select: any = OriginalSelect;
 
-const ActivityOptions = getEnumValues(TripActivity).map((activity) => ({
-  label: formatTripActivityLabel(activity.toString()),
-  value: activity,
-}));
-
 type TripActivityCardProps = {
   onChange: (activity: string) => void;
   selectedValue: string;
@@ -38,22 +21,11 @@ export const TripActivityCard = ({
   const { currentTheme } = useTheme();
 
   return (
-    <TripCardBase
-      icon={() => (
-        <FontAwesome5
-          name="hiking"
-          size={24}
-          color={currentTheme.colors.cardIconColor}
-        />
-      )}
-      title="Activity"
-    >
-      <Select
-        value={selectedValue}
-        onValueChange={onChange}
-        options={ActivityOptions}
-        name="activity"
-      />
-    </TripCardBase>
+    <Select
+      value={selectedValue}
+      onValueChange={onChange}
+      options={ActivityOptions}
+      name="activity"
+    />
   );
 };
diff --git a/packages/app/components/trip/TripCards/TripCardBase.tsx b/packages/app/components/trip/TripCards/TripCardBase.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
+import { LayoutCard } from 'app/components/LayoutCard';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
@@ -20,55 +21,7 @@ export const TripCardBase = ({
   icon: Icon,
   title,
 }: TripCardBaseProps) => {
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadTripCardStyles(loadStyles));
-
-  return (
-    <RStack
-      $sm={{
-        borderRadius: 6,
-        flexDirection: 'column',
-        width: '100%',
-      }}
-      $gtSm={{
-        borderRadius: 12,
-        flexDirection,
-        width: '90%',
-      }}
-      style={styles.styles}
-    >
-      <RStack
-        style={{
-          flexDirection: 'row',
-          gap: 15,
-          alignItems: 'center',
-          paddingVertical: 15,
-        }}
-      >
-        <RStack
-          style={{
-            flexDirection: 'row',
-            gap: 15,
-            alignItems: 'center',
-            paddingVertical: 15,
-          }}
-        >
-          <Icon />
-          <RText
-            style={{
-              color: currentTheme.colors.text,
-              fontSize: currentTheme.font.size,
-              fontWeight: 600,
-            }}
-            fontFamily="$body"
-          >
-            {title}
-          </RText>
-        </RStack>
-      </RStack>
-      {children}
-    </RStack>
-  );
+  return <LayoutCard>{children}</LayoutCard>;
 };
 
 const loadTripCardStyles = (loader) => (theme) => ({

diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -39,24 +39,13 @@ export const TripDateRangeCard = ({
   };
 
   return (
-    <TripCardBase
-      icon={() => (
-        <FontAwesome5
-          name="calendar"
-          size={20}
-          color={currentTheme.colors.cardIconColor}
-        />
-      )}
-      title="Trip Date Range"
-    >
-      <RangePicker
-        selectedDates={selectedDates}
-        onDatesChange={onDatesChange}
-        offsetDate={offsetDate}
-        onOffsetChange={onOffsetChange}
-        open={open}
-        setOpen={setOpen}
-      />
-    </TripCardBase>
+    <RangePicker
+      selectedDates={selectedDates}
+      onDatesChange={onDatesChange}
+      offsetDate={offsetDate}
+      onOffsetChange={onOffsetChange}
+      open={open}
+      setOpen={setOpen}
+    />
   );
 };
diff --git a/packages/app/components/trip/TripCards/TripMapCard.tsx b/packages/app/components/trip/TripCards/TripMapCard.tsx
@@ -1,14 +1,15 @@
-import { ErrorBoundary, RStack, RText } from '@packrat/ui';
 import { Map } from 'app/modules/map';
-import useTheme from 'app/hooks/useTheme';
-import { TripCardBase } from './TripCardBase';
-import { FontAwesome5 } from '@expo/vector-icons';
 import React from 'react';
 import { getTripGEOURI } from '../utils';
+import { AsyncView } from 'app/components/AsyncView';
+import { View } from 'react-native';
+import useResponsive from 'app/hooks/useResponsive';
+import { Platform } from 'react-native';
 
 interface TripMapCardProps {
   isLoading?: boolean;
   shape?: any;
+  isMapError: boolean;
   onVisibleBoundsChange?: (bounds: number[]) => void;
   tripId?: string;
   initialBounds?: any;
@@ -19,38 +20,29 @@ export const TripMapCard = ({
   shape,
   initialBounds,
   tripId,
+  isMapError,
   onVisibleBoundsChange,
 }: TripMapCardProps) => {
-  const { currentTheme } = useTheme();
+  const { gtSm } = useResponsive();
 
   return (
-    <TripCardBase
-      loadStyles={loadStyles}
-      icon={() => (
-        <FontAwesome5
-          name="route"
-          size={24}
-          color={currentTheme.colors.cardIconColor}
+    <AsyncView isError={isMapError} isLoading={isLoading}>
+      <View
+        style={{
+          flex: gtSm ? 1 : undefined,
+          width: gtSm ? 'auto' : '100%',
+          height: Platform.OS === 'web' ? 'auto' : 300,
+        }}
+      >
+        <Map
+          style={{ width: '100%', height: 320 }}
+          shapeURI={tripId ? getTripGEOURI(tripId) : undefined}
+          onVisibleBoundsChange={onVisibleBoundsChange}
+          initialBounds={initialBounds}
+          shape={shape}
         />
-      )}
-      title="Map"
-    >
-      {isLoading ? (
-        <RStack>
-          <RText>Loading....</RText>
-        </RStack>
-      ) : (
-        <ErrorBoundary>
-          <Map
-            style={{ width: '100%', height: 320 }}
-            shapeURI={tripId ? getTripGEOURI(tripId) : undefined}
-            onVisibleBoundsChange={onVisibleBoundsChange}
-            initialBounds={initialBounds}
-            shape={shape}
-          />
-        </ErrorBoundary>
-      )}
-    </TripCardBase>
+      </View>
+    </AsyncView>
   );
 };