fix: due date manager now sends the correct new due date

This commit is contained in:
Jordan Knott 2020-08-28 20:59:45 -05:00
parent 4988176220
commit 47782d6d86
2 changed files with 15 additions and 13 deletions

View File

@ -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>

View File

@ -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}