fix: due date manager now sends the correct new due date
This commit is contained in:
parent
4988176220
commit
47782d6d86
@ -111,17 +111,13 @@ const HeaderActions = styled.div`
|
|||||||
|
|
||||||
const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
|
const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
|
||||||
const now = moment();
|
const now = moment();
|
||||||
const [textStartDate, setTextStartDate] = useState(now.format('YYYY-MM-DD'));
|
const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
|
||||||
const [startDate, setStartDate] = useState(new Date());
|
const [startDate, setStartDate] = useState(new Date());
|
||||||
useEffect(() => {
|
|
||||||
setTextStartDate(moment(startDate).format('YYYY-MM-DD'));
|
|
||||||
}, [startDate]);
|
|
||||||
|
|
||||||
const [textEndTime, setTextEndTime] = useState(now.format('h:mm A'));
|
|
||||||
const [endTime, setEndTime] = useState(now.toDate());
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTextEndTime(moment(endTime).format('h:mm A'));
|
const newDate = moment(startDate).format('YYYY-MM-DD');
|
||||||
}, [endTime]);
|
setValue('endDate', newDate);
|
||||||
|
}, [startDate]);
|
||||||
|
|
||||||
const years = _.range(2010, getYear(new Date()) + 10, 1);
|
const years = _.range(2010, getYear(new Date()) + 10, 1);
|
||||||
const months = [
|
const months = [
|
||||||
@ -138,9 +134,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
'November',
|
'November',
|
||||||
'December',
|
'December',
|
||||||
];
|
];
|
||||||
const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
|
|
||||||
const saveDueDate = (data: any) => {
|
const saveDueDate = (data: any) => {
|
||||||
const newDate = moment(`${data.endDate} ${data.endTime}`, 'YYYY-MM-DD h:mm A');
|
const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
|
||||||
if (newDate.isValid()) {
|
if (newDate.isValid()) {
|
||||||
onDueDateChange(task, newDate.toDate());
|
onDueDateChange(task, newDate.toDate());
|
||||||
}
|
}
|
||||||
@ -149,11 +144,12 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
return (
|
return (
|
||||||
<DueDateInput
|
<DueDateInput
|
||||||
id="endTime"
|
id="endTime"
|
||||||
|
value={value}
|
||||||
name="endTime"
|
name="endTime"
|
||||||
ref={$ref}
|
ref={$ref}
|
||||||
width="100%"
|
width="100%"
|
||||||
variant="alternate"
|
variant="alternate"
|
||||||
label="Date"
|
label="Time"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -168,7 +164,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
width="100%"
|
width="100%"
|
||||||
variant="alternate"
|
variant="alternate"
|
||||||
label="Date"
|
label="Date"
|
||||||
defaultValue={textStartDate}
|
defaultValue={now.format('YYYY-MM-DD')}
|
||||||
ref={register({
|
ref={register({
|
||||||
required: 'End date is required.',
|
required: 'End date is required.',
|
||||||
})}
|
})}
|
||||||
@ -177,6 +173,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
<FormField>
|
<FormField>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
|
defaultValue={now.toDate()}
|
||||||
name="endTime"
|
name="endTime"
|
||||||
render={({ onChange, onBlur, value }) => (
|
render={({ onChange, onBlur, value }) => (
|
||||||
<DatePicker
|
<DatePicker
|
||||||
@ -244,7 +241,9 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
selected={startDate}
|
selected={startDate}
|
||||||
inline
|
inline
|
||||||
onChange={date => {
|
onChange={date => {
|
||||||
setStartDate(date ?? new Date());
|
if (date) {
|
||||||
|
setStartDate(date);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</DueDatePickerWrapper>
|
</DueDatePickerWrapper>
|
||||||
|
@ -91,6 +91,7 @@ type InputProps = {
|
|||||||
name?: string;
|
name?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
defaultValue?: string;
|
defaultValue?: string;
|
||||||
|
value?: string;
|
||||||
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -129,6 +130,7 @@ const Input = React.forwardRef(
|
|||||||
onClick,
|
onClick,
|
||||||
floatingLabel,
|
floatingLabel,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
|
value,
|
||||||
id,
|
id,
|
||||||
}: InputProps,
|
}: InputProps,
|
||||||
$ref: any,
|
$ref: any,
|
||||||
@ -166,6 +168,7 @@ const Input = React.forwardRef(
|
|||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
autoComplete={autocomplete ? 'on' : 'off'}
|
autoComplete={autocomplete ? 'on' : 'off'}
|
||||||
defaultValue={defaultValue}
|
defaultValue={defaultValue}
|
||||||
|
value={value}
|
||||||
hasIcon={typeof icon !== 'undefined'}
|
hasIcon={typeof icon !== 'undefined'}
|
||||||
width={width}
|
width={width}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
Loading…
Reference in New Issue
Block a user