Merge branch 'development' into feed-screen-enhancement

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import PackContainer from 'app/components/pack/PackContainer';
-import { TripDetails } from 'app/screens/trip/TripDetails';
-import { DetailsComponent } from 'app/components/details';
+import EditTripScreen from 'app/screens/trip/editTrip';
+
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -24,7 +23,7 @@ export default function Trip() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <TripDetails />
+      <EditTripScreen />
     </>
   );
 }

apps/next/pages/trip/[tripId].tsx

@@ -1,12 +1,12 @@
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 
 // export const runtime = 'experimental-edge'
 
 export default function Trip() {
   return (
     <>
-      <TripDetails />
+      <EditTripScreen />
     </>
   );
 }

apps/tauri/src/routes/trip/$tripId.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/trip/$tripId')({
 export default function Trip() {
   return (
     <AuthWrapper>
-      <TripDetails />
+      <EditTripScreen />
     </AuthWrapper>
   );
 }

apps/vite/src/routes/trip/$tripId.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -8,9 +8,10 @@ export const Route = createLazyFileRoute('/trip/$tripId')({
 });
 
 export default function Trip() {
+  const { tripId } = Route.useParams();
   return (
     <AuthWrapper>
-      <TripDetails />
+      <EditTripScreen tripId={tripId} />
     </AuthWrapper>
   );
 }

packages/app/components/GearList/GearList.tsx

@@ -15,77 +15,102 @@ import { Accordion, Paragraph, Square } from 'tamagui';
 import { PackSummary } from 'app/modules/pack/components/PackTable/PackSummary';
 import { type WeightUnit } from 'app/utils/convertWeight';
 import { ChevronDown } from '@tamagui/lucide-icons';
+import { AsyncView } from 'app/components/AsyncView';
+import { useTripPackId } from 'app/screens/trip/useTripPackId';
 
 const RStack: any = OriginalRStack;
 const RText: any = OriginalRText;
 
