Overview
The useFetchNormas hook fetches the list of regulatory documents (normas) from the backend API and manages the loading and error states.
Import
import { useFetchNormas } from '@/src/hooks/useFetchNormas';
Return Value
Array of regulatory documents fetched from the API
Whether the fetch operation is in progress
Error object if the fetch fails, null otherwise
Type Definitions
interface Norma {
id_norma: string;
anho: string;
descripcion: string;
}
Implementation
The hook automatically fetches normas when the component mounts:
export function useFetchNormas() {
const [normas, setNormas] = useState<Norma[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchNormas = async () => {
try {
setLoading(true);
const res = await apiClient.get('/normas');
const data = (res.data as { data: Norma[] }).data || [];
setNormas(data);
} catch (err: any) {
setError(err);
console.error('Error al cargar normas:', err);
} finally {
setLoading(false);
}
};
fetchNormas();
}, []);
return { normas, loading, error };
}
Usage Example
import { useFetchNormas } from '@/src/hooks/useFetchNormas';
export default function NormasScreen() {
const { normas, loading, error } = useFetchNormas();
if (loading) {
return <Text>Loading normas...</Text>;
}
if (error) {
return <Text>Error loading normas: {error.message}</Text>;
}
return (
<View>
{normas.map((norma) => (
<View key={norma.id_norma}>
<Text>{norma.anho} - {norma.descripcion}</Text>
</View>
))}
</View>
);
}
API Endpoint
The hook fetches data from:
Response format:
{
"data": [
{
"id_norma": "001",
"anho": "2024",
"descripcion": "Resolución de Gerencia N° 001-2024"
}
]
}
Error Handling
Errors are caught and stored in the error state. The error is also logged to the console for debugging purposes.
