- Fixed LoginPage.js to use correct API endpoint (localhost:8000) - Fixed prop naming (onLoginSuccess → onLogin) - Fixed data structure mapping (voter.email → email, etc) - Removed duplicate src/ folder structure - Updated DashboardPage.js with proper API endpoints - Added lucide-react dependency - Fixed docker-compose and Dockerfile.backend for proper execution - Cleaned up console logs - System fully working with Docker deployment
133 lines
3.0 KiB
JavaScript
133 lines
3.0 KiB
JavaScript
/**
|
|
* Hooks personnalisés pour le frontend
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Hook pour charger les données depuis une URL
|
|
*/
|
|
export function useApi(url, options = {}) {
|
|
const [data, setData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!url) return;
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const token = localStorage.getItem('token');
|
|
const headers = {
|
|
'Content-Type': 'application/json',
|
|
...(token && { 'Authorization': `Bearer ${token}` }),
|
|
...options.headers,
|
|
};
|
|
|
|
const response = await fetch(url, { ...options, headers });
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Erreur: ${response.status}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
setData(result);
|
|
setError(null);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
setData(null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [url, options]);
|
|
|
|
return { data, loading, error };
|
|
}
|
|
|
|
/**
|
|
* Hook pour vérifier si l'utilisateur est connecté
|
|
*/
|
|
export function useAuth() {
|
|
const [voter, setVoter] = useState(null);
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const storedVoter = localStorage.getItem('voter');
|
|
const token = localStorage.getItem('token');
|
|
|
|
if (storedVoter && token) {
|
|
setVoter(JSON.parse(storedVoter));
|
|
setIsAuthenticated(true);
|
|
}
|
|
} catch (err) {
|
|
console.error('Erreur lors du chargement de l\'authentification:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
return { voter, isAuthenticated, loading };
|
|
}
|
|
|
|
/**
|
|
* Hook pour gérer le formulaire
|
|
*/
|
|
export function useForm(initialValues, onSubmit) {
|
|
const [values, setValues] = useState(initialValues);
|
|
const [errors, setErrors] = useState({});
|
|
const [touched, setTouched] = useState({});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value, type, checked } = e.target;
|
|
setValues(prev => ({
|
|
...prev,
|
|
[name]: type === 'checkbox' ? checked : value,
|
|
}));
|
|
};
|
|
|
|
const handleBlur = (e) => {
|
|
const { name } = e.target;
|
|
setTouched(prev => ({ ...prev, [name]: true }));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
try {
|
|
await onSubmit(values);
|
|
} catch (err) {
|
|
console.error('Erreur lors de la soumission:', err);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setValues(initialValues);
|
|
setErrors({});
|
|
setTouched({});
|
|
};
|
|
|
|
return {
|
|
values,
|
|
errors,
|
|
touched,
|
|
isSubmitting,
|
|
handleChange,
|
|
handleBlur,
|
|
handleSubmit,
|
|
resetForm,
|
|
setValues,
|
|
setErrors,
|
|
};
|
|
}
|
|
|
|
export default { useApi, useAuth, useForm };
|