feat: module Sync Sheets complet — stepper 4 étapes, diff, streaming, historique
- Replace placeholder page.tsx with full implementation: - 4-step stepper (Analyser → Diff → Confirmer → Progression) - Step 1: Call /api/sync/preview to analyze Sheet vs Shopify - Step 2: Display DiffTable with changes summary - Step 3: Confirmation with actionable changes count - Step 4: Real-time progress streaming from /api/sync/execute - History section with loadable entries - Fix type annotations in preview.test.ts (SyncProduct, ShopifyProductFull) - All 40 tests passing, TypeScript strict mode clean Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { GET } from '@/app/api/sync/preview/route'
|
||||
import { NextRequest } from 'next/server'
|
||||
import type { SyncProduct, ShopifyProductFull } from '@/types/sync'
|
||||
|
||||
jest.mock('@/lib/googleSheets', () => ({
|
||||
readSheetProducts: jest.fn(),
|
||||
@@ -23,8 +24,8 @@ describe('GET /api/sync/preview', () => {
|
||||
beforeEach(() => jest.clearAllMocks())
|
||||
|
||||
it('retourne le DiffResult complet', async () => {
|
||||
const fakeSheetProducts = [{ ref: 'REF-1', handle: 'ref-1', title: 'T', description: '', price: '10.00', stock: 1, status: 'active' }]
|
||||
const fakeShopifyProducts = []
|
||||
const fakeSheetProducts: SyncProduct[] = [{ ref: 'REF-1', handle: 'ref-1', title: 'T', description: '', price: '10.00', stock: 1, status: 'active' }]
|
||||
const fakeShopifyProducts: ShopifyProductFull[] = []
|
||||
const fakeDiff = {
|
||||
changes: [{ type: 'create', ref: 'REF-1', sheetProduct: fakeSheetProducts[0] }],
|
||||
summary: { create: 1, update: 0, deactivate: 0, unchanged: 0 },
|
||||
|
||||
@@ -1,9 +1,222 @@
|
||||
'use client'
|
||||
import { useState, useCallback } from 'react'
|
||||
import { Header } from '@/components/layout/Header'
|
||||
import { SyncStepper } from '@/components/sync/SyncStepper'
|
||||
import { DiffTable } from '@/components/sync/DiffTable'
|
||||
import { SyncProgress } from '@/components/sync/SyncProgress'
|
||||
import { SyncHistory } from '@/components/sync/SyncHistory'
|
||||
import type { DiffResult, SyncChange, SyncHistoryEntry } from '@/types/sync'
|
||||
|
||||
type Step = 1 | 2 | 3 | 4
|
||||
|
||||
export default function SyncPage() {
|
||||
const [step, setStep] = useState<Step>(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [diff, setDiff] = useState<DiffResult | null>(null)
|
||||
const [history, setHistory] = useState<SyncHistoryEntry[]>([])
|
||||
const [historyLoaded, setHistoryLoaded] = useState(false)
|
||||
|
||||
// Log streaming state
|
||||
const [log, setLog] = useState<string[]>([])
|
||||
const [progress, setProgress] = useState<{ current: number; total: number } | null>(null)
|
||||
const [summary, setSummary] = useState<{
|
||||
created: number; updated: number; deactivated: number; errors: number; status: string
|
||||
} | null>(null)
|
||||
|
||||
// Étape 1 → 2 : lancer le preview
|
||||
const handleAnalyze = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await fetch('/api/sync/preview')
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`)
|
||||
setDiff(data)
|
||||
setStep(2)
|
||||
} catch (err) {
|
||||
setError((err as Error).message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Étape 3 → 4 : lancer la sync en streaming
|
||||
const handleExecute = useCallback(async () => {
|
||||
if (!diff) return
|
||||
setStep(4)
|
||||
setLog([])
|
||||
setProgress(null)
|
||||
setSummary(null)
|
||||
|
||||
const actionableChanges: SyncChange[] = diff.changes.filter((c) => c.type !== 'unchanged')
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/sync/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ changes: actionableChanges }),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json()
|
||||
throw new Error(data.error || `HTTP ${res.status}`)
|
||||
}
|
||||
|
||||
const reader = res.body!.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() ?? ''
|
||||
|
||||
for (const line of lines.filter(Boolean)) {
|
||||
try {
|
||||
const event = JSON.parse(line)
|
||||
if (event.type === 'progress') {
|
||||
setProgress({ current: event.current, total: event.total })
|
||||
setLog((prev) => [...prev, event.message])
|
||||
} else if (event.type === 'done') {
|
||||
setSummary(event.summary)
|
||||
setHistoryLoaded(false) // force reload history
|
||||
}
|
||||
} catch { /* ligne incomplète */ }
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setLog((prev) => [...prev, `❌ Erreur : ${(err as Error).message}`])
|
||||
}
|
||||
}, [diff])
|
||||
|
||||
// Charger l'historique au besoin
|
||||
const loadHistory = useCallback(async () => {
|
||||
if (historyLoaded) return
|
||||
try {
|
||||
const res = await fetch('/api/sync/history')
|
||||
if (res.ok) {
|
||||
setHistory(await res.json())
|
||||
setHistoryLoaded(true)
|
||||
}
|
||||
} catch { /* silencieux */ }
|
||||
}, [historyLoaded])
|
||||
|
||||
const actionableCount = diff
|
||||
? diff.summary.create + diff.summary.update + diff.summary.deactivate
|
||||
: 0
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="🔄 Sync Sheets" />
|
||||
<div className="p-6"><p className="text-gray-400 text-sm">Module Sync — à implémenter (Plan 3)</p></div>
|
||||
|
||||
<div className="p-6 flex flex-col gap-6 flex-1 overflow-y-auto">
|
||||
{/* Stepper */}
|
||||
<SyncStepper currentStep={step} />
|
||||
|
||||
{/* Étape 1 — Analyser */}
|
||||
{step === 1 && (
|
||||
<div className="flex flex-col items-center gap-4 py-8">
|
||||
<p className="text-slate-400 text-sm text-center max-w-md">
|
||||
Lit Google Sheets et compare avec le catalogue Shopify actuel pour générer l'aperçu des changements.
|
||||
</p>
|
||||
{error && (
|
||||
<div className="bg-red-950 border border-red-800 text-red-300 text-sm rounded-lg px-4 py-2 max-w-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
disabled={loading}
|
||||
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-semibold px-6 py-3 rounded-xl text-sm transition-colors"
|
||||
>
|
||||
{loading ? '⏳ Analyse en cours…' : '🔍 Analyser le Sheets'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Étape 2 — Aperçu diff */}
|
||||
{step === 2 && diff && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<DiffTable diff={diff} />
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => { setStep(1); setDiff(null) }}
|
||||
className="px-4 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg"
|
||||
>
|
||||
← Relancer l'analyse
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep(3)}
|
||||
disabled={actionableCount === 0}
|
||||
className="px-4 py-2 text-sm bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 text-white font-semibold rounded-lg"
|
||||
>
|
||||
Confirmer →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Étape 3 — Confirmation */}
|
||||
{step === 3 && diff && (
|
||||
<div className="flex flex-col items-center gap-6 py-8">
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-xl p-6 text-center max-w-sm">
|
||||
<p className="text-lg font-semibold text-white mb-2">
|
||||
{actionableCount} changement{actionableCount > 1 ? 's' : ''} vont être appliqués à Shopify
|
||||
</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
{diff.summary.create > 0 && `${diff.summary.create} créations · `}
|
||||
{diff.summary.update > 0 && `${diff.summary.update} mises à jour · `}
|
||||
{diff.summary.deactivate > 0 && `${diff.summary.deactivate} désactivations`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setStep(2)}
|
||||
className="px-4 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExecute}
|
||||
className="px-6 py-2 text-sm bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-lg"
|
||||
>
|
||||
✅ Confirmer et synchroniser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Étape 4 — Progression */}
|
||||
{step === 4 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<SyncProgress log={log} progress={progress} summary={summary} />
|
||||
{summary && (
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => { setStep(1); setDiff(null); setSummary(null); setLog([]) }}
|
||||
className="px-4 py-2 text-sm bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-lg"
|
||||
>
|
||||
↺ Nouvelle sync
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Historique */}
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={loadHistory}
|
||||
className="text-sm text-slate-500 hover:text-slate-300 mb-3"
|
||||
>
|
||||
{historyLoaded ? '📋 Historique des syncs' : '📋 Charger l\'historique'}
|
||||
</button>
|
||||
{historyLoaded && <SyncHistory entries={history} />}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user