refactor some RequestPanel components into their own components

Author: mohnjiles

src/components/CodeSnippetViewer.tsx

@@ -0,0 +1,113 @@
+import { useState, useMemo } from "react"
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { CopyButton } from "./CopyButton"
+import { CODE_SNIPPETS } from "@/utils/codeSnippets"
+import { AuthConfig, Header, Cookie } from "@/types"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface CodeSnippetViewerProps {
+  method: string
+  url: string
+  headers: Header[]
+  body: string
+  contentType: string
+  auth: AuthConfig
+  cookies: Cookie[]
+}
+
+export function CodeSnippetViewer({
+  method,
+  url,
+  headers,
+  body,
+  contentType,
+  auth,
+  cookies,
+}: CodeSnippetViewerProps) {
+  const [selectedLanguage, setSelectedLanguage] = useState(CODE_SNIPPETS[0].value)
+
+  const codeSnippet = useMemo(() => {
+    const generator = CODE_SNIPPETS.find(s => s.value === selectedLanguage)?.generator
+    if (!generator) return ''
+    
+    return generator({
+      method,
+      url,
+      headers,
+      body,
+      contentType,
+      auth,
+      cookies,
+    })
+  }, [selectedLanguage, method, url, headers, body, contentType, auth, cookies])
+
+  return (
+    <ScrollArea className="h-full pr-4">
+      <div className="space-y-4">
+        <div className="flex justify-between items-center">
+          <Select value={selectedLanguage} onValueChange={setSelectedLanguage}>
+            <SelectTrigger className="w-[200px] bg-background border-input focus:ring-0 focus-visible:ring-1">
+              <SelectValue placeholder="Select Language" />
+            </SelectTrigger>
+            <SelectContent className="bg-gray-800 border-border">
+              {CODE_SNIPPETS.map((lang) => (
+                <SelectItem
+                  key={lang.value}
+                  value={lang.value}
+                  className="hover:bg-muted focus:bg-muted text-white"
+                >
+                  {lang.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <CopyButton content={codeSnippet} />
+        </div>
+        
+        <div className="relative font-mono text-sm bg-muted rounded-md p-4">
+          <SyntaxHighlighter
+            language={selectedLanguage === 'curl' ? 'bash' : selectedLanguage}
+            style={{
+              ...oneDark,
+              'pre[class*="language-"]': {
+                ...oneDark['pre[class*="language-"]'],
+                background: 'transparent',
+                margin: 0,
+                padding: 0,
+              },
+              'code[class*="language-"]': {
+                ...oneDark['code[class*="language-"]'],
+                background: 'transparent',
+              },
+              'pre > code': {
+                ...oneDark['pre > code'],
+                background: 'transparent',
+              },
+              'token': {
+                background: 'transparent',
+              }
+            }}
+            customStyle={{
+              background: 'transparent',
+              fontSize: 'inherit',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              overflowWrap: 'break-word',
+            }}
+            wrapLongLines
+          >
+            {codeSnippet}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </ScrollArea>
+  )
+} 

src/components/CookieEditor.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus, Trash2 } from "lucide-react"
+import { Cookie } from "@/types"
+
+interface CookieEditorProps {
+  cookies: Cookie[]
+  onCookiesChange: (cookies: Cookie[]) => void
+}
+
+export function CookieEditor({ cookies, onCookiesChange }: CookieEditorProps) {
+  const updateCookie = (index: number, field: keyof Cookie, value: string | boolean) => {
+    const newCookies = [...cookies]
+    newCookies[index] = { ...newCookies[index], [field]: value }
+    onCookiesChange(newCookies)
+  }
+
+  const removeCookie = (index: number) => {
+    const newCookies = cookies.filter((_, i) => i !== index)
+    onCookiesChange(newCookies)
+  }
+
+  const addCookie = () => {
+    onCookiesChange([...cookies, { name: '', value: '' }])
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-[1fr,1fr,auto] gap-2">
+        {cookies.map((cookie, index) => (
+          <React.Fragment key={index}>
+            <Input
+              value={cookie.name}
+              onChange={(e) => updateCookie(index, 'name', e.target.value)}
+              placeholder="Cookie name"
+            />
+            <Input
+              value={cookie.value}
+              onChange={(e) => updateCookie(index, 'value', e.target.value)}
+              placeholder="Cookie value"
+            />
+            <Button variant="ghost" onClick={() => removeCookie(index)}>
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </React.Fragment>
+        ))}
+      </div>
+      <Button onClick={addCookie}>
+        <Plus className="h-4 w-4 mr-2" /> Add Cookie
+      </Button>
+    </div>
+  )
+} 

src/components/RequestBodyEditor.tsx

@@ -0,0 +1,88 @@
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const CONTENT_TYPES = [
+  "application/json",
+  "application/x-www-form-urlencoded",
+  "text/plain",
+  "text/html",
+  "multipart/form-data",
+]
+
+interface RequestBodyEditorProps {
+  body: string
+  contentType: string
+  onBodyChange: (body: string) => void
+  onContentTypeChange: (contentType: string) => void
+}
+
+export function RequestBodyEditor({
+  body,
+  contentType,
+  onBodyChange,
+  onContentTypeChange,
+}: RequestBodyEditorProps) {
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <Select value={contentType} onValueChange={onContentTypeChange}>
+        <SelectTrigger className="bg-background border-input focus:ring-0 focus-visible:ring-1">
+          <SelectValue placeholder="Content Type" />
+        </SelectTrigger>
+        <SelectContent className="bg-slate-800 border-border">
+          {CONTENT_TYPES.map((type) => (
+            <SelectItem 
+              key={type} 
+              value={type}
+              className="hover:bg-muted focus:bg-muted text-white"
+            >
+              {type}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="flex-1 min-h-0 rounded-md border">
+        <Textarea
+          placeholder="Enter request body"
+          value={body}
+          onChange={(e) => onBodyChange(e.target.value)}
+          onKeyDown={(e) => {
+            const bracketPairs: { [key: string]: string } = {
+              '{': '}',
+              '[': ']',
+              '(': ')',
+            }
+            
+            if (e.key in bracketPairs) {
+              e.preventDefault()
+              const textarea = e.currentTarget
+              const { selectionStart, selectionEnd } = textarea
+              const openBracket = e.key
+              const closeBracket = bracketPairs[openBracket]
+              
+              // Get current cursor position and text
+              const currentText = textarea.value
+              const beforeCursor = currentText.substring(0, selectionStart)
+              const afterCursor = currentText.substring(selectionEnd)
+              
+              // Insert brackets and move cursor between them
+              const newText = beforeCursor + openBracket + closeBracket + afterCursor
+              onBodyChange(newText)
+              
+              // Set cursor position between brackets (needs to be done after React re-render)
+              setTimeout(() => {
+                textarea.selectionStart = textarea.selectionEnd = selectionStart + 1
+              }, 0)
+            }
+          }}
+          className="h-full resize-none border-0 focus-visible:ring-0"
+        />
+      </div>
+    </div>
+  )
+}