This commit is contained in:
mark H 2024-09-06 10:43:17 +08:00
parent b246410e11
commit e5b7b5ddf5
5 changed files with 45 additions and 21 deletions

View File

@ -22,7 +22,7 @@ const Login = ({ setisLoggedIn }) => {
const Login = async () => {
setisLoading(true);
console.log(email, password);
const url = "http://localhost:3000/api/auth/login";
const url = "http://localhost:3001/api/auth/login";
const options = {
headers: {
@ -85,7 +85,7 @@ const Login = ({ setisLoggedIn }) => {
const Register = async () => {
setisLoading(true);
console.log(email, password);
const url = "http://localhost:3000/api/auth/register";
const url = "http://localhost:3001/api/auth/register";
const options = {
headers: {

View File

@ -6,12 +6,18 @@ import JsonEditor from "./Editors";
import { FaPaperPlane } from "react-icons/fa6";
import { IoMdDownload } from "react-icons/io";
import axios from "axios";
import CircularProgress from "@mui/material/CircularProgress";
interface FormProps {
onSubmit: (data: any) => void;
}
const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
const Form: React.FC<FormProps> = ({
onSubmit,
content,
setisRefresh,
isLoading,
}) => {
const [method, setMethod] = useState(content?.method ?? "GET");
const [url, setUrl] = useState(content?.endpoint ?? "");
const [isSaved, setisSaved] = useState(false);
@ -21,7 +27,9 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
const [headers, setHeaders] = useState(
content?.header ?? [{ key: "", value: "" }]
);
const [formData, setformData] = useState(content?.form_data ?? [{ key: "", value: "" }]);
const [formData, setformData] = useState(
content?.form_data ?? [{ key: "", value: "" }]
);
const [jsonBody, setJsonBody] = useState(content ?? {});
const [activeTab, setActiveTab] = useState("query-params");
@ -69,18 +77,18 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
// };
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Reduce query parameters and headers to objects
const params = queryParams.reduce((acc, { key, value }) => {
if (key) acc[key] = value;
return acc;
}, {} as Record<string, string>);
const headerObj = headers.reduce((acc, { key, value }) => {
if (key) acc[key] = value;
return acc;
}, {} as Record<string, string>);
// If formData is not empty, convert it to FormData
let data: Record<string, any> | FormData;
if (formData.length > 0) {
@ -97,7 +105,7 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
} else {
data = jsonBody; // If formData is empty, use jsonBody
}
// Call onSubmit with the appropriate data
onSubmit({
method,
@ -107,7 +115,6 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
data,
});
};
const handleRequestEditorChange = (value: string) => {
setJsonBody(value);
@ -127,7 +134,7 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
params: queryParams,
};
const response1 = await axios.patch(
`http://localhost:3000/api/endpoints/update/${content?._id}`,
`http://localhost:3001/api/endpoints/update/${content?._id}`,
body1,
{
headers: {
@ -179,7 +186,16 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
type="submit"
className="btn btn-primary border-solid border-[blue] text-[blue] rounded-lg flex justify-center items-center hover:bg-[#abf9ff]"
>
<h1 className="mr-2">Send</h1>
{isLoading ? (
<div className="m-0 text-blue-500">
{/* <CircularProgress color="inherit" size={25} /> */}
<h1 className="mr-2">Sending</h1>
</div>
) : (
<h1 className="mr-2">Send</h1>
)}
<FaPaperPlane />
</button>
{content?._id ? (

View File

@ -57,7 +57,7 @@ const FormGroup: React.FC = () => {
setIsDialogOpen1(false);
};
const getCollections = () => {
fetch("http://localhost:3000/api/collections/")
fetch("http://localhost:3001/api/collections/")
.then((res) => res.json())
.then((data) => {
console.log(data);
@ -89,7 +89,7 @@ const FormGroup: React.FC = () => {
};
try {
const response = await axios.post(
"http://localhost:3000/api/collections/create",
"http://localhost:3001/api/collections/create",
body,
{
headers: {
@ -114,7 +114,7 @@ const FormGroup: React.FC = () => {
const deleteCollection = async (collectionId) => {
try {
const response = await axios.delete(
"http://localhost:3000/api/collections/" + collectionId + "/delete",
"http://localhost:3001/api/collections/" + collectionId + "/delete",
{
headers: {
@ -137,7 +137,7 @@ const FormGroup: React.FC = () => {
const deleteEndpoint = async (endpointId) => {
try {
const response = await axios.delete(
"http://localhost:3000/api/endpoints/" + endpointId + "/delete",
"http://localhost:3001/api/endpoints/" + endpointId + "/delete",
{
headers: {
@ -167,7 +167,7 @@ const FormGroup: React.FC = () => {
try {
// Attempt to create the endpoint
const response = await axios.post(
"http://localhost:3000/api/endpoints/create",
"http://localhost:3001/api/endpoints/create",
body,
{
headers: {
@ -182,7 +182,7 @@ const FormGroup: React.FC = () => {
endpoint_id: response.data._id,
};
const response1 = await axios.patch(
`http://localhost:3000/api/collections/update/${collectionId}/endpoint`,
`http://localhost:3001/api/collections/update/${collectionId}/endpoint`,
body1,
{
headers: {
@ -212,7 +212,7 @@ const FormGroup: React.FC = () => {
name: newCollectionName !== "" ? newCollectionName : name,
};
const response1 = await axios.patch(
`http://localhost:3000/api/collections/update/${id}`,
`http://localhost:3001/api/collections/update/${id}`,
body1,
{
headers: {
@ -238,7 +238,7 @@ const FormGroup: React.FC = () => {
name: newEndpointName !== "" ? newEndpointName : name,
};
const response1 = await axios.patch(
`http://localhost:3000/api/endpoints/update/${id}`,
`http://localhost:3001/api/endpoints/update/${id}`,
body1,
{
headers: {

View File

@ -11,8 +11,10 @@ const FormSingle: React.FC = ({ content, setisRefresh }) => {
const [responseSize, setResponseSize] = useState("");
const [error, setError] = useState(null);
const [savedId, setsavedId] = useState(null);
const [isLoading, setisLoading] = useState(false)
const handleFormSubmit = async (data: any) => {
setisLoading(true)
try {
const startTime = new Date().getTime();
const res = await axios(data);
@ -24,9 +26,11 @@ const FormSingle: React.FC = ({ content, setisRefresh }) => {
JSON.stringify(res.data).length + JSON.stringify(res.headers).length
)
);
setisLoading(false);
setError(null); // Reset error if the request is successful
} catch (error) {
setError(error);
setisLoading(false)
setResponse(null); // Clear the response if there is an error
console.error(error);
}
@ -46,6 +50,7 @@ const FormSingle: React.FC = ({ content, setisRefresh }) => {
setisRefresh={setisRefresh}
content={content}
onSubmit={handleFormSubmit}
isLoading={isLoading}
/>
{response && (
<Response

View File

@ -121,14 +121,17 @@ const KeyValuePair: React.FC<KeyValuePairProps> = ({
{Array.isArray(pair.value) && pair.value.length > 0 && (
<div className="flex flex-wrap ml-2">
{pair.value.map((file, idx) => (
<div key={idx} className="flex items-center mb-1 border-[#eee] border px-1 rounded-md ">
<div
key={idx}
className="flex items-center mb-1 border-[#eee] border px-1 rounded-md "
>
<span className="mr-2 text-[13px]">{file.name}</span>
<button
type="button"
className="btn btn-outline-danger text-red-400 border-none shadow-none p-1 "
onClick={() => handleRemoveFile(file)}
>
<FaXmark/>
<FaXmark />
</button>
</div>
))}