2022-03-13 22:13:36 +01:00
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
|
|
import { useFormik } from 'formik';
|
|
|
|
import * as Yup from 'yup';
|
|
|
|
import Modal from 'components/Modal';
|
2022-03-18 16:40:42 +01:00
|
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { newHttpRequest } from 'providers/ReduxStore/slices/collections';
|
|
|
|
import { addTab } from 'providers/ReduxStore/slices/tabs';
|
2022-03-13 22:13:36 +01:00
|
|
|
|
2022-03-19 10:53:20 +01:00
|
|
|
const NewRequest = ({collection, item, onClose}) => {
|
2022-03-18 16:40:42 +01:00
|
|
|
const dispatch = useDispatch();
|
2022-03-13 22:13:36 +01:00
|
|
|
const inputRef = useRef();
|
|
|
|
const formik = useFormik({
|
|
|
|
enableReinitialize: true,
|
|
|
|
initialValues: {
|
|
|
|
requestName: ''
|
|
|
|
},
|
|
|
|
validationSchema: Yup.object({
|
|
|
|
requestName: Yup.string()
|
|
|
|
.min(1, 'must be atleast 1 characters')
|
|
|
|
.max(50, 'must be 50 characters or less')
|
|
|
|
.required('name is required')
|
|
|
|
}),
|
|
|
|
onSubmit: (values) => {
|
2022-03-19 10:53:20 +01:00
|
|
|
dispatch(newHttpRequest(values.requestName, collection.uid, item ? item.uid : null))
|
2022-03-18 16:40:42 +01:00
|
|
|
.then((action) => {
|
|
|
|
dispatch(addTab({
|
|
|
|
uid: action.payload.item.uid,
|
2022-03-19 10:53:20 +01:00
|
|
|
collectionUid: collection.uid
|
2022-03-18 16:40:42 +01:00
|
|
|
}));
|
|
|
|
});
|
2022-03-19 10:53:20 +01:00
|
|
|
onClose();
|
2022-03-13 22:13:36 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if(inputRef && inputRef.current) {
|
|
|
|
inputRef.current.focus();
|
|
|
|
}
|
|
|
|
}, [inputRef]);
|
|
|
|
|
|
|
|
const onSubmit = () => formik.handleSubmit();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Modal
|
|
|
|
size="sm"
|
|
|
|
title='New Request'
|
|
|
|
confirmText='Create'
|
|
|
|
handleConfirm={onSubmit}
|
2022-03-19 10:53:20 +01:00
|
|
|
handleCancel={onClose}
|
2022-03-13 22:13:36 +01:00
|
|
|
>
|
|
|
|
<form className="grafnode-form" onSubmit={formik.handleSubmit}>
|
|
|
|
<div>
|
|
|
|
<label htmlFor="requestName" className="block font-semibold">Request Name</label>
|
|
|
|
<input
|
|
|
|
id="collection-name" type="text" name="requestName"
|
|
|
|
ref={inputRef}
|
|
|
|
className="block textbox mt-2 w-full"
|
|
|
|
onChange={formik.handleChange}
|
|
|
|
value={formik.values.requestName || ''}
|
|
|
|
/>
|
|
|
|
{formik.touched.requestName && formik.errors.requestName ? (
|
|
|
|
<div className="text-red-500">{formik.errors.requestName}</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default NewRequest;
|