feat: create application data sheet

szarbartosz · Nov 8, 2024 · e17691b · e17691b
1 parent 10ae557
commit e17691b
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 22 deletions.
diff --git a/src/app/investments/details.tsx b/src/app/investments/details.tsx
@@ -13,6 +13,7 @@ import {
   useUpdateInvestmentMutation,
 } from '@/api/investments.service';
 import ApplicationCard from '@/components/application-card';
+import ApplicationSheet from '@/components/bottom-sheet/application-sheet';
 import DateSheet from '@/components/bottom-sheet/date-sheet';
 import StatusSheet from '@/components/bottom-sheet/status-sheet';
 import DateCard from '@/components/date-card';
@@ -69,6 +70,7 @@ const InvestmentDetailsScreen: FC = () => {
   const decisionDateSheetRef = useRef<BottomSheetModal>(null);
   const deforestationDateSheetRef = useRef<BottomSheetModal>(null);
   const plantingDateSheetRef = useRef<BottomSheetModal>(null);
+  const applicationSheetRef = useRef<BottomSheetModal>(null);
 
   return (
     investment && (
@@ -199,7 +201,10 @@ const InvestmentDetailsScreen: FC = () => {
           />
 
           <H4 marginTop="$4">Dane do wniosku</H4>
-          <ApplicationCard application={investment.application} />
+          <ApplicationCard
+            application={investment.application}
+            handlePress={() => applicationSheetRef.current?.present()}
+          />
 
           <H4 marginTop="$4">Notatki</H4>
           <NotesCard notes={investment.notes} />
@@ -292,6 +297,7 @@ const InvestmentDetailsScreen: FC = () => {
               })
             }
           />
+          <ApplicationSheet investment={investment} ref={applicationSheetRef} />
         </BottomSheetModalProvider>
       </GestureHandlerRootView>
     )

diff --git a/src/app/investments/form.tsx b/src/app/investments/form.tsx
@@ -72,7 +72,7 @@ const AddOrUpdateInvestmentScreen: FC = () => {
     } else {
       await addInvestment(data);
     }
-    router.replace('/');
+    router.back();
   };
 
   return (

diff --git a/src/components/application-card.tsx b/src/components/application-card.tsx
@@ -2,13 +2,13 @@ import { FC } from 'react';
 import { Button, H4, Text, useTheme, XGroup, YGroup } from 'tamagui';
 
 import { Application } from '@/types/data';
-import { formattedDate } from '@/utils/helpers';
 
 type Props = {
   application: Application;
+  handlePress: () => void;
 };
 
-const ApplicationCard: FC<Props> = ({ application }) => {
+const ApplicationCard: FC<Props> = ({ application, handlePress }) => {
   const theme = useTheme();
 
   return (
@@ -29,23 +29,19 @@ const ApplicationCard: FC<Props> = ({ application }) => {
           </YGroup.Item>
           <YGroup.Item>
             <H4 fontSize={14}>Wycinka komercyjna</H4>
-            <Text color={theme.color11}>{application.isCommercial ? 'Tak' : 'Nie'}</Text>
+            <Text color={theme.color11}>{application.isCommercial || '-'}</Text>
           </YGroup.Item>
           <YGroup.Item>
             <H4 fontSize={14}>Przyczyna wycinki</H4>
             <Text color={theme.color11}>{application.deforestationCause || '-'}</Text>
           </YGroup.Item>
           <YGroup.Item>
             <H4 fontSize={14}>Termin przeprowadzenia wycinki</H4>
-            <Text color={theme.color11}>
-              {formattedDate(application.deforestationDate, 'D MMMM YYYY')}
-            </Text>
+            <Text color={theme.color11}>{application.deforestationDate || '-'}</Text>
           </YGroup.Item>
           <YGroup.Item>
             <H4 fontSize={14}>Termin wykonania nasadzeń zastępczych</H4>
-            <Text color={theme.color11}>
-              {formattedDate(application.plantingDate, 'D MMMM YYYY')}
-            </Text>
+            <Text color={theme.color11}>{application.plantingDate || '-'}</Text>
           </YGroup.Item>
           <YGroup.Item>
             <H4 fontSize={14}>Miejsce nasadzeń</H4>
@@ -56,8 +52,7 @@ const ApplicationCard: FC<Props> = ({ application }) => {
             <Text color={theme.color11}>{application.species || '-'}</Text>
           </YGroup.Item>
         </YGroup>
-        {/* TODO: add edit button functionality */}
-        <Button position="absolute" right={18} top={18} onPress={() => {}} borderRadius="$10">
+        <Button position="absolute" right={18} top={18} onPress={handlePress} borderRadius="$10">
           <Text>Edytuj</Text>
         </Button>
       </XGroup.Item>

diff --git a/src/components/bottom-sheet/application-sheet.tsx b/src/components/bottom-sheet/application-sheet.tsx
@@ -0,0 +1,147 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { router } from 'expo-router';
+import React, { forwardRef, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Button, H4, ScrollView, useTheme, View, YStack } from 'tamagui';
+
+import { useUpdateInvestmentMutation } from '@/api/investments.service';
+import Input from '@/components/input';
+import { UpdateApplicationRequest } from '@/models/investment';
+import { Investment } from '@/types/data';
+import { applicationValidationSchema } from '@/utils/schemas';
+
+type Props = { investment: Investment };
+
+const ApplicationSheet = forwardRef<BottomSheetModal, Props>(({ investment }, ref) => {
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} />,
+    []
+  );
+
+  const [updateInvestment] = useUpdateInvestmentMutation();
+
+  const getDefaultValues = () => ({
+    signature: investment.application.signature || '',
+    isCommercial: investment.application.isCommercial || '',
+    deforestationCause: investment.application.deforestationCause || '',
+    deforestationDate: investment.application.deforestationDate || '',
+    plantingDate: investment.application.plantingDate || '',
+    plantingSite: investment.application.plantingSite || '',
+    species: investment.application.species || '',
+  });
+
+  const { control, handleSubmit } = useForm<UpdateApplicationRequest>({
+    mode: 'onChange',
+    defaultValues: getDefaultValues(),
+    resolver: zodResolver(applicationValidationSchema),
+  });
+
+  const onSubmit = async (data: UpdateApplicationRequest) => {
+    await updateInvestment({
+      id: investment.id,
+      data: { ...investment, application: { ...investment.application, ...data } },
+    });
+
+    (ref as React.RefObject<BottomSheetModal>).current?.dismiss();
+  };
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      snapPoints={['70%']}
+      handleIndicatorStyle={{ display: 'none' }}
+      backdropComponent={renderBackdrop}
+      enableDynamicSizing={false}
+      backgroundStyle={{
+        backgroundColor: theme.color1.val,
+      }}
+      containerStyle={{ zIndex: 2 }}>
+      <BottomSheetView
+        style={{
+          flexDirection: 'column',
+          paddingHorizontal: 24,
+          paddingBottom: Platform.OS === 'ios' ? (insets.bottom ? 60 : 40) : 40,
+          rowGap: 24,
+        }}>
+        <H4 marginTop="$4">Dane do winosku</H4>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <YStack paddingBottom="$10">
+            <Input
+              name="signature"
+              label="Sygnatura sprawy"
+              placeholder="Podaj sygnaturę"
+              control={control}
+            />
+            <Input
+              name="isCommercial"
+              label="Wycinka komercyjna"
+              placeholder="Wybierz opcję"
+              control={control}
+            />
+            <Input
+              name="deforestationCause"
+              label="Przyczyna wycinki"
+              placeholder="Podaj przyczynę wycinki"
+              control={control}
+              multiline={true}
+            />
+            <Input
+              name="deforestationDate"
+              label="Data przeprawdzenia wycinki"
+              placeholder="Podaj datę wycinki"
+              control={control}
+            />
+            <Input
+              name="plantingDate"
+              label="Termin wykonania nasadzeń zastępczych"
+              placeholder="Podaj datę nasadzeń"
+              control={control}
+            />
+            <Input
+              name="plantingSite"
+              label="Miejsce nasadzeń"
+              placeholder="Podaj miejsce nasadzeń"
+              control={control}
+            />
+            <Input
+              name="species"
+              label="Gatunki"
+              placeholder="Podaj gatunki"
+              control={control}
+              autoCapitalize="none"
+            />
+            <View gap="$4" marginVertical="$4">
+              <Button
+                backgroundColor={theme.$color12}
+                borderColor={theme.$color12}
+                color={theme.$color1}
+                onPress={handleSubmit(onSubmit)}>
+                Zapisz
+              </Button>
+              <Button
+                backgroundColor={theme.$color4}
+                color={theme.$color12}
+                borderColor={theme.$color12}
+                onPress={() => router.back()}>
+                Anuluj
+              </Button>
+            </View>
+          </YStack>
+        </ScrollView>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+});
+
+export default ApplicationSheet;
diff --git a/src/components/input.tsx b/src/components/input.tsx
@@ -57,7 +57,7 @@ const Input = <T extends FieldValues>(props: Props<T>) => {
       case 'about':
         return 100;
       default:
-        return 34;
+        return 200;
     }
   };
 

diff --git a/src/components/select.tsx b/src/components/select.tsx
@@ -3,17 +3,13 @@ import { FieldValues, useController, UseControllerProps } from 'react-hook-form'
 import { Adapt, Label, Select as SelectPicker, Sheet, Text, useTheme, YStack } from 'tamagui';
 
 import { CheckIcon, ChevronDownIcon } from '@/assets/icons';
-import { ContentTypes } from '@/types/form';
 
 type SelectType = {
   name: string;
   label?: string;
   items: { id: number; label: string }[];
-  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  secureTextEntry?: boolean;
   placeholder?: string;
-  textContentType?: ContentTypes;
-  multiline?: boolean;
+  booleanValue?: boolean;
 };
 
 export type Props<T extends FieldValues> = SelectType & UseControllerProps<T>;
@@ -27,12 +23,15 @@ const Select = <T extends FieldValues>(props: Props<T>) => {
 
   const theme = useTheme();
 
+  const extractValue = (value: string) =>
+    items.find(item => item.label.toLowerCase() === value)?.id;
+
   return (
     <YStack>
       <Label>{label}</Label>
       <SelectPicker
         value={value}
-        onValueChange={v => onChange(items.find(item => item.label.toLowerCase() === v)?.id)}
+        onValueChange={v => onChange(extractValue(v))}
         disablePreventBodyScroll
         {...props}>
         <SelectPicker.Trigger

diff --git a/src/components/status-button.tsx b/src/components/status-button.tsx
@@ -18,7 +18,6 @@ const StatusButton: FC<Props> = ({ status, onPress, active }) => {
     <Button
       onPress={onPress}
       style={{
-        width: 'fit-content',
         height: 50,
         borderRadius: 8,
         display: 'flex',

diff --git a/src/models/investment.ts b/src/models/investment.ts
@@ -25,9 +25,22 @@ export type UpdateInvestmentRequest = {
   plantingDate?: string;
   plantingDone?: boolean;
   address: {
+    id?: number;
+    userId?: number;
     city?: string;
     street?: string;
     number?: string;
     zipCode?: string;
   };
+  application?: UpdateApplicationRequest;
+};
+
+export type UpdateApplicationRequest = {
+  signature?: string;
+  isCommercial?: string;
+  deforestationCause?: string;
+  deforestationDate?: string;
+  plantingDate?: string;
+  plantingSite?: string;
+  species?: string;
 };
diff --git a/src/types/data.ts b/src/types/data.ts
@@ -14,7 +14,7 @@ export type Note = {
 
 export type Application = {
   signature: string;
-  isCommercial: boolean;
+  isCommercial: string;
   deforestationCause: string;
   deforestationDate: string;
   plantingDate: string;

diff --git a/src/utils/schemas.ts b/src/utils/schemas.ts
@@ -49,6 +49,16 @@ export const investmentValidationSchema = z.object({
   }),
 });
 
+export const applicationValidationSchema = z.object({
+  signature: z.string().optional(),
+  isCommercial: z.string().optional(),
+  deforestationCause: z.string().optional(),
+  deforestationDate: z.string().optional(),
+  plantingDate: z.string().optional(),
+  plantingSite: z.string().optional(),
+  species: z.string().optional(),
+});
+
 export const investorValidationSchema = z.object({
   name: z.string().min(1, 'To pole jest wymagane'),
   contactPerson: z.string().min(1, 'To pole jest wymagane'),