Feat/url parser 51 by udaykiran243 · Pull Request #60 · betterbugs/dev-tools

udaykiran243 · 2026-03-02T10:20:27Z

Feature: URL Parser & Query Editor

Resolves #51

Description

This PR introduces a new development tool, the URL Parser & Query String Editor, designed to simplify the process of debugging and constructing complex URLs.

It provides a visual interface to:

Decompose URLs into their core components (Scheme, Host, Path, Hash).
View and edit query parameters in a dynamic table.
Add, delete, and modify key-value pairs with real-time URL updates.

Implementation Details

New Component: app/components/developmentToolsComponent/urlParser.tsx - Implements the parsing logic using the native URL API and manages state for two-way binding between the raw URL string and the visual editor.
Route Registration: Added /url-parser route in app/libs/constants.tsx.
Content & Metadata: Updated app/libs/developmentToolsConstant.tsx with tool descriptions, SEO metadata, and usage guides.

✅ Checklist

Implemented URL parsing logic
Created visual query parameter editor
Added responsive UI matching existing tools
Tested with various URL formats

Preview

Screen.Recording.2026-03-02.154941.mp4

Copilot

Pull request overview

Adds a new Development Tool page for parsing URLs and editing query parameters, wiring it into the existing tool routing + metadata system. The PR also introduces a Unix Timestamp Converter tool (routes + metadata) and updates dependencies/lockfile accordingly.

Changes:

Added UrlParser UI for URL component breakdown + query parameter editing.
Registered /url-parser route and added tool metadata/SEO content for the new page.
Introduced a Unix Timestamp Converter route/component and added dayjs (plus substantial lockfile updates).

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
package.json	Adds `dayjs`; dependency list change also results in lockfile churn.
package-lock.json	Large lockfile update including `dayjs`/`curlconverter` entries and many `peer` flag changes.
app/libs/developmentToolsConstant.tsx	Adds metadata/SEO content for `url-parser` and `unix-timestamp-converter`.
app/libs/constants.tsx	Registers new PATHS + routes for URL Parser and Unix Timestamp Converter; adds URL Parser to category listing.
app/components/developmentToolsComponent/urlParser.tsx	New URL Parser & Query Editor component implementation.
app/components/developmentToolsComponent/epochConverter.tsx	New Unix Timestamp Converter component using `dayjs` + Ant Design.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-02T10:27:20Z

app/libs/developmentToolsConstant.tsx

+            'Debugging long URLs with multiple query parameters can be tedious and prone to errors. This tool simplifies the process by breaking down the URL into readable parts: Scheme, Host, Path, Port, and Hash.',
+        },
+        {
+          description:
+            'It features a dynamic table for editing query parameters, where you can add, modify, delete, and toggle encoding for individual parameters, seeing the URL update in real-time.',
+        },


The tool description claims you can “toggle encoding for individual parameters”, but the URL Parser component doesn’t implement any encoded/decoded toggle (and QueryParam.active is never exposed in the UI). Either implement the encoding toggle control or adjust this copy so the UI and SEO text match actual behavior.

Copilot · 2026-03-02T10:27:21Z

app/components/developmentToolsComponent/epochConverter.tsx

+import React, { useState, useEffect } from "react";
+import { Button, Input, DatePicker, message, Tooltip, Card, Typography, Space, Row, Col, ConfigProvider, theme } from "antd";
+import dayjs, { Dayjs } from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { CopyOutlined, ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
+


This component has several unused imports/values (e.g., useEffect, Tooltip, Card, Title, message, CopyOutlined, and the copyToClipboard helper). With next lint enabled, unused imports are likely to produce lint errors/warnings and they also bloat the client bundle. Remove unused imports and dead code, or wire them into the UI if they’re intended.

Copilot · 2026-03-02T10:27:21Z

app/libs/constants.tsx

 import XorCalculator from '../components/developmentToolsComponent/xorCalculator';
 import CurlToCodeConverter from '../components/developmentToolsComponent/curlToCodeConverter';
 import YAMLFormatterAndBeautifier from '../components/developmentToolsComponent/yamlFormatterAndBeautifier';
+import EpochConverter from '../components/developmentToolsComponent/epochConverter';


PR description/issue scope is for the URL Parser tool, but this diff also introduces a new Unix Timestamp Converter route/component (EpochConverter, new PATH, and new route). If this is intentional, the PR description should be updated and the change ideally split into a separate PR to keep review + release scope clear.

Copilot · 2026-03-02T10:27:21Z

package.json

    "antd": "5.16.2",
-    "curlconverter": "^4.12.0",
    "bcryptjs": "^2.4.3",
+    "curlconverter": "^4.12.0",


curlconverter is listed as a production dependency and the lockfile pulls in tree-sitter/native install scripts, but there are no references to curlconverter anywhere in the repo code (no imports/requires). If it’s not actually used, consider removing it to reduce install size and avoid native build failures in CI/hosting environments.

Suggested change

"curlconverter": "^4.12.0",

Copilot · 2026-03-02T10:27:21Z

app/libs/constants.tsx

  CRONTAB_GENERATOR: '/crontab-generator',
  MORSE_CODE_TRANSLATOR: '/morse-code-translator',
+  UNIX_TIMESTAMP_CONVERTER: '/unix-timestamp-converter',
  CURL_TO_CODE_CONVERTER: '/curl-to-code-converter',
 };