-export const GearList = () => {
+export const GearList = ({ isViewOnlyMode }: { isViewOnlyMode: boolean }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [weightUnit, setWeightUnit] = useState<WeightUnit>('kg');
-  const [packId, setPackIdParam] = usePackId();
-  const { data: currentPack } = useFetchSinglePack(packId);
+  const [packId, setPackIdParam] = useTripPackId();
+  const { data: currentPack, isLoading, isError } = useFetchSinglePack(packId);
+  console.log({ packId });
 
   return (
     <>
-      <LayoutCard title="Your Pack">
+      <LayoutCard title={isViewOnlyMode ? 'Trip Pack' : 'Your Pack'}>
         <YStack style={{ gap: 16 }}>
-          <XStack style={{ alignItems: 'center' }}>
-            <View style={{ flex: 1 }}>
-              <PackContainer />
-            </View>
-            <AddPackContainer
-              onSuccess={setPackIdParam}
-              isCreatingTrip={true}
-            />
-          </XStack>
-          <LayoutCard>
-            <PackSummary
-              currentPack={currentPack}
-              setWeightUnit={setWeightUnit}
-              weightUnit={weightUnit}
-            />
-          </LayoutCard>
-          <Accordion
-            style={{ overflow: 'hidden', width: '100%' }}
-            type="multiple"
-          >
-            <Accordion.Item value="details" style={{ width: '100%' }}>
-              <Accordion.Trigger
+          <AsyncView isLoading={packId && isLoading} isError={isError}>
+            {!isViewOnlyMode && (
+              <RStack
                 style={{
-                  flexDirection: 'row',
-                  justifyContent: 'space-between',
+                  alignItems: currentPack ? 'center' : 'flex-start',
+                  gap: 16,
+                  flexDirection: currentPack ? 'row' : 'column',
                 }}
               >
-                {({ open }) => (
-                  <>
-                    <Paragraph style={{ fontWeight: 600 }}>
-                      Manage Pack
-                    </Paragraph>
-                    <Square rotate={open ? '180deg' : '0deg'} animation="quick">
-                      <ChevronDown size={24} />
-                    </Square>
-                  </>
-                )}
-              </Accordion.Trigger>
-              <Accordion.HeightAnimator
-                animation="quick"
-                style={{ width: '100%' }}
-              >
-                <Accordion.Content
-                  style={{
-                    width: '100%',
-                    flex: 1,
-                  }}
-                >
-                  <TableContainerComponent
-                    hideSummary
-                    forceCardLayout
+                <View style={{ flex: 1 }}>
+                  <PackContainer
+                    emptyStateComponent={
+                      <RText>
+                        Add packs to plan your trip essentials and stay prepared
+                        for any adventure!
+                      </RText>
+                    }
+                  />
+                </View>
+                <AddPackContainer
+                  onSuccess={setPackIdParam}
+                  isCreatingTrip={true}
+                />
+              </RStack>
+            )}
+            {currentPack ? (
+              <>
+                <LayoutCard>
+                  <PackSummary
                     currentPack={currentPack}
+                    setWeightUnit={setWeightUnit}
+                    weightUnit={weightUnit}
                   />
-                </Accordion.Content>
-              </Accordion.HeightAnimator>
-            </Accordion.Item>
-          </Accordion>
+                </LayoutCard>
+                {!isViewOnlyMode && (
+                  <Accordion
+                    style={{ overflow: 'hidden', width: '100%' }}
+                    type="multiple"
+                  >
+                    <Accordion.Item value="details" style={{ width: '100%' }}>
+                      <Accordion.Trigger
+                        style={{
+                          flexDirection: 'row',
+                          justifyContent: 'space-between',
+                        }}
+                      >
+                        {({ open }) => (
+                          <>
+                            <Paragraph style={{ fontWeight: 600 }}>
+                              Manage Pack
+                            </Paragraph>
+                            <Square
+                              rotate={open ? '180deg' : '0deg'}
+                              animation="quick"
+                            >
+                              <ChevronDown size={24} />
+                            </Square>
+                          </>
+                        )}
+                      </Accordion.Trigger>
+                      <Accordion.Content
+                        style={{
+                          width: '100%',
+                          flex: 1,
+                          flexShrink: 0,
+                        }}
+                      >
+                        <TableContainerComponent
+                          hideSummary
+                          forceCardLayout
+                          currentPack={currentPack}
+                        />
+                      </Accordion.Content>
+                    </Accordion.Item>
+                  </Accordion>
+                )}
+              </>
+            ) : null}
+          </AsyncView>
         </YStack>
       </LayoutCard>
     </>

packages/app/components/ScoreContainer.tsx

@@ -12,6 +12,7 @@ import {
 } from 'app/hooks/score';
 import { View } from 'react-native';
 import { useMedia } from 'tamagui';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ScoreProgressChartProps {
   score: number;
@@ -187,6 +188,7 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
 
   const handleScoreClick = useCalculateStore(id, type);
   const media = useMedia();
+  const { sm } = useResponsive();
 
   return (
     <RStack style={styles.box}>
@@ -217,7 +219,10 @@ export const ScoreContainer: React.FC<ScoreContainerProps> = ({
             style={{
               flex: 1,
               flexDirection: media.gtXs ? 'column' : 'row',
-              gap: 15,
+              flexWrap: 'wrap',
+              gap: sm ? 50 : 20,
+              justifyContent: 'center',
+              alignItems: 'center',
             }}
           >
             <ScoreProgressChart score={totalScore} />

packages/app/components/trip/TripCards/TripMapCard.tsx

@@ -36,9 +36,9 @@ export const TripMapCard = ({
       >
         <Map
           style={{ width: '100%', height: 320 }}
-          shapeURI={tripId ? getTripGEOURI(tripId) : undefined}
+          shapeURI={tripId && !shape ? getTripGEOURI(tripId) : undefined}
           onVisibleBoundsChange={onVisibleBoundsChange}
-          initialBounds={initialBounds}
+          initialBounds={!shape ? initialBounds : undefined}
           shape={shape}
         />
       </View>

packages/app/components/trip/TripCards/TripSearchCard.tsx

@@ -10,6 +10,7 @@ import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
 import useResponsive from 'app/hooks/useResponsive';
 import { useScreenWidth } from 'app/hooks/common';
 import { ArrowLeft } from '@tamagui/lucide-icons';
+import { useTripOSM } from 'app/screens/trip/useTripOSM';
 
 interface TripSearchCardProps {
   searchRef: any;
@@ -24,10 +25,10 @@ export const TripSearchCard = ({
   onGoBack,
   onLocationSelect,
 }: TripSearchCardProps) => {
-  const [, setGEOLocation] = useGEOLocationSearch();
+  const [, setTripOSM] = useTripOSM();
 
   const handleSelectLocation = (geoJSON) => {
-    setGEOLocation(geoJSON);
+    setTripOSM(geoJSON);
     onLocationSelect();
   };
 

packages/app/components/trip/TripForm.tsx

@@ -7,12 +7,13 @@ import {
   SubmitButton,
 } from '@packrat/ui';
 import { useRouter } from 'app/hooks/router';
-import { useAddTrip } from 'app/hooks/trips';
+import { useAddTrip, useEditTrips } from 'app/hooks/trips';
 import { addTripForm } from '@packrat/validations/src/validations/tripRoutesValidator';
 import { formatCreateTripValuesForAPI } from 'app/utils/tripUtils';
 import { TripDateRangeCard } from './TripCards';
 import { getEnumValues } from 'app/utils/getEnumValues';
 import { formatTripActivityLabel } from 'app/utils/tripUtils';
+import { type addTripKey } from 'app/screens/trip/createTripStore/store';
 
 const Form: any = OriginalForm;
 const FormSelect: any = OriginalFormSelect;
@@ -22,6 +23,8 @@ interface TripFormProps {
   dateRange: any;
   setDateRange: (range: any) => void;
   isValid: boolean;
+  initialState?: Partial<Record<addTripKey, any>>;
+  tripId?: string;
 }
 
 const isPublicOptions = ['For me only', 'Public'].map((key, index) => ({
@@ -34,8 +37,11 @@ export const TripForm = ({
   dateRange,
   setDateRange,
   isValid,
+  initialState,
+  tripId,
 }: TripFormProps) => {
   const { addTrip, isSuccess, data: response } = useAddTrip();
+  const { editTrips } = useEditTrips();
   const router = useRouter();
 
   const handleCreateTrip = async (values) => {
@@ -44,7 +50,7 @@ export const TripForm = ({
       ...values,
     };
 
-    addTrip(data);
+    tripId ? editTrips({ id: tripId, ...data }) : addTrip(data);
   };
   if (isSuccess && response) {
     router.push(`/trip/${response.id}`);
@@ -54,7 +60,12 @@ export const TripForm = ({
     <Form
       validationSchema={addTripForm}
       onSubmit={handleCreateTrip}
-      defaultValues={{ is_public: '0', activity: ActivityOptions[0].value }}
+      defaultValues={{
+        name: initialState?.name,
+        description: initialState?.description,
+        is_public: initialState?.is_public ? '1' : '0',
+        activity: initialState?.activity || ActivityOptions[0].value,
+      }}
     >
       <YStack style={{ gap: 16 }}>
         <FormInput placeholder="Trip Name" name="name" />

packages/app/hooks/destination/useCurrentDestination.ts

@@ -3,8 +3,7 @@ import { useGEOLocationSearch } from 'app/hooks/geojson';
 import { usePhotonDetail } from '../photonDetail';
 import { parseCoordinates } from 'app/utils/coordinatesParser';
 
-export const useCurrentDestination = () => {
-  const [osm] = useGEOLocationSearch();
+export const useDestination = (osm: any) => {
   const { data, isError, isLoading } = usePhotonDetail(osm.name, true);
   const currentDestination = useMemo(() => {
     return data?.find((destination) => {
@@ -24,3 +23,9 @@ export const useCurrentDestination = () => {
 
   return { currentDestination, latLng, isError, isLoading };
 };
+
+export const useCurrentDestination = () => {
+  const [osm] = useGEOLocationSearch();
+
+  return useDestination(osm);
+};

packages/app/hooks/geojson/useGEOLocationSearch.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { createParam } from '@packrat/crosspath';
 
 interface GeoSearchParams {
@@ -41,3 +41,25 @@ export const useGEOLocationSearch = (): [
 
   return [formattedOSM, setGEOLocation];
 };
+
+export const useOSM = (): [GeoSearchParams, (geoJSON: any) => void] => {
+  const [geoLocation, setGeoLocation] = useState<GeoSearchParams>({});
+
+  const setGEOLocation = (geoJSON) => {
+    const newSearchParams: GeoSearchParams = {};
+
+    if (
+      geoJSON?.properties?.osm_id &&
+      geoJSON.properties.osm_type &&
+      geoJSON.properties.name
+    ) {
+      newSearchParams.osmId = geoJSON.properties.osm_id;
+      newSearchParams.osmType = geoJSON.properties.osm_type;
+      newSearchParams.name = geoJSON.properties.name;
+    }
+
+    setGeoLocation(newSearchParams);
+  };
+
+  return [geoLocation, setGEOLocation];
+};