- Add slug/short_id fields to database with auto-generation
- Create migration script for existing data - Update admin interface to show only short URLs - Implement redirect system to avoid code duplication - Maintain backward compatibility with old URLs
This commit is contained in:
Yannick Le Duc
285
src/app/p/[slug]/page.tsx
Normal file
285
src/app/p/[slug]/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { Campaign } from '@/types';
|
||||
import { campaignService } from '@/lib/services';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
|
||||
// Force dynamic rendering to avoid SSR issues with Supabase
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function ShortProposePage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const slug = params.slug as string;
|
||||
|
||||
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: '',
|
||||
author_last_name: '',
|
||||
author_email: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
loadCampaign();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
const loadCampaign = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const campaignData = await campaignService.getBySlug(slug);
|
||||
|
||||
if (!campaignData) {
|
||||
setError('Campagne non trouvée');
|
||||
return;
|
||||
}
|
||||
|
||||
if (campaignData.status !== 'deposit') {
|
||||
setError('Cette campagne n\'accepte plus de propositions');
|
||||
return;
|
||||
}
|
||||
|
||||
setCampaign(campaignData);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement de la campagne:', error);
|
||||
setError('Erreur lors du chargement de la campagne');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!campaign) return;
|
||||
|
||||
// Validation basique
|
||||
if (!formData.title.trim() || !formData.description.trim() ||
|
||||
!formData.author_first_name.trim() || !formData.author_last_name.trim() ||
|
||||
!formData.author_email.trim()) {
|
||||
setError('Veuillez remplir tous les champs obligatoires');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validation email basique
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.author_email)) {
|
||||
setError('Veuillez saisir une adresse email valide');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
|
||||
const { propositionService } = await import('@/lib/services');
|
||||
|
||||
await propositionService.create({
|
||||
campaign_id: campaign.id,
|
||||
title: formData.title.trim(),
|
||||
description: formData.description.trim(),
|
||||
author_first_name: formData.author_first_name.trim(),
|
||||
author_last_name: formData.author_last_name.trim(),
|
||||
author_email: formData.author_email.trim()
|
||||
});
|
||||
|
||||
setSuccess(true);
|
||||
setFormData({
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: '',
|
||||
author_last_name: '',
|
||||
author_email: ''
|
||||
});
|
||||
|
||||
// Rediriger vers la page de succès après 3 secondes
|
||||
setTimeout(() => {
|
||||
router.push(`/p/${slug}/success`);
|
||||
}, 3000);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Erreur lors de la soumission:', error);
|
||||
setError(error.message || 'Erreur lors de la soumission de la proposition');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
if (error) setError(''); // Effacer l'erreur quand l'utilisateur commence à taper
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Chargement de la campagne...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !campaign) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Erreur
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">{error}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Proposition soumise avec succès !
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Votre proposition a été enregistrée. Vous allez être redirigé...
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 py-8 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Dépôt de proposition
|
||||
</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
{campaign?.title}
|
||||
</CardDescription>
|
||||
{campaign?.description && (
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">
|
||||
{campaign.description}
|
||||
</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-6">
|
||||
{error && (
|
||||
<Alert className="mb-6 border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="text-red-700 dark:text-red-300">
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="author_first_name">Prénom *</Label>
|
||||
<Input
|
||||
id="author_first_name"
|
||||
value={formData.author_first_name}
|
||||
onChange={(e) => handleInputChange('author_first_name', e.target.value)}
|
||||
placeholder="Votre prénom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="author_last_name">Nom *</Label>
|
||||
<Input
|
||||
id="author_last_name"
|
||||
value={formData.author_last_name}
|
||||
onChange={(e) => handleInputChange('author_last_name', e.target.value)}
|
||||
placeholder="Votre nom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="author_email">Email *</Label>
|
||||
<Input
|
||||
id="author_email"
|
||||
type="email"
|
||||
value={formData.author_email}
|
||||
onChange={(e) => handleInputChange('author_email', e.target.value)}
|
||||
placeholder="votre.email@exemple.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="title">Titre de la proposition *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={formData.title}
|
||||
onChange={(e) => handleInputChange('title', e.target.value)}
|
||||
placeholder="Titre de votre proposition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">Description *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
placeholder="Décrivez votre proposition en détail..."
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Envoi en cours...
|
||||
</>
|
||||
) : (
|
||||
'Soumettre ma proposition'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/app/p/[slug]/success/page.tsx
Normal file
46
src/app/p/[slug]/success/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CheckCircle, ArrowLeft } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function ProposeSuccessPage() {
|
||||
const params = useParams();
|
||||
const slug = params.slug as string;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center py-8 px-4">
|
||||
<Card className="w-full max-w-md shadow-lg">
|
||||
<CardContent className="p-8 text-center">
|
||||
<CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-6" />
|
||||
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Proposition soumise avec succès !
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Votre proposition a été enregistrée et sera examinée par l'équipe organisatrice.
|
||||
Vous recevrez une confirmation par email.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button asChild className="w-full">
|
||||
<Link href={`/p/${slug}`}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Déposer une autre proposition
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" asChild className="w-full">
|
||||
<Link href="/">
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user