math-pixel/upload-gltf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: full codebase audit — extract modules, fix type safety, clean dead code

Browse Source 
- Extract API helpers from UploadZone into lib/upload-api.ts (FormData builder, checkFolderDiffs, uploadDrive, uploadGit)
- Extract upload orchestration into hooks/useUploadOrchestrator.ts (UploadZone: 489 → 162 lines)
- Extract file diff classification into lib/diff-files.ts (from git route)
- Extract shared SVG icons into components/ui/icons.tsx (7 icons, 0 duplication)
- Extract shared modal wrapper into components/ui/Modal.tsx + ModalActions
- Extract DriveStatusLine sub-component from FolderCard
- Fix checkFolderDiffs silently swallowing auth/network errors (now throws)
- Fix type safety: remove as never casts, add isHttpError type guard, use discriminated union for validateFolder
- Fix nextcloud: cache getConfig, add max bound to findNextVersion, optimize mkdirRecursive (skip PROPFIND)
- Fix drive route: remove req.clone(), extend parseMultiUpload to return extra fields
- Fix commit message: model shown as unchanged with ↔️ on updates (not falsely marked as modified)
- Clean dead code: unused folderExists import, FileStatus/DriveStatus exports, ParsedFile.textureName, getConfig basePath
- Add security headers in next.config.ts (HSTS, X-Content-Type-Options, X-Frame-Options, etc.)
- Update README with new project structure
This commit is contained in:
Tom Boullay
2026-04-14 17:19:10 +02:00
parent 110d64ec33
commit 78f4aa83e0
26 changed files with 957 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UploadZone.tsx
+25 -352
View File
@@ -1,11 +1,9 @@
'use client'
import { useState, useRef, useCallback } from 'react'
import type { Destination } from '@/lib/constants'
import type { FolderEntry } from '@/lib/client-types'
import type { FileDiff } from '@/lib/types'
import { useSecret } from '@/hooks/useSecret'
import { useFolderEntries } from '@/hooks/useFolderEntries'
import { useUploadOrchestrator } from '@/hooks/useUploadOrchestrator'
import SecretInput from './upload/SecretInput'
import DestinationPicker from './upload/DestinationPicker'
import FolderDropzone from './upload/FolderDropzone'
@@ -15,162 +13,6 @@ import OverwriteConfirmModal from './upload/OverwriteConfirmModal'
import NoChangesModal from './upload/NoChangesModal'
import DriveErrorModal from './upload/DriveErrorModal'
// ---------------------------------------------------------------------------
// API helpers
// ---------------------------------------------------------------------------
interface CheckResult {
exists: boolean
diffs: FileDiff[]
}
async function checkFolderDiffs(
folder: FolderEntry,
destination: string,
secret: string,
signal?: AbortSignal,
): Promise<CheckResult> {
try {
const params = new URLSearchParams({ folderName: folder.folderName, destination })
const res = await fetch(`/api/upload/check?${params}`, {
headers: { 'x-upload-secret': secret.trim() },
signal,
})
const data = await res.json()
if (!data.success || !data.exists) {
return { exists: false, diffs: [] }
}
const remoteFiles: { name: string; size: number }[] = data.files || []
const remoteMap = new Map(remoteFiles.map((f) => [f.name.toLowerCase(), f.size]))
const diffs: FileDiff[] = []
const localNames = new Set<string>()
// Model: skip size comparison (compression changes the size).
const modelKey = folder.modelFile.name.toLowerCase()
localNames.add(modelKey)
if (!remoteMap.has(modelKey)) {
diffs.push({ name: folder.modelFile.name, status: 'new' })
}
// Textures: compare by size
for (const tex of folder.textures) {
const key = tex.name.toLowerCase()
localNames.add(key)
const remoteSize = remoteMap.get(key)
if (remoteSize === undefined) {
diffs.push({ name: tex.name, status: 'new' })
} else if (remoteSize !== tex.file.size) {
diffs.push({ name: tex.name, status: 'changed' })
}
}
// Deleted
for (const [name] of remoteMap) {
if (!localNames.has(name)) {
diffs.push({ name, status: 'deleted' })
}
}
return { exists: true, diffs }
} catch {
return { exists: false, diffs: [] }
}
}
/** Upload original files to Nextcloud Drive (no Blender compression). */
async function uploadDrive(
folder: FolderEntry,
secret: string,
destination: string,
action: 'new' | 'replace',
signal?: AbortSignal,
): Promise<{ success: boolean; error?: string }> {
const formData = new FormData()
formData.append('folderName', folder.folderName)
formData.append('destination', destination)
formData.append('action', action)
formData.append('files', folder.modelFile)
formData.append('fileTypes', 'model')
formData.append('textureNames', '')
for (const tex of folder.textures) {
formData.append('files', tex.file)
formData.append('fileTypes', 'texture')
formData.append('textureNames', tex.name)
}
try {
const res = await fetch('/api/upload/drive', {
method: 'POST',
headers: { 'x-upload-secret': secret.trim() },
body: formData,
signal,
})
const data = await res.json()
if (!data.success) return { success: false, error: data.error }
return { success: true }
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
return { success: false, error: 'Upload annule' }
}
return { success: false, error: 'Erreur reseau (Drive)' }
}
}
/** Upload files to GitHub (with Blender compression). */
async function uploadGit(
folder: FolderEntry,
secret: string,
destination: string,
onProgress: (pct: number) => void,
signal?: AbortSignal,
): Promise<{ success: boolean; filename?: string; error?: string }> {
const formData = new FormData()
formData.append('folderName', folder.folderName)
formData.append('destination', destination)
formData.append('files', folder.modelFile)
formData.append('fileTypes', 'model')
formData.append('textureNames', '')
for (const tex of folder.textures) {
formData.append('files', tex.file)
formData.append('fileTypes', 'texture')
formData.append('textureNames', tex.name)
}
onProgress(10)
try {
const res = await fetch('/api/upload/git', {
method: 'POST',
headers: { 'x-upload-secret': secret.trim() },
body: formData,
signal,
})
onProgress(80)
const data = await res.json()
if (!data.success) {
return { success: false, error: data.error }
}
onProgress(100)
return { success: true, filename: folder.folderName }
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
return { success: false, error: 'Upload annule' }
}
return { success: false, error: 'Erreur reseau' }
}
}
// ---------------------------------------------------------------------------
// UploadZone — orchestrator
// ---------------------------------------------------------------------------
export default function UploadZone() {
const {
secret,
@@ -192,27 +34,30 @@ export default function UploadZone() {
hasErrors,
} = useFolderEntries()
const [isUploading, setIsUploading] = useState(false)
const [globalError, setGlobalError] = useState<string | null>(null)
const [destination, setDestination] = useState<Destination | null>(null)
const [overwriteConfirm, setOverwriteConfirm] = useState<{
folderName: string
diffs: FileDiff[]
} | null>(null)
const [noChangesFolder, setNoChangesFolder] = useState<string | null>(null)
// Drive error modal state
const [driveError, setDriveError] = useState<{
error: string
folderIndex: number
} | null>(null)
const abortRef = useRef<AbortController | null>(null)
// Tracks the check result so we know if it's "new" or "replace" for the Drive
const checkResultRef = useRef<CheckResult>({ exists: false, diffs: [] })
// -- Handlers --
const {
isUploading,
globalError,
setGlobalError,
destination,
setDestination,
overwriteConfirm,
setOverwriteConfirm,
noChangesFolder,
setNoChangesFolder,
driveError,
handleUpload,
handleDriveContinue,
handleDriveCancel,
handleCancel,
handleReset,
proceedUpload,
} = useUploadOrchestrator({
secret,
setSecretError,
entries,
updateEntry,
resetEntries,
})
const handleFolderSelected = (entry: FolderEntry) => {
setGlobalError(null)
@@ -226,180 +71,8 @@ export default function UploadZone() {
}
}
const handleUpload = async () => {
if (!secret.trim()) {
setSecretError("La cle d'acces est requise")
return
}
if (!destination) {
setGlobalError('Veuillez choisir une destination')
return
}
if (entries.length === 0) return
setSecretError(null)
setGlobalError(null)
const folder = entries[0]
const check = await checkFolderDiffs(folder, destination!, secret, abortRef.current?.signal)
checkResultRef.current = check
if (check.exists) {
if (check.diffs.length === 0) {
setNoChangesFolder(folder.folderName)
return
}
setOverwriteConfirm({ folderName: folder.folderName, diffs: check.diffs })
return
}
await proceedUpload()
}
/**
* Main upload flow: Drive first, then Git.
* If Drive fails, show DriveErrorModal so user can decide.
*/
const proceedUpload = async () => {
setOverwriteConfirm(null)
setIsUploading(true)
setGlobalError(null)
const controller = new AbortController()
abortRef.current = controller
for (let i = 0; i < entries.length; i++) {
if (entries[i].status === 'success') continue
if (controller.signal.aborted) break
const folderEntry = entries[i]
const driveAction = checkResultRef.current.exists ? 'replace' : 'new'
// ---- Step 1: Drive upload ----
updateEntry(i, {
status: 'uploading',
progress: 1,
error: undefined,
driveStatus: 'uploading',
driveError: undefined,
})
const driveResult = await uploadDrive(
folderEntry,
secret,
destination!,
driveAction as 'new' | 'replace',
controller.signal,
)
if (!driveResult.success) {
// Drive failed — pause and ask user
updateEntry(i, { driveStatus: 'error', driveError: driveResult.error })
setDriveError({ error: driveResult.error || 'Erreur inconnue', folderIndex: i })
// Stop here — the DriveErrorModal callbacks will resume or cancel
return
}
updateEntry(i, { driveStatus: 'success', progress: 50 })
// ---- Step 2: Git upload ----
await pushGit(i, controller.signal)
}
abortRef.current = null
setIsUploading(false)
}
/** Push a single folder to Git. Called after Drive succeeds or user skips Drive. */
const pushGit = async (index: number, signal?: AbortSignal) => {
const folderEntry = entries[index]
const gitResult = await uploadGit(
folderEntry,
secret,
destination!,
(pct) => updateEntry(index, { progress: 50 + Math.round(pct / 2) }),
signal,
)
updateEntry(index, {
status: gitResult.success ? 'success' : 'error',
progress: gitResult.success ? 100 : 0,
error: gitResult.success ? undefined : gitResult.error,
filename: gitResult.filename,
})
}
/** User chose "Continue without Drive" in DriveErrorModal. */
const handleDriveContinue = useCallback(async () => {
if (!driveError) return
const idx = driveError.folderIndex
setDriveError(null)
updateEntry(idx, { driveStatus: 'skipped' })
// Continue with Git
const signal = abortRef.current?.signal
await pushGit(idx, signal)
// Continue with remaining entries
for (let i = idx + 1; i < entries.length; i++) {
if (entries[i].status === 'success') continue
if (abortRef.current?.signal.aborted) break
// For subsequent entries after a Drive skip, also skip Drive
updateEntry(i, {
status: 'uploading',
progress: 0,
error: undefined,
driveStatus: 'skipped',
})
await pushGit(i, abortRef.current?.signal)
}
abortRef.current = null
setIsUploading(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [driveError, entries, secret, destination])
/** User chose "Cancel" in DriveErrorModal. */
const handleDriveCancel = useCallback(() => {
if (!driveError) return
const idx = driveError.folderIndex
setDriveError(null)
updateEntry(idx, {
status: 'error',
progress: 0,
error: 'Upload annule (Drive echoue)',
driveStatus: 'error',
})
abortRef.current?.abort()
abortRef.current = null
setIsUploading(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [driveError])
const handleCancel = () => {
abortRef.current?.abort()
abortRef.current = null
setIsUploading(false)
}
const handleReset = () => {
resetEntries()
setGlobalError(null)
setIsUploading(false)
setDriveError(null)
checkResultRef.current = { exists: false, diffs: [] }
}
const hasPendingOrErrors = entries.some((f) => f.status === 'pending' || f.status === 'error')
// -- Render --
return (
<div className="w-full max-w-2xl space-y-4">
<SecretInput