Skip to content

Commit 9eb7d38

Browse files
nullcoderclaude
nullcoder
and
claude
committed
fix: refactor duplicate filename validation to parent component
## Summary - Move duplicate filename validation from FileEditor to MultiFileEditor - Update validation to show errors without blocking input (better UX) - Add onValidationChange callback for parent components - Update tests to reflect new validation behavior ## Changes - FileEditor now accepts an `error` prop for external validation errors - MultiFileEditor tracks duplicate filenames and passes errors down - Users can type freely while seeing validation errors in real-time - Form submission can be blocked at parent level based on validation state This provides a cleaner separation of concerns where MultiFileEditor owns the list of files and validates uniqueness, while FileEditor only handles local validation (empty names, invalid characters). 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 293a438 commit 9eb7d38

File tree

4 files changed

+121
-75
lines changed

4 files changed

+121
-75
lines changed

‎components/ui/file-editor.test.tsx

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ describe("FileEditor", () => {
2525
onChange: vi.fn(),
2626
onDelete: vi.fn(),
2727
showDelete: true,
28-
existingFilenames: ["test.js", "other.txt"],
2928
};
3029

3130
beforeEach(() => {
@@ -59,26 +58,42 @@ describe("FileEditor", () => {
5958
const user = userEvent.setup();
6059
const onChange = vi.fn();
6160

62-
render(<FileEditor {...defaultProps} onChange={onChange} />);
61+
const testFile = {
62+
...mockFile,
63+
name: "script.txt", // Start with a txt file
64+
language: "text", // Make sure language is set
65+
};
6366

64-
const filenameInput = screen.getByDisplayValue("test.js");
67+
render(
68+
<FileEditor {...defaultProps} file={testFile} onChange={onChange} />
69+
);
70+
71+
const filenameInput = screen.getByDisplayValue("script.txt");
72+
73+
// Clear and type new filename
6574
await user.clear(filenameInput);
6675
await user.type(filenameInput, "newfile.py");
6776

6877
// Wait for all onChange calls to complete
6978
await waitFor(() => {
70-
// Check that the filename was updated
71-
const filenameCalls = onChange.mock.calls.filter(
72-
(call) => call[1].name === "newfile.py"
73-
);
74-
expect(filenameCalls.length).toBeGreaterThan(0);
75-
76-
// Check that language was updated to python
77-
const languageCalls = onChange.mock.calls.filter(
78-
(call) => call[1].language === "python"
79-
);
80-
expect(languageCalls.length).toBeGreaterThan(0);
79+
// Check that onChange was called
80+
expect(onChange).toHaveBeenCalled();
8181
});
82+
83+
// Check the calls after typing is complete
84+
const calls = onChange.mock.calls;
85+
86+
// Find any call with newfile.py in the name
87+
const hasNewFilename = calls.some(
88+
(call) => call[1].name && call[1].name.includes("newfile.py")
89+
);
90+
expect(hasNewFilename).toBe(true);
91+
92+
// Check that language was updated to python
93+
const hasPythonLanguage = calls.some(
94+
(call) => call[1].language === "python"
95+
);
96+
expect(hasPythonLanguage).toBe(true);
8297
});
8398

8499
it("validates filename and shows errors", async () => {
@@ -94,15 +109,10 @@ describe("FileEditor", () => {
94109
expect(screen.getByText("Filename is required")).toBeInTheDocument();
95110
});
96111

97-
// Test duplicate filename
98-
await user.type(filenameInput, "other.txt");
99-
await waitFor(() => {
100-
expect(screen.getByText("Filename already exists")).toBeInTheDocument();
101-
});
102-
103112
// Test invalid characters
104-
await user.clear(filenameInput);
105-
await user.type(filenameInput, "file/with/slash.txt");
113+
await user.click(filenameInput);
114+
await user.keyboard("{Control>}a{/Control}");
115+
await user.keyboard("file/with/slash.txt");
106116
await waitFor(() => {
107117
expect(
108118
screen.getByText("Filename contains invalid characters")
@@ -281,10 +291,10 @@ describe("FileEditor", () => {
281291
await user.type(filenameInput, "script.py");
282292

283293
await waitFor(() => {
284-
const pythonCalls = onChange.mock.calls.filter(
294+
const pythonCall = onChange.mock.calls.find(
285295
(call) => call[1].language === "python"
286296
);
287-
expect(pythonCalls.length).toBeGreaterThan(0);
297+
expect(pythonCall).toBeTruthy();
288298
});
289299

290300
// Reset mock
@@ -295,10 +305,10 @@ describe("FileEditor", () => {
295305
await user.type(filenameInput, "index.html");
296306

297307
await waitFor(() => {
298-
const htmlCalls = onChange.mock.calls.filter(
308+
const htmlCall = onChange.mock.calls.find(
299309
(call) => call[1].language === "html"
300310
);
301-
expect(htmlCalls.length).toBeGreaterThan(0);
311+
expect(htmlCall).toBeTruthy();
302312
});
303313
});
304314
});

‎components/ui/file-editor.tsx

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useState, useEffect, useCallback, useMemo } from "react";
3+
import { useState, useCallback, useMemo } from "react";
44
import { X } from "lucide-react";
55
import { Input } from "@/components/ui/input";
66
import { Label } from "@/components/ui/label";
@@ -15,7 +15,6 @@ import { Button } from "@/components/ui/button";
1515
import { CodeEditor } from "@/components/ui/code-editor";
1616
import {
1717
detectLanguage,
18-
validateFilename,
1918
formatFileSize,
2019
checkFileSize,
2120
SUPPORTED_LANGUAGES,
@@ -34,22 +33,24 @@ export interface FileEditorProps {
3433
onChange: (id: string, updates: Partial<FileData>) => void;
3534
onDelete: (id: string) => void;
3635
showDelete: boolean;
37-
existingFilenames: string[];
3836
readOnly?: boolean;
3937
className?: string;
38+
error?: string;
4039
}
4140

4241
export function FileEditor({
4342
file,
4443
onChange,
4544
onDelete,
4645
showDelete,
47-
existingFilenames,
4846
readOnly = false,
4947
className,
48+
error,
5049
}: FileEditorProps) {
51-
const [filenameError, setFilenameError] = useState<string>("");
52-
const [isDirty, setIsDirty] = useState(false);
50+
const [localFilenameError, setLocalFilenameError] = useState<string>("");
51+
52+
// Combine local validation error with external error (e.g., duplicate filename)
53+
const filenameError = localFilenameError || error || "";
5354

5455
// Calculate file size and check status
5556
const fileSize = useMemo(() => {
@@ -60,24 +61,21 @@ export function FileEditor({
6061
return checkFileSize(fileSize);
6162
}, [fileSize]);
6263

63-
// Validate filename on mount and changes
64-
useEffect(() => {
65-
if (!isDirty) return;
66-
67-
const validation = validateFilename(file.name, existingFilenames);
68-
69-
if (!validation.valid) {
70-
setFilenameError(validation.error || "");
71-
} else {
72-
setFilenameError("");
73-
}
74-
}, [file.name, existingFilenames, isDirty]);
75-
7664
// Handle filename change
7765
const handleFilenameChange = useCallback(
7866
(e: React.ChangeEvent<HTMLInputElement>) => {
7967
const newName = e.target.value;
80-
setIsDirty(true);
68+
69+
// Basic validation (empty name, invalid characters)
70+
if (!newName.trim()) {
71+
setLocalFilenameError("Filename is required");
72+
} else if (/[/\\:*?"<>|]/.test(newName)) {
73+
setLocalFilenameError("Filename contains invalid characters");
74+
} else if (newName.length > 255) {
75+
setLocalFilenameError("Filename must be 255 characters or less");
76+
} else {
77+
setLocalFilenameError("");
78+
}
8179

8280
// Auto-detect language from new filename
8381
const detectedLanguage = detectLanguage(newName);

‎components/ui/multi-file-editor.tsx

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export interface MultiFileEditorProps {
2525
maxFileSize?: number;
2626
/** Custom class name */
2727
className?: string;
28+
/** Callback when validation state changes */
29+
onValidationChange?: (isValid: boolean) => void;
2830
}
2931

3032
const DEFAULT_MAX_FILES = 20;
@@ -39,6 +41,7 @@ export function MultiFileEditor({
3941
maxTotalSize = DEFAULT_MAX_TOTAL_SIZE,
4042
maxFileSize: _maxFileSize = DEFAULT_MAX_FILE_SIZE, // Currently unused but available for future file size validation
4143
className,
44+
onValidationChange,
4245
}: MultiFileEditorProps) {
4346
// Initialize with at least one file
4447
const [files, setFiles] = useState<FileData[]>(() => {
@@ -65,18 +68,34 @@ export function MultiFileEditor({
6568
}, 0);
6669
}, [files]);
6770

68-
// Get all files for validation (we need both name and id)
69-
const allFiles = useMemo(
70-
() => files.map((f) => ({ id: f.id, name: f.name })),
71-
[files]
72-
);
73-
7471
// Check if we can add more files
7572
const canAddFile = files.length < maxFiles && !readOnly;
7673

7774
// Check if we can remove files
7875
const canRemoveFile = files.length > 1 && !readOnly;
7976

77+
// Track files with duplicate names
78+
const duplicateFilenames = useMemo(() => {
79+
const nameCount = new Map<string, number>();
80+
const duplicates = new Set<string>();
81+
82+
// Count occurrences of each filename (case-insensitive)
83+
files.forEach((file) => {
84+
const lowerName = file.name.toLowerCase();
85+
nameCount.set(lowerName, (nameCount.get(lowerName) || 0) + 1);
86+
});
87+
88+
// Find which files have duplicates
89+
files.forEach((file) => {
90+
const lowerName = file.name.toLowerCase();
91+
if ((nameCount.get(lowerName) || 0) > 1) {
92+
duplicates.add(file.id);
93+
}
94+
});
95+
96+
return duplicates;
97+
}, [files]);
98+
8099
// Handle file changes
81100
const handleFileChange = useCallback(
82101
(id: string, updates: Partial<FileData>) => {
@@ -136,20 +155,6 @@ export function MultiFileEditor({
136155
}, 100);
137156
}, [files, canAddFile, onChange]);
138157

139-
// Keyboard shortcuts
140-
useEffect(() => {
141-
const handleKeyDown = (e: KeyboardEvent) => {
142-
// Ctrl/Cmd + Enter to add new file
143-
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
144-
e.preventDefault();
145-
addNewFile();
146-
}
147-
};
148-
149-
window.addEventListener("keydown", handleKeyDown);
150-
return () => window.removeEventListener("keydown", handleKeyDown);
151-
}, [addNewFile]);
152-
153158
// Total size status
154159
const sizeStatus = useMemo(() => {
155160
if (totalSize > maxTotalSize) {
@@ -167,6 +172,30 @@ export function MultiFileEditor({
167172
return { type: "ok" as const };
168173
}, [totalSize, maxTotalSize]);
169174

175+
// Keyboard shortcuts
176+
useEffect(() => {
177+
const handleKeyDown = (e: KeyboardEvent) => {
178+
// Ctrl/Cmd + Enter to add new file
179+
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
180+
e.preventDefault();
181+
addNewFile();
182+
}
183+
};
184+
185+
window.addEventListener("keydown", handleKeyDown);
186+
return () => window.removeEventListener("keydown", handleKeyDown);
187+
}, [addNewFile]);
188+
189+
// Notify parent of validation state changes
190+
useEffect(() => {
191+
if (onValidationChange) {
192+
const hasDuplicates = duplicateFilenames.size > 0;
193+
const sizeExceeded = sizeStatus.type === "error";
194+
const isValid = !hasDuplicates && !sizeExceeded;
195+
onValidationChange(isValid);
196+
}
197+
}, [duplicateFilenames.size, sizeStatus.type, onValidationChange]);
198+
170199
return (
171200
<div ref={containerRef} className={cn("space-y-6", className)}>
172201
{/* Header with file count and total size */}
@@ -197,10 +226,12 @@ export function MultiFileEditor({
197226
onChange={handleFileChange}
198227
onDelete={handleFileDelete}
199228
showDelete={canRemoveFile}
200-
existingFilenames={allFiles
201-
.filter((f) => f.id !== file.id)
202-
.map((f) => f.name)}
203229
readOnly={readOnly}
230+
error={
231+
duplicateFilenames.has(file.id)
232+
? "Filename already exists"
233+
: undefined
234+
}
204235
/>
205236
</div>
206237
))}
@@ -219,6 +250,13 @@ export function MultiFileEditor({
219250
</p>
220251
)}
221252

253+
{/* Duplicate filename error */}
254+
{duplicateFilenames.size > 0 && (
255+
<p className="text-destructive text-sm">
256+
Please fix duplicate filenames before proceeding
257+
</p>
258+
)}
259+
222260
{/* Add file button */}
223261
{canAddFile && (
224262
<AddFileButton

‎docs/TODO.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
108108
### Form Components
109109

110110
- [x] Create FileEditor component (single file with name, language, editor) - [#55](https://github.com/nullcoder/ghostpaste/issues/55)
111-
- [ ] Create MultiFileEditor component (vertical layout, GitHub Gist style) - [#56](https://github.com/nullcoder/ghostpaste/issues/56)
111+
- [x] Create MultiFileEditor component (vertical layout, GitHub Gist style) - [#56](https://github.com/nullcoder/ghostpaste/issues/56)
112112
- [x] Create CodeEditor component (CodeMirror wrapper) - [#54](https://github.com/nullcoder/ghostpaste/issues/54)
113113
- [ ] Create AddFileButton component - [#63](https://github.com/nullcoder/ghostpaste/issues/63)
114114
- [ ] Create ExpirySelector component - [#64](https://github.com/nullcoder/ghostpaste/issues/64)
@@ -130,10 +130,10 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
130130
- [ ] Create keyboard shortcuts - [#72](https://github.com/nullcoder/ghostpaste/issues/72)
131131
- [ ] Add copy-to-clipboard functionality - [#59](https://github.com/nullcoder/ghostpaste/issues/59)
132132
- [ ] Implement responsive design
133-
- [ ] Add file editor auto-scroll on add
134-
- [ ] Implement filename auto-generation
135-
- [ ] Add language auto-detection from filename
136-
- [ ] Prevent duplicate filenames
133+
- [x] Add file editor auto-scroll on add
134+
- [x] Implement filename auto-generation
135+
- [x] Add language auto-detection from filename
136+
- [x] Prevent duplicate filenames
137137
- [ ] Add file reordering (drag and drop - stretch goal)
138138

139139
## 🔌 Phase 5: API Development
@@ -337,7 +337,7 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
337337
- [ ] Phase 8: Deployment
338338
- [ ] Phase 9: Documentation & Polish
339339

340-
**Last Updated:** 2025-06-05
340+
**Last Updated:** 2025-06-06
341341

342342
---
343343

0 commit comments

Comments
 (0)