From 9dac2e9069b3e8b5e5c1055ea8b2f6137034f133 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Wed, 9 Jun 2021 09:11:42 +0200
Subject: [PATCH] Attach controller to save array into form.
Data is flushed when input value is changed. See issue #12.
---
.../ReservationPage/Reservation/TripStage.tsx | 74 ++++++++++++-------
1 file changed, 46 insertions(+), 28 deletions(-)
diff --git a/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx b/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
index 5f194d8..d89b2e5 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
+++ b/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
@@ -8,41 +8,59 @@ import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
import { InputField } from 'components/Auth/InputField/InputField';
import React, { FC, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { Control, Controller, useFormContext } from 'react-hook-form';
+import { InsertReservationProps } from './InsertReservationProps';
-export const TripStage: FC = () => {
+type TripStageProps = {
+ control: Control<InsertReservationProps>;
+};
+
+// FIX: Data is flushed onChange. Similar problem in seniorSearch.
+export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
const [stage, setStage] = useState<string[]>([]);
const [value, setValue] = useState<string>('');
- const addStage = (): void => {
+ const addStage = (onChange: any): void => {
setStage([...stage, value]);
+ onChange(stage);
};
return (
- <>
- <Timeline>
- {stage.map((el, key) => (
- <TimelineItem>
- <TimelineSeparator>
- <TimelineDot />
- <TimelineConnector />
- </TimelineSeparator>
- <TimelineContent>{el}</TimelineContent>
- </TimelineItem>
- ))}
- </Timeline>
- <div>
- <TextField
- id="address"
- label="address"
- type="text"
- variant="outlined"
- onChange={(e) => setValue(e.target.value)}
- />
- <Button variant="outlined" type="button" onClick={addStage}>
- Add
- </Button>
- </div>
- </>
+ <Controller
+ name="tripStages"
+ control={control}
+ defaultValue={[]}
+ as={({ onChange }) => (
+ <>
+ <Timeline>
+ {stage.map((el, key) => (
+ <TimelineItem>
+ <TimelineSeparator>
+ <TimelineDot />
+ <TimelineConnector />
+ </TimelineSeparator>
+ <TimelineContent>{el}</TimelineContent>
+ </TimelineItem>
+ ))}
+ </Timeline>
+ <div>
+ <TextField
+ id="address"
+ label="address"
+ type="text"
+ variant="outlined"
+ onChange={(e) => setValue(e.target.value)}
+ />
+ <Button
+ variant="outlined"
+ type="button"
+ onClick={() => addStage(onChange)}
+ >
+ Add
+ </Button>
+ </div>
+ </>
+ )}
+ />
);
};
--
GitLab