Skip to content

add JSON/YAML switcher to Raw tab in rest console #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
andreyorst wants to merge 1 commit into from
Closed

add JSON/YAML switcher to Raw tab in rest console #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions src/routes/rest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,10 +232,8 @@ function RequestView({
);

// Update Content-Type and Accept headers based on body mode
if (bodyMode !== prevBodyMode) {
setPrevBodyMode(bodyMode);

const contentType = bodyMode === "yaml" ? "text/yaml" : "application/json";
function updateHeadersForMode(mode: "json" | "yaml") {
const contentType = mode === "yaml" ? "text/yaml" : "application/json";

const headers = Array.isArray(selectedTab.headers)
? [...selectedTab.headers]
Expand All @@ -259,7 +257,6 @@ function RequestView({
// Update or add Content-Type header
if (needsContentTypeUpdate) {
if (contentTypeIndex >= 0 && headers[contentTypeIndex]) {
// Update existing Content-Type header
const existingHeader = headers[contentTypeIndex];
headers[contentTypeIndex] = {
id: existingHeader.id,
Expand All @@ -270,7 +267,6 @@ function RequestView({
}),
};
} else {
// Add Content-Type header if it doesn't exist (before the empty row)
const emptyRowIndex = headers.findIndex(
(h) => h.name === "" && h.value === "",
);
Expand All @@ -295,13 +291,11 @@ function RequestView({

// Update or add Accept header
if (needsAcceptUpdate) {
// Re-find acceptIndex since we may have modified the array
const currentAcceptIndex = headers.findIndex(
(h) => h.name?.toLowerCase() === "accept",
);

if (currentAcceptIndex >= 0 && headers[currentAcceptIndex]) {
// Update existing Accept header
const existingHeader = headers[currentAcceptIndex];
headers[currentAcceptIndex] = {
id: existingHeader.id,
Expand All @@ -312,7 +306,6 @@ function RequestView({
}),
};
} else {
// Add Accept header if it doesn't exist (before the empty row)
const emptyRowIndex = headers.findIndex(
(h) => h.name === "" && h.value === "",
);
Expand All @@ -337,13 +330,19 @@ function RequestView({

onHeadersUpdate(headers);

// Reset the flag after a short delay
setTimeout(() => {
isUpdatingHeadersRef.current = false;
}, 0);
}
}

if (bodyMode !== prevBodyMode) {
setPrevBodyMode(bodyMode);
updateHeadersForMode(bodyMode);
}

const [rawVersion, setRawVersion] = useState(0);

const getEditorValue = () => {
return bodyEditorValue;
};
Expand All @@ -353,6 +352,8 @@ function RequestView({
const currentBody = bodyEditorValue.trim();
if (!currentBody) {
setBodyMode(newMode);
updateHeadersForMode(newMode);
setRawVersion((v) => v + 1);
onBodyModeChange(newMode);
return;
}
Expand All @@ -369,6 +370,8 @@ function RequestView({
setBodyEditorValue(convertedBody);
onBodyChange(convertedBody);
setBodyMode(newMode);
updateHeadersForMode(newMode);
setRawVersion((v) => v + 1);
onBodyModeChange(newMode);
} catch (_error) {
toast.error(`Failed to convert to ${newMode.toUpperCase()}`, {
Expand All @@ -394,6 +397,7 @@ function RequestView({

setBodyEditorValue(formattedBody);
onBodyChange(formattedBody);
setRawVersion((v) => v + 1);
toast.success("Code formatted", {
position: "bottom-right",
style: { margin: "1rem" },
Expand Down Expand Up @@ -467,9 +471,17 @@ function RequestView({
onChange={handleBodyEditorChange}
/>
</TabsContent>
<TabsContent value="raw">
<TabsContent value="raw" className="relative h-full">
<div className="sticky min-h-0 h-0 flex justify-end pt-2 pr-3 top-0 right-0 z-10">
<CodeEditorMenubar
mode={bodyMode}
onModeChange={handleBodyModeChange}
textToCopy={bodyEditorValue}
onFormat={handleFormatBody}
/>
</div>
<RawEditor
requestLineVersion={requestLineVersion}
requestLineVersion={`${requestLineVersion}-${rawVersion}`}
selectedTab={selectedTab}
onRawChange={onRawChange}
/>
Expand Down