HTTP save

This commit is contained in:
현성필
2025-01-25 17:18:56 +09:00
parent 0804087196
commit 73b4bb96f6
4 changed files with 41 additions and 38 deletions
+10 -4
View File
@@ -4,7 +4,8 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import { useAPI } from '@/providers/APIProvider'; import { useAPI } from '@/providers/APIProvider';
const ServerManager = ({ onServerChange = () => {} }) => { const ServerManager = ({ onServerChange = () => {}, defaultValue = null }) => {
const { servers, loading, error, loadServers } = useAPI(); const { servers, loading, error, loadServers } = useAPI();
const initialized = useRef(false); const initialized = useRef(false);
const [selectedServer, setSelectedServer] = useState(null); const [selectedServer, setSelectedServer] = useState(null);
@@ -23,12 +24,17 @@ const ServerManager = ({ onServerChange = () => {} }) => {
// Handle server selection when servers are loaded // Handle server selection when servers are loaded
useEffect(() => { useEffect(() => {
if (servers?.length > 0 && !loading && !selectedServer) { if (servers?.length > 0 && !loading) {
const defaultServer = servers[0]; const defaultServer = defaultValue
? servers.find(s => s.id === defaultValue)
: servers[0];
if (defaultServer) {
setSelectedServer(defaultServer); setSelectedServer(defaultServer);
onServerChange(defaultServer.id); onServerChange(defaultServer.id);
} }
}, [servers, loading, onServerChange, selectedServer]); }
}, [servers, loading, onServerChange, defaultValue]);
const handleServerChange = (serverId) => { const handleServerChange = (serverId) => {
const server = servers.find(s => s.id === serverId); const server = servers.find(s => s.id === serverId);
@@ -19,7 +19,7 @@ const HTTP_METHODS = [
export const HTTPClientView = ({model, index}) => { export const HTTPClientView = ({model, index}) => {
const apiClient = new APIClient(); const apiClient = new APIClient();
const {getServer} = useAPI(); const {getServer, updateAPIRequest} = useAPI();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [currentModel, setCurrentModel] = useState(model); const [currentModel, setCurrentModel] = useState(model);
const [basePath, setBasePath] = useState(''); const [basePath, setBasePath] = useState('');
@@ -104,7 +104,9 @@ export const HTTPClientView = ({model, index}) => {
); );
const handleSendRequest = async () => { const handleSendRequest = async () => {
if (isLoading) return; if (isLoading) {
return;
}
setIsLoading(true); setIsLoading(true);
setEditorContents(prev => ({...prev, consoleLog: ''})); setEditorContents(prev => ({...prev, consoleLog: ''}));
@@ -132,14 +134,11 @@ export const HTTPClientView = ({model, index}) => {
size: `Size: ${response.size}` size: `Size: ${response.size}`
}); });
console.log(responseData);
setEditorContents(prev => ({ setEditorContents(prev => ({
...prev, ...prev,
responseBody: response.body responseBody: response.body
})); }));
console.log(editorContents.responseBody);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@@ -152,6 +151,23 @@ export const HTTPClientView = ({model, index}) => {
} }
}; };
const handleSave = async () => {
try {
const updatedModel = {
...currentModel,
headers: currentModel.headers || [],
queryParams: currentModel.queryParams || [],
preRequestScript: editorContents.preRequestScript,
postRequestScript: editorContents.postRequestScript,
requestBody: currentModel.requestBody
};
await updateAPIRequest(updatedModel);
} catch (error) {
console.error('Failed to save API:', error);
}
};
const renderResponseHeaders = () => ( const renderResponseHeaders = () => (
<Table> <Table>
<TableHeader> <TableHeader>
@@ -184,10 +200,7 @@ export const HTTPClientView = ({model, index}) => {
{/* Request Controls */} {/* Request Controls */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Select <Select value={currentModel.method} onValueChange={(value) => setCurrentModel(prev => ({...prev, method: value}))}>
value={currentModel.method}
onValueChange={(value) => setCurrentModel(prev => ({...prev, method: value}))}
>
<SelectTrigger className="w-24"> <SelectTrigger className="w-24">
<SelectValue placeholder="Method"/> <SelectValue placeholder="Method"/>
</SelectTrigger> </SelectTrigger>
@@ -201,25 +214,15 @@ export const HTTPClientView = ({model, index}) => {
</Select> </Select>
<ServerManager <ServerManager
onServerChange={handleServerChange} onServerChange={handleServerChange}
defaultValue={currentModel.server}
/> />
<Input <Input value={basePath} readOnly className="w-40"/>
value={basePath} // 선택된 서버의 basePath 표시 <EditableInput value={currentModel.path} onChange={handlePathChange} className="flex-1" />
readOnly
className="w-40"
/>
<EditableInput
value={currentModel.path}
onChange={handlePathChange}
className="flex-1"
/>
<Button <Button disabled={isLoading} onClick={handleSendRequest}>
disabled={isLoading}
onClick={handleSendRequest}
>
{isLoading ? 'Sending...' : 'Send'} {isLoading ? 'Sending...' : 'Send'}
</Button> </Button>
<Button variant="secondary">Save</Button> <Button variant="secondary" onClick={handleSave}>Save</Button>
</div> </div>
{/* Request/Response Container */} {/* Request/Response Container */}
@@ -360,8 +363,6 @@ export const HTTPClientView = ({model, index}) => {
</div> </div>
</div> </div>
); );
}; };
-3
View File
@@ -27,8 +27,6 @@ class APIClient {
const response = await this.makeRequest(model); const response = await this.makeRequest(model);
const formattedResponse = this.formatResponse(response); const formattedResponse = this.formatResponse(response);
onLog(formattedResponse);
const finalResponse = await this.executePostRequestScript( const finalResponse = await this.executePostRequestScript(
model.postRequestScript, model.postRequestScript,
variables, variables,
@@ -37,7 +35,6 @@ class APIClient {
onLog onLog
); );
return finalResponse; return finalResponse;
} catch (error) { } catch (error) {
@@ -91,7 +91,6 @@ export class ScenarioExecutor {
try { try {
const response = await this.apiClient.sendAPIRequest(data, this.appendLog.bind(this)); const response = await this.apiClient.sendAPIRequest(data, this.appendLog.bind(this));
console.log({response});
this.logApiResponse(response, data.type); this.logApiResponse(response, data.type);
return response; return response;
} catch (error) { } catch (error) {
@@ -151,7 +150,7 @@ export class ScenarioExecutor {
logApiResponse(response, type) { logApiResponse(response, type) {
const responseLog = type === 'HTTP' const responseLog = type === 'HTTP'
? `Response:\nStatus: ${response.status}\nHeaders:\n${this.formatHeaders(response.headers)}\nBody:\n${response.body}` ? `Response:\n- Status: ${response.status}\n- Headers:\n${this.formatHeaders(response.headers)}\n- Body:\n${response.body}`
: `Response:\n${response.body}`; : `Response:\n${response.body}`;
this.appendLog(responseLog); this.appendLog(responseLog);