andrei/url_tracker_tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix URL auto-completion in re-track and analyze forms

Browse Source 
- Add useLocation and useEffect to TrackingPage to pre-fill URL and method from navigation state
- Add useLocation and useEffect to AnalysisPage to pre-fill URL from navigation state
- Users can now click 'Re-track URL' or 'Analyze URL' from check detail pages and forms are automatically populated
- Improves user workflow by eliminating manual URL retyping
- Maintains type safety with proper TypeScript interfaces for location state
This commit is contained in:
Andrei
2025-08-23 20:21:17 +00:00
parent 67fe4f9c00
commit df3ad8b194
6 changed files with 113 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/dist/assets/index-Z8hwuOIA.js → apps/web/dist/assets/index-DL4PyATX.js vendored
View File

File diff suppressed because one or more lines are too long

2
apps/web/dist/assets/index-Z8hwuOIA.js.map → apps/web/dist/assets/index-DL4PyATX.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
apps/web/dist/index.html vendored
View File

@@ -15,7 +15,7 @@
gtag('config', 'G-ZDZ26XYN2P');
</script>
<script type="module" crossorigin src="/assets/index-Z8hwuOIA.js"></script>
<script type="module" crossorigin src="/assets/index-DL4PyATX.js"></script>
</head>
<body>
<div id="root"></div>

13
apps/web/src/pages/AnalysisPage.tsx
View File

@@ -2,7 +2,7 @@
* Analysis Page - Comprehensive analysis and reporting interface
*/
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
Box,
Heading,
@@ -42,6 +42,7 @@ import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useMutation } from '@tanstack/react-query';
import { useLocation } from 'react-router-dom';
import {
FiShield,
FiSearch,
@@ -72,6 +73,7 @@ interface AnalysisResults {
export function AnalysisPage() {
const [analysisResults, setAnalysisResults] = useState<AnalysisResults | null>(null);
const toast = useToast();
const location = useLocation();
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
@@ -79,6 +81,7 @@ export function AnalysisPage() {
const {
register,
handleSubmit,
setValue,
formState: { errors },
} = useForm<AnalysisFormData>({
resolver: zodResolver(analysisSchema),
@@ -89,6 +92,14 @@ export function AnalysisPage() {
// const analysisType = watch('analysisType'); // For future use
// Pre-fill form if URL is passed via navigation state
useEffect(() => {
const state = location.state as { url?: string } | null;
if (state?.url) {
setValue('url', state.url);
}
}, [location.state, setValue]);
const analysisMutation = useMutation({
mutationFn: async (data: AnalysisFormData) => {
switch (data.analysisType) {

16
apps/web/src/pages/TrackingPage.tsx
View File

@@ -4,7 +4,7 @@
* Advanced form for tracking URLs with analysis options
*/
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
Box,
Heading,
@@ -43,7 +43,7 @@ import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useMutation } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import { trackingApi, TrackRequestV2 } from '../services/api';
import { TrackingResults } from '../components/Tracking/TrackingResults';
@@ -68,6 +68,7 @@ export function TrackingPage() {
const [trackingResult, setTrackingResult] = useState<any>(null);
const toast = useToast();
const navigate = useNavigate();
const location = useLocation();
const { isAuthenticated } = useAuth();
const {
@@ -91,6 +92,17 @@ export function TrackingPage() {
const maxHops = watch('maxHops');
const timeout = watch('timeout');
// Pre-fill form if URL is passed via navigation state
useEffect(() => {
const state = location.state as { url?: string; method?: string } | null;
if (state?.url) {
setValue('url', state.url);
if (state.method) {
setValue('method', state.method as 'GET' | 'POST' | 'HEAD');
}
}
}, [location.state, setValue]);
const trackingMutation = useMutation({
mutationFn: async (data: TrackRequestV2) => {
return await trackingApi.trackUrlV2(data);