Skip to content

Commit 77de64d

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor decode mode UI
Simplify UI by removing encode/decode switcher, keep decode-only input, and rely on map drawing to auto-encode polylines. Prepare groundwork for optional import coordinates button and cleanup related polyline handling. X-Lovable-Edit-ID: edt-8e34702f-d52b-4022-9857-d0656d8b0d79
2 parents 0baf19d + 992f700 commit 77de64d

3 files changed

Lines changed: 29 additions & 136 deletions

File tree

‎src/components/PolylineInput.tsx‎

Lines changed: 27 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
1-
import React, { useState } from 'react';
2-
import { Trash2, Copy, Sparkles, ArrowDownUp, Upload, Download } from 'lucide-react';
1+
import React from 'react';
2+
import { Trash2, Copy, Sparkles } from 'lucide-react';
33
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
44
import { decodePolyline } from '../utils/polylineDecoder';
5-
import { cn } from '../lib/utils';
6-
import { Switch } from './ui/switch';
7-
import { Info } from 'lucide-react';
85

96
interface PolylineInputProps {
107
value: string;
118
onChange: (value: string) => void;
129
onClear: () => void;
1310
precision?: number;
1411
onPrecisionChange?: (precision: number) => void;
15-
mode?: 'decode' | 'encode';
16-
onModeChange?: () => void;
17-
isEncoding?: boolean;
18-
onCoordinatesInput?: (text: string) => void;
1912
}
2013

