HTTP save
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user