PATHS.UNIX_TIMESTAMP_CONVERTER and its route are registered, but the tool isn’t added anywhere in developmentToolsCategoryContent (which is used to build the homepage/search list). If this tool is meant to be discoverable like the others, add it to the category content; otherwise the route will exist but won’t appear in the tools list/API.

Copilot · 2026-03-02T10:27:22Z

app/components/developmentToolsComponent/urlParser.tsx

+  const updateStateFromUrl = (url: URL) => {
+    setParsedUrl(url);
+    const params: QueryParam[] = [];
+    url.searchParams.forEach((value, key) => {
+        // We use random id for keys to allow duplicate keys in React list if necessary, 
+        // though URLSearchParams handles them.
+        params.push({
+          id: Math.random().toString(36).substr(2, 9),
+          key,
+          value,
+          active: true
+        });


updateStateFromUrl assigns a new random id to every query param on each parse. Because urlInput is updated from the table editor (which triggers the parsing useEffect), this will regenerate row keys while the user is typing in the table and can cause input focus/caret to jump and edits to apply to the wrong row. Use stable IDs (e.g., preserve existing IDs by index, or keep queryParams as the source of truth and only parse on direct textarea edits).

Copilot · 2026-03-02T10:27:22Z

app/components/developmentToolsComponent/urlParser.tsx

+        newUrl.search = newSearchParams.toString();
+
+        // We update the input to reflect the changes. 
+        // Note: This triggers the useEffect above, which re-parses. 
+        // This circular dependency is usually handled by React batching or check for equality, 
+        // but to be safe and avoid cursor jumping or loops, we might need a flag or careful management.
+        // However, for this simple tool, updating the main input is the "source of truth".
+
+        // To avoid re-rendering loop issues or cursor jumps if we were typing in the main input,
+        // we only update if the string is different.
+        if (newUrl.toString() !== urlInput) {
+            setUrlInput(newUrl.toString());
+        }


updateUrlFromParams writes back into urlInput, which triggers the [urlInput] parsing effect and rebuilds queryParams. This creates an unnecessary re-parse loop and contributes to UI jitter (cursor jumps) when editing params/components. Consider splitting state so that textarea edits trigger parsing, while table/component edits update parsedUrl/queryParams directly without re-parsing (or gate the effect with a ref flag).

udaykiran243 added 4 commits February 26, 2026 20:14

feat: Add Unix Timestamp (Epoch) Converter Utility

68afd8d

Merge upstream develop

fb2ff1b

fix(epochConverter): replace invalid borderColor with colorBorder

17dfc3a

feat(tools): add visual URL Parser and Query Editor betterbugs#51

3b88c7b

Copilot AI review requested due to automatic review settings March 2, 2026 10:20

Copilot started reviewing on behalf of udaykiran243 March 2, 2026 10:20 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

rishima17 requested a review from SyedFahad7 March 3, 2026 05:03

rishima17 assigned udaykiran243 Mar 3, 2026

rishima17 added enhancement New feature or request apertre3.0 medium labels Mar 3, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/url parser 51#60

Feat/url parser 51#60
udaykiran243 wants to merge 4 commits intobetterbugs:developfrom
udaykiran243:feat/url-parser-51

udaykiran243 commented Mar 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

udaykiran243 commented Mar 2, 2026

Feature: URL Parser & Query Editor

Description

Implementation Details

✅ Checklist

Preview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants