Trip review feature init

.gitignore

@@ -4,6 +4,7 @@ mongodb-data
 .env.production
 .env.old
 node_modules
+local-files
 # yarn.lock
 # dist
 old/

packages/app/components/card/PackCardHeader/PackCardHeader.tsx

@@ -10,6 +10,7 @@ import {
   EditableText,
   RIconButton,
   RStack,
+  ZDropdown,
 } from '@packrat/ui';
 import { useDeletePack, useFetchSinglePack } from 'app/hooks/packs';
 import { usePackTitleInput } from './usePackTitleInput';
@@ -83,13 +84,13 @@ export const PackCardHeader = ({ data, title, link }: PackCardHeaderProps) => {
       link={link}
       actionsComponent={
         user?.id === data.owner_id && (
-          <ThreeDotsMenu onOpenChange={handleActionsOpenChange}>
-            <YStack space="$1">
-              <RButton onPress={handleEdit}>Edit</RButton>
-              <RButton onPress={handleSavePack}>Save</RButton>
-              <RButton onPress={handleDeletePack}>Delete</RButton>
-            </YStack>
-          </ThreeDotsMenu>
+          <ZDropdown 
+            dropdownItems={[
+              {label: 'Edit', onSelect: handleEdit },
+              {label: 'Save', onSelect: handleSavePack },
+              {label: 'Delete', onSelect: handleDeletePack },
+            ]}
+          />
         )
       }
     />

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

@@ -3,11 +3,16 @@ import { Platform, Text } 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 { RIconButton, RStack, ZDropdown } from '@packrat/ui';
 import { AntDesign } from '@expo/vector-icons';
+import { useAuthUser } from 'app/auth/hooks';
+import { useCompleteTrip } from 'app/hooks/trips';
+import { EditTripModal } from 'app/components/trip/EditTripModal';
 
 export const TripCardHeader = ({ data, title, link }) => {
   const { isDark, currentTheme } = useTheme();
+  const user = useAuthUser();
+  const completeTrip = useCompleteTrip();
   const router = useRouter();
 
   return (
@@ -44,7 +49,17 @@ export const TripCardHeader = ({ data, title, link }) => {
         </RStack>
       }
       link={link}
-      actionsComponent={undefined}
+      actionsComponent={
+        user?.id === data.owner_id && (
+          <ZDropdown 
+            dropdownItems={[
+              {label: <EditTripModal /> },
+              ...(!data.is_completed ? [{label: 'Mark as complete', onSelect: () => {completeTrip(data.id)} }] : []),
+              {label: 'Delete', onSelect: () => {} },
+            ]}
+          />
+        )
+      }
     />
   );
 };

packages/app/components/pack_table/TableItem.tsx

@@ -68,22 +68,14 @@ const TableItem = ({
     ];
   }
 
-  let rowData = [
+  const rowData = [
     <RText px={8}>{name}</RText>,
     <RText px={8}>{`${formatNumber(weight)} ${unit}`}</RText>,
     <RText px={8}>{quantity}</RText>,
   ];
 
   if (hasPermissions) {
-    if (
-      Platform.OS === 'android' ||
-      Platform.OS === 'ios' ||
-      window.innerWidth < 900
-    ) {
-      rowData.push(<ZDropdown.Native dropdownItems={rowActionItems} />);
-    } else {
-      rowData.push(<ZDropdown.Web dropdownItems={rowActionItems} />);
-    }
+    rowData.push(<ZDropdown dropdownItems={rowActionItems} />);
   }
 
   /*

packages/app/components/trip/EditTripModal.tsx

@@ -0,0 +1,22 @@
+import useTheme from 'app/hooks/useTheme';
+import { BaseModal, Form, FormInput, RStack, RText } from '@packrat/ui';
+
+export const EditTripModal = () => {
+
+  return (
+    <BaseModal
+      title="Add Item"
+      trigger="Add Item"
+      footerButtons={[
+        {
+          label: 'Cancel',
+          color: '#B22222',
+          onClick: (_, closeModal) => closeModal(),
+        },
+      ]}
+      footerComponent={undefined}
+    >
+     <RText>TripModal</RText>
+    </BaseModal>
+  );
+};

packages/app/config/trpcAxiosClient.ts

@@ -6,6 +6,7 @@ const REQUESTS_TO_SKIP_SUCCESS_MESSAGE = [
   'getMe',
   'signUp',
   'signIn',
+  'completeTrip',
   'resetPasswordEmail',
   'resetPassword',
 ];

packages/app/hooks/trips/index.ts

@@ -3,3 +3,5 @@ export * from './useDeleteTrips';
 export * from './useFetchTrips';
 export * from './useEditTrips';
 export * from './useTripId';
+export * from './useCompleteTrip';
+export * from './useTripImages';

packages/app/hooks/trips/useCompleteTrip.ts

@@ -0,0 +1,24 @@
+import { InformUser } from 'app/utils/ToastUtils';
+import { queryTrpc } from '../../trpc';
+
+export const useCompleteTrip = () => {
+  const utils = queryTrpc.useUtils();
+  const mutation = queryTrpc.completeTrip.useMutation();
+
+  const completeTrip = (tripId: string) => {
+    mutation.mutate({tripId}, {
+      onSuccess: (result) => {
+        utils.getTrips.invalidate();
+
+        InformUser({
+          title: 'Trip completed! Share your experience with others',
+          placement: 'bottom',
+          duration: 3000,
+          style: { backgroundColor: 'green' },
+        });
+      },
+    });
+  };
+
+  return completeTrip;
+};

packages/app/hooks/trips/useTripImages.ts

@@ -0,0 +1,21 @@
+import { queryTrpc } from '../../trpc';
+
+export const useTripImages = () => {
+  const utils = queryTrpc.useUtils();
+  const { mutate: addTripImageMutation } = queryTrpc.addTripImage.useMutation();
+
+  const addTripImage = (tripId: string, image: string) => {
+    addTripImageMutation(
+      { tripId, image },
+      {
+        onSuccess: () => {
+          utils.getTrips.invalidate();
+        },
+      },
+    );
+  };
+
+  return {
+    addTripImage,
+  };
+};

packages/app/screens/trip/TripDetails.tsx

@@ -17,6 +17,7 @@ import {
   WeatherCardComponent,
   TripCardComponent,
   ScoreContainerComponent,
+  TripReview,
   loadStyles,
 } from './TripDetailsComponents';
 import { useTripId } from 'app/hooks/trips';
@@ -27,6 +28,7 @@ const SECTION = {
   TABLE: 'TABLE',
   WEATHER: 'WEATHER',
   TRIP: 'TRIP',
+  REVIEW: 'REVIEW',
   SCORE: 'SCORE',
 };
 
@@ -142,6 +144,14 @@ export function TripDetails() {
                           currentTheme={currentTheme}
                         />
                       );
+                    case SECTION.REVIEW:
+                      return (
+                        <TripReview
+                          data={data}
+                          weatherObject={weatherObject}
+                          currentTheme={currentTheme}
+                        />
+                      );
                     case SECTION.SCORE:
                       return (
                         <ScoreContainer

packages/app/screens/trip/TripDetailsComponents.tsx

@@ -8,8 +8,17 @@ import { FontAwesome5 } from '@expo/vector-icons';
 import { theme } from '../../theme';
 import { TripMapCard } from 'app/components/trip/TripCards';
 import { useFetchSinglePack } from 'app/hooks/packs';
-import { RSkeleton, RText } from '@packrat/ui';
+import {
+  Form,
+  RSkeleton,
+  RStack,
+  RText,
+  SubmitButton,
+  FormInput,
+  BImagePicker,
+} from '@packrat/ui';
 import useTheme from '../../hooks/useTheme';
+import { useTripImages } from 'app/hooks/trips';
 
 const TableContainerComponent = ({ currentPack }) => {
   const { data, isLoading } = useFetchSinglePack(currentPack.id || currentPack);
@@ -35,22 +44,46 @@ const WeatherCardComponent = ({ weatherObject, weatherWeek, data }) => (
 );
 
 const TripCardComponent = ({ data, weatherObject, currentTheme }) =>
-  data?.geojson?.features?.length && (
+  data?.geojson?.features?.length ? (
     // data?.geojson && (
     <TripMapCard
       shape={data.geojson}
       // cords={
       //   data?.weather ? JSON?.parse(data?.weather)?.coord : weatherObject?.coord
       // }
     />
-  );
+  ) : null;
 
 const ScoreContainerComponent = ({ data, isOwner }) => (
   <View style={{ marginTop: '5%' }}>
     <ScoreContainer type="trip" data={data} isOwner={isOwner} />
   </View>
 );
 
+const TripReview = ({ data }) => {
+  const { addTripImage } = useTripImages();
+  return data.is_completed ? (
+    <Form>
+      <RStack style={{ marginTop: 16, gap: 8, padding: 18 }}>
+        <RStack>
+          <BImagePicker
+            onChange={(images) => addTripImage(data.id, images[0])}
+          />
+        </RStack>
+        <FormInput
+          name="message"
+          placeholder="Type a message..."
+          multiline
+          value={''}
+        />
+        <SubmitButton>
+          <RText>Send</RText>
+        </SubmitButton>
+      </RStack>
+    </Form>
+  ) : null;
+};
+
 const loadStyles = (theme) => {
   const { isDark, currentTheme } = theme;
   return {
@@ -83,5 +116,6 @@ export {
   WeatherCardComponent,
   TripCardComponent,
   ScoreContainerComponent,
+  TripReview,
   loadStyles,
 };

packages/config/src/index.js

@@ -7,7 +7,7 @@ import { viteSource } from './sources/vite';
 
 // Simplifying environment variable access using logical OR
 const API_URL =
-  viteSource.VITE_PUBLIC_API_URL ||
+  import.meta.env.VITE_PUBLIC_API_URL ||
   process.env.NEXT_PUBLIC_API_URL ||
   process.env.EXPO_PUBLIC_API_URL;
 const WEB_CLIENT_ID =

packages/crosspath/types/lib-interface.d.ts

@@ -1,6 +1,4 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(
-  props: Parameters<LinkComponent>,
-): ReturnType<LinkComponent>;
+export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;

packages/crosspath/types/model/types.d.ts

@@ -1,32 +1,27 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-  initial?: string;
-  parse?: (param: string) => unknown;
-  stringify?: (param: unknown) => string;
+    initial?: string;
+    parse?: (param: string) => unknown;
+    stringify?: (param: unknown) => string;
 }
 export interface Router {
-  push: (url: URL) => void;
-  replace: (url: URL) => void;
-  back: () => void;
+    push: (url: URL) => void;
+    replace: (url: URL) => void;
+    back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL =
-  | string
-  | {
-      pathname?: string;
-      query?: Record<string, any>;
-      state?: Record<string, any>;
-      hash?: string;
-      as?: string | object;
-    };
+export type URL = string | {
+    pathname?: string;
+    query?: Record<string, any>;
+    state?: Record<string, any>;
+    hash?: string;
+    as?: string | object;
+};
 export type CreateParam = <T>() => {
-  useParam: (
-    key: keyof T,
-    options?: CreateParamOptions,
-  ) => [value: any, setValue: (value: any) => void];
-  useParams: (key: keyof T) => {
-    params: T;
-    setParams: (value: any) => void;
-  };
+    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
+    useParams: (key: keyof T) => {
+        params: T;
+        setParams: (value: any) => void;
+    };
 };

packages/ui/package.json

@@ -36,6 +36,7 @@
     "expo-image-picker": "^14.7.1",
     "jotai": "^2.6.4",
     "react": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.50.1",
     "tamagui": "1.96.0",
     "zeego": "^1.7.2"