2114
const PolylineInput: React.FC<PolylineInputProps> = ({
@@ -24,61 +17,31 @@ const PolylineInput: React.FC<PolylineInputProps> = ({
2417
onClear,
2518
precision = 5,
2619
onPrecisionChange,
27-
mode = 'decode',
28-
onModeChange,
29-
isEncoding = false,
30-
onCoordinatesInput,
3120
}) => {
32-
const [coordinatesText, setCoordinatesText] = useState('');
33-
3421
const handlePaste = async () => {
3522
try {
3623
const text = await navigator.clipboard.readText();
37-
if (mode === 'decode') {
38-
onChange(text);
39-
} else {
40-
setCoordinatesText(text);
41-
}
24+
onChange(text);
4225
} catch (err) {
4326
console.error('Failed to read clipboard contents: ', err);
4427
}
4528
};
4629

47-
const handleCoordinatesSubmit = () => {
48-
if (onCoordinatesInput && coordinatesText) {
49-
onCoordinatesInput(coordinatesText);
50-
}
51-
};
52-
5330
const primaryCoordinates = value ? decodePolyline(value, precision) : [];
5431

55-
const isEmpty = mode === 'decode' ? !value : !coordinatesText;
56-
5732
return (
5833
<div className="panel">
5934
<div className="mb-3 flex items-center justify-between">
60-
<div className="flex items-center space-x-2">
61-
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
62-
{mode === 'decode' ? 'Decode' : 'Encode'}
63-
</span>
64-
<div className="hidden items-center text-xs text-muted-foreground sm:flex">
65-
<Info className="mr-1 h-3 w-3" />
66-
<span>{mode === 'decode' ? 'Polyline → Coordinates' : 'Coordinates → Polyline'}</span>
67-
</div>
68-
</div>
35+
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
36+
Polyline
37+
</span>
38+
<span className="text-xs text-muted-foreground">
39+
Paste encoded polyline or draw on map
40+
</span>
6941
</div>
7042

7143
<div className="mb-2 flex items-center justify-between">
72-
<div className="flex items-center space-x-2">
73-
{onModeChange && (
74-
<div className="flex items-center space-x-2">
75-
<div className="flex items-center space-x-1">
76-
<Switch checked={mode === 'encode'} onCheckedChange={onModeChange} />
77-
<ArrowDownUp className="h-3 w-3 text-muted-foreground" />
78-
</div>
79-
</div>
80-
)}
81-
</div>
44+
<div />
8245
<div className="flex items-center space-x-1">
8346
{onPrecisionChange && (
8447
<Select
@@ -104,73 +67,46 @@ const PolylineInput: React.FC<PolylineInputProps> = ({
10467
<button
10568
onClick={onClear}
10669
className="rounded-md p-1.5 text-muted-foreground transition-colors hover:text-destructive"
107-
disabled={!value && !coordinatesText}
70+
disabled={!value}
10871
>
10972
<Trash2 className="h-4 w-4" />
11073
</button>
11174
</div>
11275
</div>
11376

114-
{mode === 'decode' ? (
115-
<textarea
116-
value={value}
117-
onChange={e => onChange(e.target.value)}
118-
placeholder="Paste your encoded polyline here..."
119-
className="h-24 w-full resize-none border-0 bg-transparent p-0 font-mono text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0"
120-
/>
121-
) : (
122-
<textarea
123-
value={coordinatesText}
124-
onChange={e => setCoordinatesText(e.target.value)}
125-
placeholder="Paste your coordinates here (format: longitude,latitude or one coordinate per line)..."
126-
className="h-24 w-full resize-none border-0 bg-transparent p-0 font-mono text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0"
127-
/>
128-
)}
77+
<textarea
78+
value={value}
79+
onChange={e => onChange(e.target.value)}
80+
placeholder="Paste your encoded polyline here or use edit mode to draw on the map..."
81+
className="h-24 w-full resize-none border-0 bg-transparent p-0 font-mono text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0"
82+
/>
12983

13084
<div className="mt-2 flex items-center justify-between">
13185
<div className="text-xs text-muted-foreground">
132-
{mode === 'decode'
133-
? value
134-
? `${value.length} characters, ${primaryCoordinates.length} points`
135-
: 'No polyline data'
136-
: value
137-
? `Encoded polyline (${value.length} chars)`
138-
: 'No encoded result yet'}
86+
{value
87+
? `${value.length} characters, ${primaryCoordinates.length} points`
88+
: 'No polyline data'}
13989
</div>
14090
<div className="flex space-x-1">
141-
{mode === 'encode' ? (
142-
<button
143-
onClick={handleCoordinatesSubmit}
144-
disabled={!coordinatesText || isEncoding}
145-
className="flex items-center space-x-1 rounded-md bg-primary p-1.5 text-xs text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
146-
>
147-
<Upload className="mr-1 h-3 w-3" />
148-
<span>{isEncoding ? 'Encoding...' : 'Encode'}</span>
149-
</button>
150-
) : null}
151-
{value ? (
91+
{value && (
15292
<button
15393
onClick={() => navigator.clipboard.writeText(value)}
15494
className="flex items-center space-x-1 rounded-md bg-secondary p-1.5 text-xs transition-colors hover:bg-secondary/80"
15595
>
15696
<Copy className="mr-1 h-3 w-3" />
15797
<span>Copy</span>
15898
</button>
159-
) : null}
99+
)}
160100
<button
161101
onClick={() => {
162-
if (mode === 'decode') {
163-
onChange(
164-
'}~kvHmzrr@ba\\hnc@jiu@r{Zqx~@hjp@pwEhnc@zhu@zflAbxn@fhjBvqHroaAgcnAp}gAeahAtqGkngAinc@_h|@r{Zad\\y|_D}_y@swg@ysg@}llBpoZqa{@xrw@~eBaaX}{uAero@uqGadY}nr@`dYs_NquNgbjAf{l@|yh@bfc@}nr@z}q@i|i@zgz@r{ZhjFr}gApob@ff}@laIsen@dgYhdPvbIren@'
165-
);
166-
} else {
167-
setCoordinatesText('-122.4194,37.7749\n-122.4099,37.7912\n-122.4330,37.7866');
168-
}
102+
onChange(
103+
'}~kvHmzrr@ba\\hnc@jiu@r{Zqx~@hjp@pwEhnc@zhu@zflAbxn@fhjBvqHroaAgcnAp}gAeahAtqGkngAinc@_h|@r{Zad\\y|_D}_y@swg@ysg@}llBpoZqa{@xrw@~eBaaX}{uAero@uqGadY}nr@`dYs_NquNgbjAf{l@|yh@bfc@}nr@z}q@i|i@zgz@r{ZhjFr}gApob@ff}@laIsen@dgYhdPvbIren@'
104+
);
169105
}}
170106
className="flex items-center space-x-1 rounded-md bg-primary/10 p-1.5 text-xs text-primary transition-colors hover:bg-primary/20"
171107
>
172-
<Sparkles className={cn('h-3 w-3', isEmpty && 'mr-1')} />
173-
{isEmpty ? <span>Sample</span> : null}
108+
<Sparkles className={`h-3 w-3 ${!value ? 'mr-1' : ''}`} />
109+
{!value && <span>Sample</span>}
174110
</button>
175111
</div>
176112
</div>

‎src/hooks/usePolyline.ts‎

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export function usePolyline(options: UsePolylineOptions | string = '') {
2727
const [isDecoding, setIsDecoding] = useState(false);
2828
const [isEncoding, setIsEncoding] = useState(false);
2929
const [precision, setPrecision] = useState(initialPrecision);
30-
const [mode, setMode] = useState<'decode' | 'encode'>('decode');
3130
const initialLoadRef = useRef(true);
3231

3332
useEffect(() => {
@@ -49,7 +48,7 @@ export function usePolyline(options: UsePolylineOptions | string = '') {
4948
const prevDecodePrecisionRef = useRef<number>(precision);
5049

5150
useEffect(() => {
52-
if (initialLoadRef.current || !polyline || mode !== 'decode') {
51+
if (initialLoadRef.current || !polyline) {
5352
return;
5453
}
5554

@@ -78,28 +77,8 @@ export function usePolyline(options: UsePolylineOptions | string = '') {
7877
}, 150);
7978

8079
return () => clearTimeout(timer);
81-
}, [polyline, precision, mode]);
80+
}, [polyline, precision]);
8281

83-
useEffect(() => {
84-
if (coordinates.length === 0 || mode !== 'encode') {
85-
return;
86-
}
87-
88-
setIsEncoding(true);
89-
90-
const timer = setTimeout(() => {
91-
try {
92-
const encodedPolyline = encodePolyline(coordinates, precision);
93-
setPolyline(encodedPolyline);
94-
} catch (error) {
95-
console.error('Error encoding coordinates:', error);
96-
} finally {
97-
setIsEncoding(false);
98-
}
99-
}, 500);
100-
101-
return () => clearTimeout(timer);
102-
}, [coordinates, precision, mode]);
10382

10483
const handleClear = () => {
10584
setPolyline('');
@@ -134,19 +113,6 @@ export function usePolyline(options: UsePolylineOptions | string = '') {
134113
const parsed = parseCoordinates(text);
135114
setCoordinates(parsed);
136115
setDistance(calculateDistance(parsed));
137-
setMode('encode');
138-
};
139-
140-
const toggleMode = () => {
141-
setMode(prevMode => {
142-
const newMode = prevMode === 'decode' ? 'encode' : 'decode';
143-
144-
setPolyline('');
145-
setCoordinates([]);
146-
setDistance(0);
147-
148-
return newMode;
149-
});
150116
};
151117

152118
return {
@@ -161,7 +127,5 @@ export function usePolyline(options: UsePolylineOptions | string = '') {
161127
handleClear,
162128
precision,
163129
setPrecision,
164-
mode,
165-
toggleMode,
166130
};
167131
}

‎src/pages/Index.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,12 @@ const Index = () => {
6262
setPolyline,
6363
coordinates,
6464
setCoordinates,
65-
setCoordinatesFromText,
6665
distance,
6766
isDecoding,
6867
isEncoding,
6968
handleClear,
7069
precision,
7170
setPrecision,
72-
mode,
73-
toggleMode,
7471
} = usePolyline(initialHookParams);
7572

7673
const {
@@ -290,10 +287,6 @@ const Index = () => {
290287
onClear={handleClear}
291288
precision={precision}
292289
onPrecisionChange={setPrecision}
293-
mode={mode}
294-
onModeChange={toggleMode}
295-
isEncoding={isEncoding}
296-
onCoordinatesInput={setCoordinatesFromText}
297290
/>
298291

299292
<PolylineComparison

0 commit comments

Comments
 (0)