Add Base64 Encoder/Decoder tool and update availability in DevArea #284#285
Add Base64 Encoder/Decoder tool and update availability in DevArea #284#285
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds a new Base64 encoder/decoder React component, registers it in the DevTools router, and marks the tool as available in the DevArea index. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant DT as DevTools (Router)
participant B64 as Base64Tool (Component)
participant BA as Browser API (btoa/atob)
U->>DT: Navigate to /dev-tools/base64
DT->>B64: Render Base64Tool
rect rgba(200,240,255,0.3)
note right of B64: Encode flow
U->>B64: Click "Encode" with input text
B64->>BA: btoa(input)
BA-->>B64: encoded or error
alt success
B64-->>U: Show output
else error
B64-->>U: Show error message
end
end
rect rgba(240,230,255,0.3)
note right of B64: Decode flow
U->>B64: Click "Decode" with input text
B64->>BA: atob(input)
BA-->>B64: decoded or error
alt success
B64-->>U: Show output
else error
B64-->>U: Show error message
end
end
U->>B64: Click "Clear"
B64-->>U: Reset input/output/error
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/components/DevAreaTools/Base64Tool.jsx (5)
1-1: Consider removing the React import.In React 18.x, importing React is no longer required for JSX transform. You can simplify the import to just
import { useState } from "react";Apply this diff:
-import React, { useState } from "react"; +import { useState } from "react";
8-16: Consider modernizing the Unicode handling approach.The
unescape()function is deprecated. While the current pattern works, consider using the modernTextEncoderAPI for better future compatibility.const handleEncode = () => { setError(null); try { - const encoded = btoa(unescape(encodeURIComponent(input))); + const bytes = new TextEncoder().encode(input); + const binString = String.fromCodePoint(...bytes); + const encoded = btoa(binString); setOutput(encoded); } catch (err) { setError("Failed to encode text."); } };
18-26: Consider modernizing the Unicode handling approach.The
escape()function is deprecated. While the current pattern works, consider using the modernTextDecoderAPI for better future compatibility.const handleDecode = () => { setError(null); try { - const decoded = decodeURIComponent(escape(atob(input))); + const binString = atob(input); + const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0)); + const decoded = new TextDecoder().decode(bytes); setOutput(decoded); } catch (err) { setError("Invalid Base64 string."); } };
41-47: Consider adding labels for better accessibility.Textareas should have associated labels or
aria-labelattributes for screen reader users.+<label htmlFor="input-text" className="block text-sm font-medium mb-1"> + Input +</label> <textarea + id="input-text" + aria-label="Input text or Base64 string" className="w-full border rounded-md p-3 text-sm focus:outline-none focus:ring-1 focus:ring-slate-400" rows="4" placeholder="Enter text or Base64 string here..." value={input} onChange={(e) => setInput(e.target.value)} />
78-84: Consider adding labels for better accessibility.The output textarea should have an associated label or
aria-labelfor screen reader users.-<h3 className="font-medium mb-2">Output</h3> +<label htmlFor="output-text" className="font-medium mb-2 block"> + Output +</label> <textarea + id="output-text" + aria-label="Encoded or decoded output" className="w-full border rounded-md p-3 text-sm bg-transparent focus:outline-none" rows="4" readOnly value={output} placeholder="Result will appear here..." />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/DevAreaTools/Base64Tool.jsx(1 hunks)src/pages/DevArea/DevTools.jsx(2 hunks)src/pages/DevArea/index.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/pages/DevArea/DevTools.jsx (1)
src/components/DevAreaTools/Base64Tool.jsx (1)
Base64Tool(3-94)
src/components/DevAreaTools/Base64Tool.jsx (1)
src/components/DevAreaTools/JwtDecoder.jsx (1)
decoded(16-16)
🔇 Additional comments (3)
src/pages/DevArea/DevTools.jsx (1)
8-19: LGTM! Tool registration is correct.The Base64Tool import and registration follow the established pattern and correctly match the route defined in the DevArea index.
src/pages/DevArea/index.jsx (1)
21-21: LGTM! Tool is now available.The availability flag correctly enables the Base64 Encoder/Decoder in the DevArea grid.
src/components/DevAreaTools/Base64Tool.jsx (1)
34-93: Well-structured component with good UX features.The component provides clear encode/decode functionality with error handling, a clear button, and helpful example usage. The implementation is straightforward and user-friendly.
1 participant
Summary by CodeRabbit