Skip to content

Commit 6b0fac6

Browse files
RohitR311RohitR311
committed
feat: centralize tab and field editing
1 parent 3717d7d commit 6b0fac6

File tree

1 file changed

+56
-129
lines changed

1 file changed

+56
-129
lines changed

‎src/components/run/InterpretationLog.tsx‎

Lines changed: 56 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,14 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
4141
const [editingField, setEditingField] = useState<{listId: number, fieldKey: string} | null>(null);
4242
const [editingValue, setEditingValue] = useState<string>('');
4343

44-
const [editingListName, setEditingListName] = useState<number | null>(null);
45-
const [editingListNameValue, setEditingListNameValue] = useState<string>('');
46-
4744
const [editingTextGroupName, setEditingTextGroupName] = useState<boolean>(false);
4845
const [editingTextGroupNameValue, setEditingTextGroupNameValue] = useState<string>('Text Data');
4946

50-
const [editingTextLabel, setEditingTextLabel] = useState<number | null>(null);
51-
const [editingTextLabelValue, setEditingTextLabelValue] = useState<string>('');
52-
53-
const [editingScreenshotName, setEditingScreenshotName] = useState<number | null>(null);
54-
const [editingScreenshotNameValue, setEditingScreenshotNameValue] = useState<string>('');
47+
const [editing, setEditing] = useState<{
48+
stepId: number | null;
49+
type: 'list' | 'text' | 'screenshot' | null;
50+
value: string;
51+
}>({ stepId: null, type: null, value: '' });
5552

5653
const logEndRef = useRef<HTMLDivElement | null>(null);
5754
const autoFocusedListIds = useRef<Set<number>>(new Set());
@@ -125,30 +122,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
125122
}
126123
};
127124

128-
const handleStartEditListName = (listId: number, currentName: string) => {
129-
setEditingListName(listId);
130-
setEditingListNameValue(currentName);
131-
};
132-
133-
const handleSaveListName = () => {
134-
if (editingListName !== null) {
135-
const trimmedName = editingListNameValue.trim();
136-
const finalName = trimmedName || `List Data ${captureListData.findIndex(l => l.id === editingListName) + 1}`;
137-
138-
updateListStepName(editingListName, finalName);
139-
140-
// Use ref-synced version of browserSteps via emitForStepId
141-
const listStep = browserSteps.find(step => step.id === editingListName);
142-
if (listStep?.actionId) {
143-
// small async delay ensures React state commit
144-
setTimeout(() => emitForStepId(listStep.actionId!), 0);
145-
}
146-
147-
setEditingListName(null);
148-
setEditingListNameValue('');
149-
}
150-
};
151-
152125
const handleStartEditTextGroupName = () => {
153126
setEditingTextGroupName(true);
154127
setEditingTextGroupNameValue(currentTextGroupName);
@@ -158,7 +131,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
158131
const trimmedName = editingTextGroupNameValue.trim();
159132
const finalName = trimmedName || 'Text Data';
160133

161-
console.log("SAVING TEXT GROUP NAME:", finalName);
162134
setCurrentTextGroupName(finalName);
163135
setEditingTextGroupName(false);
164136

@@ -169,34 +141,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
169141
}, 0);
170142
};
171143

172-
173-
const handleStartEditTextLabel = (textId: number, currentLabel: string) => {
174-
setEditingTextLabel(textId);
175-
setEditingTextLabelValue(currentLabel);
176-
};
177-
178-
const handleSaveTextLabel = () => {
179-
if (editingTextLabel !== null && editingTextLabelValue.trim()) {
180-
const textStep = browserSteps.find(step => step.id === editingTextLabel);
181-
const actionId = textStep?.actionId;
182-
183-
updateBrowserTextStepLabel(editingTextLabel, editingTextLabelValue.trim());
184-
185-
// Emit updated action to backend after state update completes
186-
if (actionId) {
187-
setTimeout(() => emitForStepId(actionId), 0);
188-
}
189-
190-
setEditingTextLabel(null);
191-
setEditingTextLabelValue('');
192-
}
193-
};
194-
195-
const handleCancelTextLabel = () => {
196-
setEditingTextLabel(null);
197-
setEditingTextLabelValue('');
198-
};
199-
200144
const handleDeleteTextStep = (textId: number) => {
201145
const textStep = browserSteps.find(step => step.id === textId);
202146
const actionId = textStep?.actionId;
@@ -210,36 +154,36 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
210154
}
211155
};
212156

