Added api tester

src/plays/api-request-builder/ApiRequestBuilder.jsx

@@ -0,0 +1,218 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState, useEffect } from 'react';
+import RequestPanel from './components/RequestPanel';
+import ResponsePanel from './components/ResponsePanel';
+import HistoryPanel from './components/HistoryPanel';
+import './styles.css';
+
+function ApiRequestBuilder(props) {
+  const [method, setMethod] = useState('GET');
+  const [url, setUrl] = useState('https://jsonplaceholder.typicode.com/posts/1');
+  const [headers, setHeaders] = useState([
+    { key: 'Content-Type', value: 'application/json', enabled: true }
+  ]);
+  const [body, setBody] = useState('');
+  const [response, setResponse] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [history, setHistory] = useState([]);
+  const [activeTab, setActiveTab] = useState('body');
+  const [bodyType, setBodyType] = useState('json');
+  const [showHistory, setShowHistory] = useState(false);
+
+  // Load history from localStorage on mount
+  useEffect(() => {
+    const savedHistory = localStorage.getItem('api-request-history');
+    if (savedHistory) {
+      try {
+        setHistory(JSON.parse(savedHistory));
+      } catch (error) {
+        console.error('Failed to load history:', error);
+      }
+    }
+  }, []);
+
+  // Save history to localStorage
+  const saveToHistory = (request, response) => {
+    const historyItem = {
+      id: Date.now(),
+      timestamp: new Date().toISOString(),
+      method: request.method,
+      url: request.url,
+      headers: request.headers,
+      body: request.body,
+      response: {
+        status: response.status,
+        statusText: response.statusText,
+        data: response.data,
+        time: response.time,
+        size: response.size
+      }
+    };
+
+    const updatedHistory = [historyItem, ...history].slice(0, 50); // Keep last 50 requests
+    setHistory(updatedHistory);
+    localStorage.setItem('api-request-history', JSON.stringify(updatedHistory));
+  };
+
+  const handleSendRequest = async () => {
+    if (!url.trim()) {
+      setResponse({
+        error: true,
+        message: 'Please enter a valid URL',
+        status: 0
+      });
+
+      return;
+    }
+
+    setIsLoading(true);
+    const startTime = Date.now();
+
+    try {
+      // Prepare headers
+      const requestHeaders = {};
+      headers.forEach((header) => {
+        if (header.enabled && header.key.trim()) {
+          requestHeaders[header.key] = header.value;
+        }
+      });
+
+      // Prepare request options
+      const options = {
+        method: method,
+        headers: requestHeaders
+      };
+
+      // Add body for methods that support it
+      if (['POST', 'PUT', 'PATCH'].includes(method) && body.trim()) {
+        if (bodyType === 'json') {
+          try {
+            JSON.parse(body); // Validate JSON
+            options.body = body;
+          } catch (e) {
+            throw new Error('Invalid JSON in request body');
+          }
+        } else {
+          options.body = body;
+        }
+      }
+
+      const response = await fetch(url, options);
+      const endTime = Date.now();
+      const responseTime = endTime - startTime;
+
+      let responseData;
+      const contentType = response.headers.get('content-type');
+
+      if (contentType && contentType.includes('application/json')) {
+        responseData = await response.json();
+      } else {
+        responseData = await response.text();
+      }
+
+      const responseSize = new Blob([JSON.stringify(responseData)]).size;
+
+      const responseObj = {
+        status: response.status,
+        statusText: response.statusText,
+        data: responseData,
+        headers: Object.fromEntries(response.headers.entries()),
+        time: responseTime,
+        size: responseSize,
+        error: false
+      };
+
+      setResponse(responseObj);
+
+      // Save to history
+      saveToHistory({ method, url, headers, body }, responseObj);
+    } catch (error) {
+      setResponse({
+        error: true,
+        message: error.message,
+        status: 0,
+        time: Date.now() - startTime
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadFromHistory = (item) => {
+    setMethod(item.method);
+    setUrl(item.url);
+    setHeaders(item.headers);
+    setBody(item.body || '');
+    setResponse(item.response);
+    setShowHistory(false);
+  };
+
+  const clearHistory = () => {
+    setHistory([]);
+    localStorage.removeItem('api-request-history');
+  };
+
+  const formatJSON = () => {
+    try {
+      const parsed = JSON.parse(body);
+      setBody(JSON.stringify(parsed, null, 2));
+    } catch (error) {
+      alert('Invalid JSON format');
+    }
+  };
+
+  return (
+    <div className="play-details">
+      <PlayHeader play={props} />
+      <div className="play-details-body">
+        <div className="api-builder-container">
+          <div className="api-builder-header">
+            <h2 className="api-builder-title">🚀 API Request Builder & Tester</h2>
+            <button
+              className="history-toggle-btn"
+              title="View Request History"
+              onClick={() => setShowHistory(!showHistory)}
+            >
+              📋 History ({history.length})
+            </button>
+          </div>
+
+          <div className={`api-builder-layout ${showHistory ? 'show-history' : ''}`}>
+            <div className="api-builder-main">
+              <RequestPanel
+                activeTab={activeTab}
+                body={body}
+                bodyType={bodyType}
+                formatJSON={formatJSON}
+                headers={headers}
+                isLoading={isLoading}
+                method={method}
+                setActiveTab={setActiveTab}
+                setBody={setBody}
+                setBodyType={setBodyType}
+                setHeaders={setHeaders}
+                setMethod={setMethod}
+                setUrl={setUrl}
+                url={url}
+                onSend={handleSendRequest}
+              />
+
+              <ResponsePanel isLoading={isLoading} response={response} />
+            </div>
+
+            {showHistory && (
+              <HistoryPanel
+                history={history}
+                onClearHistory={clearHistory}
+                onClose={() => setShowHistory(false)}
+                onLoadRequest={loadFromHistory}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ApiRequestBuilder;

src/plays/api-request-builder/components/HistoryPanel.jsx

@@ -0,0 +1,114 @@
+function HistoryPanel({ history, onLoadRequest, onClearHistory, onClose }) {
+  const formatDate = (isoString) => {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+
+    return date.toLocaleDateString();
+  };
+
+  const getStatusEmoji = (status) => {
+    if (status >= 200 && status < 300) return '✅';
+    if (status >= 300 && status < 400) return '↩️';
+    if (status >= 400 && status < 500) return '⚠️';
+
+    return '❌';
+  };
+
+  const getMethodColor = (method) => {
+    const colors = {
+      GET: '#28a745',
+      POST: '#ffc107',
+      PUT: '#17a2b8',
+      PATCH: '#6f42c1',
+      DELETE: '#dc3545',
+      HEAD: '#6c757d',
+      OPTIONS: '#343a40'
+    };
+
+    return colors[method] || '#6c757d';
+  };
+
+  return (
+    <div className="history-panel">
+      <div className="history-header">
+        <h3>📋 Request History</h3>
+        <div className="history-actions">
+          {history.length > 0 && (
+            <button
+              className="clear-history-btn"
+              title="Clear all history"
+              onClick={onClearHistory}
+            >
+              🗑️ Clear
+            </button>
+          )}
+          <button className="close-history-btn" title="Close history" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+      </div>
+
+      <div className="history-content">
+        {history.length === 0 ? (
+          <div className="history-empty">
+            <div className="empty-icon">📭</div>
+            <p>No requests yet</p>
+            <small>Your request history will appear here</small>
+          </div>
+        ) : (
+          <div className="history-list">
+            {history.map((item) => (
+              <div
+                className="history-item"
+                key={item.id}
+                role="button"
+                tabIndex={0}
+                onClick={() => onLoadRequest(item)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    onLoadRequest(item);
+                  }
+                }}
+              >
+                <div className="history-item-header">
+                  <span
+                    className="history-method"
+                    style={{ backgroundColor: getMethodColor(item.method) }}
+                  >
+                    {item.method}
+                  </span>
+                  <span className="history-status">
+                    {getStatusEmoji(item.response.status)} {item.response.status}
+                  </span>
+                  <span className="history-time">{formatDate(item.timestamp)}</span>
+                </div>
+                <div className="history-item-url" title={item.url}>
+                  {item.url}
+                </div>
+                <div className="history-item-footer">
+                  <span>⚡ {item.response.time}ms</span>
+                  {item.response.size && <span>📦 {Math.round(item.response.size / 1024)}KB</span>}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="history-footer">
+        <small>💡 Click on any request to load it</small>
+      </div>
+    </div>
+  );
+}
+
+export default HistoryPanel;