add action buttons on tripcardheader

packages/app/components/card/TripCardHeader/TripCardHeader.tsx

@@ -1,51 +1,115 @@
 import React from 'react';
-import { Platform, Text } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import { useRouter } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
 import { CustomCardHeader } from '../CustomCardHeader';
-import { RIconButton, RStack } from '@packrat/ui';
-import { AntDesign } from '@expo/vector-icons';
+import RStack from '@packrat/ui/src/RStack';
+import RIconButton from '@packrat/ui/src/RIconButton';
+import { AntDesign, MaterialIcons } from '@expo/vector-icons';
+import { CascadedDropdownComponent } from '@packrat/ui/src/CascadedDropdown';
+import { useFetchSingleTrip } from 'app/hooks/singletrips/useFetchSingleTrip';
+import { useTripActions } from './useTripActions';
+import { useAuthUser } from 'app/modules/auth';
+import { EditTripModal } from 'app/modules/trip/components/EditTripModal';
 
-export const TripCardHeader = ({ data, title, link }) => {
-  const { isDark, currentTheme } = useTheme();
+interface TripCardHeaderProps {
+  data: any;
+  title: string;
+  link?: string;
+}
+interface optionValues {
+  label: string;
+  value: string;
+}
+
+export const TripCardHeader = ({ data, title }: TripCardHeaderProps) => {
+  const { refetch } = useFetchSingleTrip(data?.id);
+  const user = useAuthUser();
+
+  const { currentTheme } = useTheme();
   const router = useRouter();
+  const {
+    handleActionsOpenChange,
+    handleSaveTitle,
+    isEditModalOpen,
+    setIsEditModalOpen,
+  } = useTripActions({ data, refetch });
+
+  const optionValues: optionValues[] = [
+    { label: 'Edit', value: 'Edit' },
+    { label: 'Delete', value: 'Delete' },
+  ];
 
   return (
-    <CustomCardHeader
-      data={data}
-      ownerId={data?.owner_id}
-      title={
-        <RStack
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'row',
-          }}
-        >
-          {Platform.OS === 'web' && (
-            <RIconButton
-              backgroundColor="transparent"
-              icon={
-                <AntDesign
-                  name="arrowleft"
-                  size={24}
-                  color={isDark ? 'white' : 'black'}
-                />
-              }
-              onPress={() => {
-                if (Platform.OS === 'web') {
-                  window?.history?.back();
-                } else {
-                  router.back();
+    <>
+      <CustomCardHeader
+        data={data}
+        ownerId={data?.owner_id}
+        title={
+          <RStack
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            {Platform.OS === 'web' && (
+              <RIconButton
+                backgroundColor="transparent"
+                icon={
+                  <AntDesign
+                    name="arrowleft"
+                    size={24}
+                    color={currentTheme.colors.text}
+                  />
                 }
+                onPress={() => {
+                  if (Platform.OS === 'web') {
+                    window?.history?.back();
+                  } else {
+                    router.back();
+                  }
+                }}
+              />
+            )}
+            <Text style={{ color: currentTheme.colors.text }}>{title}</Text>
+          </RStack>
+        }
+        actionsComponent={
+          user?.id === data.owner_id && (
+            <View
+              style={{
+                minWidth: 50,
+                maxWidth: 100,
               }}
-            />
-          )}
-          <Text style={{ color: isDark ? 'white' : 'black' }}>{title}</Text>
-        </RStack>
-      }
-      link={link}
-      actionsComponent={undefined}
-    />
+            >
+              <CascadedDropdownComponent
+                value={null}
+                data={optionValues}
+                onValueChange={(value) => handleActionsOpenChange(value)}
+                placeholder={
+                  <RIconButton
+                    backgroundColor="transparent"
+                    icon={<MaterialIcons name="more-horiz" size={20} />}
+                    style={{
+                      height: 20,
+                    }}
+                  />
+                }
+                native={true}
+              />
+            </View>
+          )
+        }
+      />
+      <EditTripModal
+        currentTrip={data}
+        isOpen={isEditModalOpen}
+        onClose={() => {
+          setIsEditModalOpen(false);
+        }}
+        refetch={refetch}
+      />
+    </>
   );
 };

packages/app/components/card/TripCardHeader/useTripActions.ts

@@ -0,0 +1,41 @@
+import { useDeleteTrips, useEditTrips } from 'app/hooks/trips';
+import { useState } from 'react';
+
+export const useTripActions = ({ data, refetch }) => {
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTitleEditMode, setIsTitleEditMode] = useState(false);
+  const { editTrips } = useEditTrips();
+  const { handleDeleteTrip } = useDeleteTrips(data.id);
+
+  const handleActionsOpenChange = (state) => {
+    switch (state) {
+      case 'Edit':
+        setIsEditModalOpen(true);
+        break;
+      case 'Delete':
+        handleDeleteTrip();
+        break;
+    }
+  };
+
+  const handleSaveTitle = (title) => {
+    const TripDetails = {
+      id: data.id,
+      name: title,
+    };
+    editTrips(TripDetails, {
+      onSuccess: () => {
+        refetch?.();
+      },
+    });
+    setIsTitleEditMode(false);
+  };
+
+  return {
+    handleActionsOpenChange,
+    isTitleEditMode,
+    isEditModalOpen,
+    setIsEditModalOpen,
+    handleSaveTitle,
+  };
+};

packages/app/hooks/trips/useCreateTripForm.ts

@@ -1,6 +1,6 @@
 import { useCreateTripStore } from 'app/screens/trip/createTripStore';
 import { useValidateSchema } from 'app/hooks/common';
-import { addTripDetails } from '@packrat/validations';
+import { addTripDetails } from '@packrat/validations/src/validations/';
 import { useEffect, useMemo } from 'react';
 import { type addTripKey } from 'app/screens/trip/createTripStore/store';
 import { useAuthUser } from 'app/modules/auth';

packages/app/hooks/trips/useDeleteTrips.ts

@@ -1,19 +1,16 @@
-import { queryTrpc } from '../../trpc';
+import { useRouter } from 'app/hooks/router';
+import { queryTrpc } from 'app/trpc';
 
-export const useDeleteTrips = () => {
-  const utils = queryTrpc.useUtils();
-  const mutation = queryTrpc.deleteTrip.useMutation();
+export const useDeleteTrips = (id) => {
+  const { mutateAsync: deleteTrip } = queryTrpc.deleteTrip.useMutation();
+  const router = useRouter();
 
-  const deleteTrips = (tripId) => {
-    mutation.mutate(tripId, {
-      onSuccess: () => {
-        utils.getTrips.invalidate();
-      },
-    });
+  const handleDeleteTrip = async () => {
+    try {
+      await deleteTrip({ tripId: id });
+      router.replace('/trips');
+    } catch {}
   };
 
-  return {
-    deleteTrips,
-    ...mutation,
-  };
+  return { handleDeleteTrip };
 };

packages/app/modules/pack/components/EditPackModal.tsx

@@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { BaseModal } from '../../../../ui/src/modal/BaseModal';
 import RButton from '@packrat/ui/src/RButton';
 import RInput from '@packrat/ui/src/RInput';
-
-import { View, Text } from 'react-native';
 import { useEditPack } from '../hooks/useEditPack';
 import RStack from '@packrat/ui/src/RStack';
 import RText from '@packrat/ui/src/RText';
@@ -23,7 +21,6 @@ export const EditPackModal: React.FC<EditPackModalProps> = ({
   currentPack,
   refetch,
 }) => {
-  console.log({ currentPack });
   const [packName, setPackName] = useState(currentPack?.name ?? '');
   const [isPublic, setIsPublic] = useState(currentPack?.is_public ?? true);
   const { editPack, isLoading, isError } = useEditPack();

packages/app/modules/trip/components/EditTripModal.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { BaseModal } from '../../../../ui/src/modal/BaseModal';
+import RButton from '@packrat/ui/src/RButton';
+import RInput from '@packrat/ui/src/RInput';
+import RStack from '@packrat/ui/src/RStack';
+import RText from '@packrat/ui/src/RText';
+import { Switch } from 'tamagui';
+import { useEditTrips } from 'app/hooks/trips/useEditTrips';
+
+interface EditTripModalProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  currentTrip: any;
+  refetch?: () => void;
+}
+
+export const EditTripModal: React.FC<EditTripModalProps> = ({
+  isOpen,
+  onClose,
+  currentTrip,
+  refetch,
+}) => {
+  const [tripName, setTripName] = useState(currentTrip?.name ?? '');
+  const { editTrips, isLoading, isError } = useEditTrips();
+
+  const handleEditTrip = async () => {
+    try {
+      editTrips(
+        { id: currentTrip.id, name: tripName },
+        {
+          onSuccess: () => {
+            onClose?.();
+            refetch?.();
+          },
+        },
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setTripName(currentTrip?.name ?? '');
+    }
+  }, [isOpen]);
+
+  return (
+    <BaseModal
+      showTrigger={false}
+      title="Edit Trip"
+      footerButtons={[
+        {
+          label: 'Cancel',
+          color: '#B22222',
+          onClick: (_, closeModal) => {
+            closeModal();
+            onClose?.();
+          },
+        },
+      ]}
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <RInput
+        placeholder="Trip Name"
+        value={tripName}
+        onChangeText={(t) => setTripName(t)}
+        style={{ width: 200 }}
+      />
+      <RButton onPress={handleEditTrip} disabled={isLoading}>
+        {isLoading ? 'Saving...' : 'Save'}
+      </RButton>
+      {isError && (
+        <RStack>
+          <RText style={{ color: 'red' }}>Failed to save changes</RText>
+        </RStack>
+      )}
+    </BaseModal>
+  );
+};

packages/app/screens/trip/TripDetails.tsx

@@ -76,12 +76,10 @@ export function TripDetails() {
   return (
     <Layout>
       <View
-        style={[
-          styles.mainContainer,
-          Platform.OS == 'web'
-            ? { minHeight: '100vh' }
-            : { minHeight: Dimensions.get('screen').height },
-        ]}
+        style={{
+          minHeight:
+            Platform.OS == 'web' ? '100vh' : Dimensions.get('screen').height,
+        }}
       >
         <DetailsComponent
           type="trip"