213-
const handleStartEditScreenshotName = (screenshotStepId: number, currentName: string) => {
214-
setEditingScreenshotName(screenshotStepId);
215-
setEditingScreenshotNameValue(currentName);
157+
const startEdit = (stepId: number, type: 'list' | 'text' | 'screenshot', currentValue: string) => {
158+
setEditing({ stepId, type, value: currentValue });
216159
};
217160

218-
const handleSaveScreenshotName = () => {
219-
if (editingScreenshotName !== null) {
220-
const trimmedName = editingScreenshotNameValue.trim();
221-
const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot');
222-
const screenshotIndex = screenshotSteps.findIndex(s => s.id === editingScreenshotName);
223-
const finalName = trimmedName || `Screenshot ${screenshotIndex + 1}`;
224-
225-
updateScreenshotStepName(editingScreenshotName, finalName);
226-
227-
const screenshotStep = browserSteps.find(step => step.id === editingScreenshotName);
228-
if (screenshotStep?.actionId) {
229-
const originalName = screenshotStep.name?.trim() || "";
230-
const trimmedName = editingScreenshotNameValue.trim();
231-
232-
// 🚫 Only emit if name actually changed
233-
if (trimmedName && trimmedName !== originalName) {
234-
setTimeout(() => emitForStepId(screenshotStep.actionId!), 500);
235-
} else {
236-
console.log("🧠 Skipping emit — screenshot name unchanged.");
237-
}
238-
}
161+
const saveEdit = () => {
162+
const { stepId, type, value } = editing;
163+
if (stepId == null || !type) return;
239164

240-
setEditingScreenshotName(null);
241-
setEditingScreenshotNameValue('');
165+
const finalValue = value.trim();
166+
if (!finalValue) {
167+
setEditing({ stepId: null, type: null, value: '' });
168+
return;
242169
}
170+
171+
if (type === 'list') {
172+
updateListStepName(stepId, finalValue);
173+
} else if (type === 'text') {
174+
updateBrowserTextStepLabel(stepId, finalValue);
175+
} else if (type === 'screenshot') {
176+
updateScreenshotStepName(stepId, finalValue);
177+
}
178+
179+
const step = browserSteps.find(s => s.id === stepId);
180+
if (step?.actionId) setTimeout(() => emitForStepId(step.actionId!), 0);
181+
182+
setEditing({ stepId: null, type: null, value: '' });
183+
};
184+
185+
const cancelEdit = () => {
186+
setEditing({ stepId: null, type: null, value: '' });
243187
};
244188

245189

@@ -354,16 +298,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
354298

355299
useEffect(() => {
356300
let shouldOpenDrawer = false;
357-
let switchToListTab = false;
358-
let switchToTextTab = false;
359-
let switchToScreenshotTab = false;
360301

361302
if (hasScrapeListAction && captureListData.length > 0 && captureListData[0]?.data?.length > 0) {
362303
setShowPreviewData(true);
363304
if (captureListData.length > lastListDataLength.current) {
364305
userClosedDrawer.current = false;
365306
shouldOpenDrawer = true;
366-
switchToListTab = true;
367307
}
368308
lastListDataLength.current = captureListData.length;
369309
}
@@ -373,7 +313,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
373313
if (captureTextData.length > lastTextDataLength.current) {
374314
userClosedDrawer.current = false;
375315
shouldOpenDrawer = true;
376-
switchToTextTab = true;
377316
}
378317
lastTextDataLength.current = captureTextData.length;
379318
}
@@ -383,7 +322,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
383322
if (screenshotData.length > lastScreenshotDataLength.current) {
384323
userClosedDrawer.current = false;
385324
shouldOpenDrawer = true;
386-
switchToScreenshotTab = true;
387325
}
388326
lastScreenshotDataLength.current = screenshotData.length;
389327
}
@@ -425,7 +363,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
425363
const latestScreenshotStep = screenshotSteps[latestIndex];
426364
if (latestScreenshotStep) {
427365
const screenshotName = latestScreenshotStep.name || `Screenshot ${latestIndex + 1}`;
428-
handleStartEditScreenshotName(latestScreenshotStep.id, screenshotName);
366+
startEdit(latestScreenshotStep.id, 'screenshot', screenshotName);
429367
}
430368
}, 300);
431369
}
@@ -439,7 +377,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
439377
if (captureListData.length > 0 && isOpen && captureStage === 'initial') {
440378
const latestListIndex = captureListData.length - 1;
441379
const latestList = captureListData[latestListIndex];
442-
if (latestList && latestList.data && latestList.data.length > 0 && !editingListName) {
380+
if (latestList && latestList.data && latestList.data.length > 0 && editing.type !== 'list') {
443381
const previousLength = previousDataLengths.current.get(latestList.id) || 0;
444382
const currentLength = latestList.data.length;
445383

@@ -448,7 +386,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
448386
autoFocusedListIds.current.add(latestList.id);
449387
setActiveListTab(latestListIndex);
450388
setTimeout(() => {
451-
handleStartEditListName(latestList.id, latestList.name || `List Data ${latestListIndex + 1}`);
389+
startEdit(latestList.id, 'list', latestList.name || `List Data ${latestListIndex + 1}`);
452390
}, 300);
453391
}
454392
}
@@ -594,7 +532,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
594532
}}
595533
>
596534
{captureListData.map((listItem, index) => {
597-
const isEditing = editingListName === listItem.id;
535+
const isEditing = editing.stepId === listItem.id && editing.type === 'list';
598536
const isActive = activeListTab === index;
599537

600538
return (
@@ -612,10 +550,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
612550
}
613551
}}
614552
onDoubleClick={() => {
615-
handleStartEditListName(
616-
listItem.id,
617-
listItem.name || `List Data ${index + 1}`
618-
);
553+
startEdit(listItem.id, 'list', listItem.name || `List Data ${index + 1}`)
619554
}}
620555
sx={{
621556
px: 3,
@@ -653,15 +588,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
653588
>
654589
{isEditing ? (
655590
<TextField
656-
value={editingListNameValue}
657-
onChange={(e) => setEditingListNameValue(e.target.value)}
658-
onBlur={handleSaveListName}
591+
value={editing.value}
592+
onChange={(e) => setEditing({ ...editing, value: e.target.value })}
593+
onBlur={saveEdit}
659594
onKeyDown={(e) => {
660-
if (e.key === 'Enter') handleSaveListName();
661-
if (e.key === 'Escape') {
662-
setEditingListName(null);
663-
setEditingListNameValue('');
664-
}
595+
if (e.key === 'Enter') saveEdit();
596+
if (e.key === 'Escape') cancelEdit();
665597
}}
666598
autoFocus
667599
size="small"
@@ -857,7 +789,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
857789
if (!screenshotStep) return null;
858790

859791
const isActive = activeScreenshotTab === index;
860-
const isEditing = editingScreenshotName === screenshotStep.id;
792+
const isEditing = editing.stepId === screenshotStep.id && editing.type === 'screenshot';
861793
const screenshotName = screenshotStep.name || `Screenshot ${index + 1}`;
862794

863795
return (
@@ -873,9 +805,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
873805
setActiveScreenshotTab(index);
874806
}
875807
}}
876-
onDoubleClick={() => {
877-
handleStartEditScreenshotName(screenshotStep.id, screenshotName);
878-
}}
808+
onDoubleClick={() => startEdit(screenshotStep.id, 'screenshot', screenshotName)}
879809
sx={{
880810
px: 3,
881811
py: 1.25,
@@ -910,15 +840,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
910840
>
911841
{isEditing ? (
912842
<TextField
913-
value={editingScreenshotNameValue}
914-
onChange={(e) => setEditingScreenshotNameValue(e.target.value)}
915-
onBlur={handleSaveScreenshotName}
843+
value={editing.value}
844+
onChange={(e) => setEditing({ ...editing, value: e.target.value })}
845+
onBlur={saveEdit}
916846
onKeyDown={(e) => {
917-
if (e.key === 'Enter') handleSaveScreenshotName();
918-
if (e.key === 'Escape') {
919-
setEditingScreenshotName(null);
920-
setEditingScreenshotNameValue('');
921-
}
847+
if (e.key === 'Enter') saveEdit();
848+
if (e.key === 'Escape') cancelEdit();
922849
}}
923850
autoFocus
924851
size="small"
@@ -1074,7 +1001,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
10741001
</TableHead>
10751002
<TableBody>
10761003
{captureTextData.map((textStep: any, index) => {
1077-
const isEditing = editingTextLabel === textStep.id;
1004+
const isEditing = editing.stepId === textStep.id && editing.type === 'text';
10781005

10791006
return (
10801007
<TableRow
@@ -1098,12 +1025,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
10981025
{isEditing ? (
10991026
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: '200px' }}>
11001027
<TextField
1101-
value={editingTextLabelValue}
1102-
onChange={(e) => setEditingTextLabelValue(e.target.value)}
1103-
onBlur={handleSaveTextLabel}
1028+
value={editing.value}
1029+
onChange={(e) => setEditing({ ...editing, value: e.target.value })}
1030+
onBlur={saveEdit}
11041031
onKeyDown={(e) => {
1105-
if (e.key === 'Enter') handleSaveTextLabel();
1106-
if (e.key === 'Escape') handleCancelTextLabel();
1032+
if (e.key === 'Enter') saveEdit();
1033+
if (e.key === 'Escape') cancelEdit();
11071034
}}
11081035
autoFocus
11091036
size="small"
@@ -1117,7 +1044,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
11171044
/>
11181045
<IconButton
11191046
size="small"
1120-
onClick={handleSaveTextLabel}
1047+
onClick={saveEdit}
11211048
sx={{
11221049
color: '#4caf50',
11231050
padding: '4px'
@@ -1139,7 +1066,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
11391066
textDecoration: 'underline'
11401067
}
11411068
}}
1142-
onClick={() => handleStartEditTextLabel(textStep.id, textStep.label)}
1069+
onClick={() => startEdit(textStep.id, 'text', textStep.label)}
11431070
>
11441071
{textStep.label}
11451072
</Typography>

0 commit comments

Comments
 (0)