- améliore l'export/import (format de fichiers en paramètres, amélioration de la robustesse, )
- ajout bouton tout effacer des propositions et participants
This commit is contained in:
Yannick Le Duc
221
src/components/ShareModal.tsx
Normal file
221
src/components/ShareModal.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import QRCode from 'qrcode';
|
||||
import { BaseModal } from './base/BaseModal';
|
||||
import { Button } from './ui/button';
|
||||
import { Copy, Check, Share2 } from 'lucide-react';
|
||||
|
||||
interface ShareModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
campaignTitle: string;
|
||||
depositUrl: string;
|
||||
}
|
||||
|
||||
export default function ShareModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
campaignTitle,
|
||||
depositUrl
|
||||
}: ShareModalProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [qrCodeError, setQrCodeError] = useState<string | null>(null);
|
||||
const [qrCodeLoading, setQrCodeLoading] = useState(false);
|
||||
const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && depositUrl) {
|
||||
setQrCodeLoading(true);
|
||||
setQrCodeError(null);
|
||||
setQrCodeDataUrl(null);
|
||||
|
||||
// Essayer d'abord de générer en tant que Data URL
|
||||
QRCode.toDataURL(depositUrl, {
|
||||
width: 300,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
},
|
||||
errorCorrectionLevel: 'M'
|
||||
}).then((dataUrl) => {
|
||||
console.log('QR code généré avec succès (DataURL) pour:', depositUrl);
|
||||
setQrCodeDataUrl(dataUrl);
|
||||
setQrCodeLoading(false);
|
||||
}).catch((err) => {
|
||||
console.error('Erreur lors de la génération du QR code (DataURL):', err);
|
||||
|
||||
// Fallback: essayer avec le canvas
|
||||
if (canvasRef.current) {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
QRCode.toCanvas(canvas, depositUrl, {
|
||||
width: 300,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
},
|
||||
errorCorrectionLevel: 'M'
|
||||
}).then(() => {
|
||||
console.log('QR code généré avec succès (Canvas) pour:', depositUrl);
|
||||
setQrCodeLoading(false);
|
||||
}).catch((canvasErr) => {
|
||||
console.error('Erreur lors de la génération du QR code (Canvas):', canvasErr);
|
||||
setQrCodeError('Erreur lors de la génération du QR code');
|
||||
setQrCodeLoading(false);
|
||||
});
|
||||
} else {
|
||||
setQrCodeError('Erreur lors de la génération du QR code');
|
||||
setQrCodeLoading(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [isOpen, depositUrl]);
|
||||
|
||||
const handleCopyLink = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(depositUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
console.error('Erreur lors de la copie:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const retryQrCode = () => {
|
||||
if (depositUrl) {
|
||||
setQrCodeLoading(true);
|
||||
setQrCodeError(null);
|
||||
setQrCodeDataUrl(null);
|
||||
|
||||
QRCode.toDataURL(depositUrl, {
|
||||
width: 300,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
},
|
||||
errorCorrectionLevel: 'M'
|
||||
}).then((dataUrl) => {
|
||||
setQrCodeDataUrl(dataUrl);
|
||||
setQrCodeLoading(false);
|
||||
}).catch((err) => {
|
||||
console.error('Erreur lors de la génération du QR code:', err);
|
||||
setQrCodeError('Erreur lors de la génération du QR code');
|
||||
setQrCodeLoading(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
<Share2 className="w-5 h-5 text-blue-600" />
|
||||
Partager le lien de dépôt
|
||||
</div>
|
||||
}
|
||||
description={`Pour partager le lien de dépôt public de propositions pour la campagne "${campaignTitle}"`}
|
||||
maxWidth="sm:max-w-[600px]"
|
||||
maxHeight="max-h-[90vh]"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* Lien de dépôt */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
Lien de dépôt public
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
|
||||
<div className="flex-1 text-sm font-mono text-slate-700 dark:text-slate-300 break-all">
|
||||
{depositUrl}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCopyLink}
|
||||
className="shrink-0"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
Copié !
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-4 h-4 mr-2" />
|
||||
Copier
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QR Code */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||
QR Code
|
||||
</h3>
|
||||
<div className="flex justify-center p-6 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-700">
|
||||
{qrCodeLoading && (
|
||||
<div className="flex items-center justify-center w-[300px] h-[300px]">
|
||||
<div className="text-slate-500">Génération du QR code...</div>
|
||||
</div>
|
||||
)}
|
||||
{qrCodeError && (
|
||||
<div className="flex items-center justify-center w-[300px] h-[300px]">
|
||||
<div className="text-red-500 text-center">
|
||||
<div className="text-sm">{qrCodeError}</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
onClick={retryQrCode}
|
||||
>
|
||||
Réessayer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{qrCodeDataUrl && !qrCodeLoading && !qrCodeError && (
|
||||
<img
|
||||
src={qrCodeDataUrl}
|
||||
alt="QR Code pour le lien de dépôt"
|
||||
className="border border-slate-200 dark:border-slate-600 rounded-lg"
|
||||
width={300}
|
||||
height={300}
|
||||
/>
|
||||
)}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={300}
|
||||
height={300}
|
||||
className={`border border-slate-200 dark:border-slate-600 rounded-lg ${qrCodeDataUrl || qrCodeLoading || qrCodeError ? 'hidden' : 'block'}`}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 text-center">
|
||||
Scannez ce QR code pour accéder directement au formulaire de dépôt
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
|
||||
Comment partager ?
|
||||
</h4>
|
||||
<ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
|
||||
<li>• Copiez le lien ci-dessus pour le partager par email, SMS ou message</li>
|
||||
<li>• Imprimez ou affichez le QR code pour un accès rapide</li>
|
||||
<li>• Partagez l'image du QR code sur les réseaux sociaux</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</BaseModal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user