leumas-private-shared/src/LMS-WildCard-Helpers/BulkRequests/RequestEditor.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import { useState } from 'react';
import {classes} from "../../../styles/tailwindStyles"
import React from 'react';
const RequestEditor = ({ setCustomRequests, sendBulkRequests }) => {
  const [currentRequest, setCurrentRequest] = useState({
    method: "GET",
    endpoint: "",
    body: "",
    headers: "",
    params: "",
    query: ""
  });
  
  const [allRequests, setAllRequests] = useState([]);

  const handleAddRequest = () => {
    const newRequests = [...allRequests, currentRequest];
    setAllRequests(newRequests);
    setCustomRequests(newRequests);
  };

  const handleSendRequests = () => {
    sendBulkRequests(allRequests);
  };

  return (
    <div>
    <h3 className={classes.title}>Build Your Request</h3>
    <div className={classes.formElement}>
      <select className={classes.select} value={currentRequest.method} onChange={e => setCurrentRequest({ ...currentRequest, method: e.target.value })}>
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        {/* Add other HTTP methods as needed */}
      </select>
    </div>
    <div className={classes.formElement}>
      <input className={classes.input} placeholder="Endpoint" value={currentRequest.endpoint} onChange={e => setCurrentRequest({ ...currentRequest, endpoint: e.target.value })} />
    </div>
    <div>
      <button className={classes.button} onClick={handleAddRequest}>Add Request</button>
      <button className={classes.secondaryButton} onClick={handleSendRequests}>Send Requests</button>
    </div>
  </div>
  );
};

export default RequestEditor;