Updated template with better features

This commit is contained in:
Jose
2026-02-15 02:58:06 +01:00
parent fe5d21660a
commit fcb2fa8787
15 changed files with 268 additions and 196 deletions

View File

@@ -8,8 +8,12 @@ export const AuthProvider = ({ children }) => {
const axios = createAxiosInstance();
const { config } = useConfig();
const [user, setUser] = useState(() => JSON.parse(localStorage.getItem("user")) || null);
const [token, setToken] = useState(() => localStorage.getItem("token"));
const [identity, setIdentity] = useState(() => {
const stored = localStorage.getItem("identity");
return stored ? JSON.parse(stored) : null;
});
const [authStatus, setAuthStatus] = useState("checking");
const [error, setError] = useState(null);
@@ -29,6 +33,7 @@ export const AuthProvider = ({ children }) => {
const res = await axios.get(VALIDATE_URL, {
headers: { Authorization: `Bearer ${token}` },
});
if (res.status === 200) {
setAuthStatus("authenticated");
} else {
@@ -45,53 +50,121 @@ export const AuthProvider = ({ children }) => {
const login = async (formData) => {
setError(null);
const BASE_URL = config.apiConfig.baseUrl;
const LOGIN_URL = `${BASE_URL}${config.apiConfig.endpoints.auth.login}`;
try {
const res = await axios.post(LOGIN_URL, formData);
const { token, member, tokenTime } = res.data.data;
const { token, user, account, metadata } = res.data;
const identity = {
user,
account,
metadata,
};
localStorage.setItem("token", token);
localStorage.setItem("user", JSON.stringify(member));
localStorage.setItem("tokenTime", tokenTime);
localStorage.setItem("identity", JSON.stringify(identity));
setToken(token);
setUser(member);
setIdentity(identity);
setAuthStatus("authenticated");
} catch (err) {
console.error("Error al iniciar sesión:", err);
let message = "Ha ocurrido un error inesperado.";
if (err.response) {
const { status, data } = err.response;
if (status === 400) {
message = "Usuario o contraseña incorrectos.";
} else if (status === 403) {
message = "Tu cuenta está inactiva o ha sido suspendida.";
message = "Tu cuenta está inactiva o suspendida.";
} else if (status === 404) {
message = "Usuario no encontrado.";
} else if (data?.message) {
message = data.message;
}
}
setError(message);
throw new Error(message);
}
};
const register = async (formData) => {
setError(null);
const BASE_URL = config.apiConfig.baseUrl;
const REGISTER_URL = `${BASE_URL}${config.apiConfig.endpoints.auth.register}`;
try {
const res = await axios.post(REGISTER_URL, formData);
const { token, user, account, metadata } = res.data;
const identity = {
user,
account,
metadata,
};
localStorage.setItem("token", token);
localStorage.setItem("identity", JSON.stringify(identity));
setToken(token);
setIdentity(identity);
setAuthStatus("authenticated");
} catch (err) {
console.error("Error al registrarse:", err);
let message = "Ha ocurrido un error inesperado.";
if (err.response) {
const { status, data } = err.response;
if (status === 400) {
message = "Usuario o contraseña incorrectos.";
} else if (status === 403) {
message = "Tu cuenta está inactiva o suspendida.";
} else if (status === 404) {
message = "Usuario no encontrado.";
} else if (data?.message) {
message = data.message;
}
}
setError(message);
throw new Error(message);
}
};
const logout = () => {
localStorage.clear();
setUser(null);
localStorage.removeItem("token");
localStorage.removeItem("identity");
setIdentity(null);
setToken(null);
setAuthStatus("unauthenticated");
};
const clearError = () => setError(null);
return (
<AuthContext.Provider value={{ user, token, authStatus, login, logout, error }}>
<AuthContext.Provider
value={{
identity, // { user, account, metadata }
token,
authStatus,
login,
register,
logout,
error,
clearError
}}
>
{children}
</AuthContext.Provider>
);

View File

@@ -4,8 +4,8 @@ import { useData } from "../hooks/useData";
export const DataContext = createContext();
export const DataProvider = ({ config, children }) => {
const data = useData(config);
export const DataProvider = ({ config, onError, children }) => {
const data = useData(config, onError);
return (
<DataContext.Provider value={data}>

View File

@@ -0,0 +1,40 @@
import { createContext, useState, useContext } from 'react';
import PropTypes from 'prop-types';
import NotificationModal from '@/components/NotificationModal';
const ErrorContext = createContext();
export const ErrorProvider = ({ children }) => {
const [error, setError] = useState(null);
const showError = (err) => {
setError({
title: err.status ? `Error ${err.status}` : "Error",
message: err.message,
variant: 'danger'
});
};
const closeError = () => setError(null);
return (
<ErrorContext.Provider value={{ showError }}>
{children}
{error && (
<NotificationModal
show={true}
onClose={closeError}
title={error.title}
message={error.message}
variant='danger'
buttons={[{ label: "Aceptar", variant: "danger", onClick: closeError }]}
/>
)}
</ErrorContext.Provider>
);
};
ErrorProvider.propTypes = {
children: PropTypes.node.isRequired,
};
export const useError = () => useContext(ErrorContext);

View File

@@ -1,4 +1,4 @@
import { useContext } from "react";
import { AuthContext } from "@/context/AuthContext";
import { AuthContext } from "../context/AuthContext";
export const useAuth = () => useContext(AuthContext);

View File

@@ -1,4 +1,4 @@
import { useContext } from "react";
import { ConfigContext } from "@/context/ConfigContext.jsx";
import { ConfigContext } from "../context/ConfigContext.jsx";
export const useConfig = () => useContext(ConfigContext);

View File

@@ -1,7 +1,7 @@
import { useState, useEffect, useCallback, useRef } from "react";
import axios from "axios";
export const useData = (config) => {
export const useData = (config, onError) => {
const [data, setData] = useState(null);
const [dataLoading, setLoading] = useState(true);
const [dataError, setError] = useState(null);
@@ -13,10 +13,59 @@ export const useData = (config) => {
}
}, [config]);
const getAuthHeaders = () => ({
"Content-Type": "application/json",
"Authorization": `Bearer ${localStorage.getItem("token")}`,
});
const getAuthHeaders = (isFormData = false) => {
const token = localStorage.getItem("token");
const headers = {};
if (token) headers.Authorization = `Bearer ${token}`;
if (!isFormData) {
headers["Content-Type"] = "application/json";
}
return headers;
};
const handleAxiosError = (err) => {
if (err.response && err.response.data) {
const data = err.response.data;
if (data.status === 422 && data.errors) {
return {
status: 422,
errors: data.errors,
path: data.path ?? null,
timestamp: data.timestamp ?? null,
};
}
return {
status: data.status ?? err.response.status,
error: data.error ?? null,
message: data.message ?? err.response.statusText ?? "Error desconocido",
path: data.path ?? null,
timestamp: data.timestamp ?? null,
};
}
if (err.request) {
return {
status: null,
error: "Network Error",
message: "No se pudo conectar al servidor",
path: null,
timestamp: new Date().toISOString(),
};
}
return {
status: null,
error: "Client Error",
message: err.message || "Error desconocido",
path: null,
timestamp: new Date().toISOString(),
};
};
const fetchData = useCallback(async () => {
const current = configRef.current;
@@ -30,101 +79,62 @@ export const useData = (config) => {
headers: getAuthHeaders(),
params: current.params,
});
setData(response.data.data);
setData(response.data);
} catch (err) {
setError(err.response?.data?.message || err.message);
const error = handleAxiosError(err);
setError(error);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
if (config?.baseUrl) {
fetchData();
}
if (config?.baseUrl) fetchData();
}, [config, fetchData]);
const getData = async (url, params = {}) => {
const requestWrapper = async (method, endpoint, payload = null, refresh = false) => {
try {
const response = await axios.get(url, {
headers: getAuthHeaders(),
params,
});
return { data: response.data.data, error: null };
} catch (err) {
return {
data: null,
error: err.response?.data?.message || err.message,
};
}
};
const isFormData = payload instanceof FormData;
const headers = getAuthHeaders(isFormData);
const cfg = { headers };
let response;
const postData = async (endpoint, payload) => {
const headers = {
Authorization: `Bearer ${localStorage.getItem("token")}`,
...(payload instanceof FormData ? {} : { "Content-Type": "application/json" }),
};
const response = await axios.post(endpoint, payload, { headers });
await fetchData();
return response.data.data;
};
const postDataValidated = async (endpoint, payload) => {
try {
const headers = {
Authorization: `Bearer ${localStorage.getItem("token")}`,
...(payload instanceof FormData ? {} : { "Content-Type": "application/json" }),
};
const response = await axios.post(endpoint, payload, { headers });
return { data: response.data.data, errors: null };
} catch (err) {
const raw = err.response?.data?.message;
let parsed = {};
try {
parsed = JSON.parse(raw);
} catch {
return { data: null, errors: { general: raw || err.message } };
if (method === "get") {
if (payload) cfg.params = payload;
response = await axios.get(endpoint, cfg);
} else if (method === "delete") {
if (payload) cfg.data = payload;
response = await axios.delete(endpoint, cfg);
} else {
response = await axios[method](endpoint, payload, cfg);
}
return { data: null, errors: parsed };
if (refresh) await fetchData();
return response.data;
} catch (err) {
const error = handleAxiosError(err);
if (error.status !== 422 && onError) {
onError(error);
}
setError(error);
throw error;
}
};
const putData = async (endpoint, payload) => {
const response = await axios.put(endpoint, payload, {
headers: getAuthHeaders(),
});
await fetchData();
return response.data.data;
};
const deleteData = async (endpoint) => {
const response = await axios.delete(endpoint, {
headers: getAuthHeaders(),
});
await fetchData();
return response.data.data;
};
const deleteDataWithBody = async (endpoint, payload) => {
const response = await axios.delete(endpoint, {
headers: getAuthHeaders(),
data: payload,
});
await fetchData();
return response.data.data;
};
const clearError = () => setError(null);
return {
data,
dataLoading,
dataError,
getData,
postData,
postDataValidated,
putData,
deleteData,
deleteDataWithBody,
clearError,
getData: (url, params, refresh = true) => requestWrapper("get", url, params, refresh),
postData: (url, body, refresh = true) => requestWrapper("post", url, body, refresh),
putData: (url, body, refresh = true) => requestWrapper("put", url, body, refresh),
deleteData: (url, refresh = true) => requestWrapper("delete", url, null, refresh),
deleteDataWithBody: (url, body, refresh = true) => requestWrapper("delete", url, body, refresh)
};
};

View File

@@ -1,4 +1,4 @@
import { useContext } from "react";
import { DataContext } from "@/context/DataContext";
import { DataContext } from "../context/DataContext";
export const useDataContext = () => useContext(DataContext);

View File

@@ -0,0 +1,35 @@
import { useEffect, useState } from 'react';
import axios from 'axios';
import { useConfig } from './useConfig';
const useRequestCount = () => {
const { config } = useConfig();
const [count, setCount] = useState(null);
useEffect(() => {
if (!config) return;
const fetchCount = async () => {
try {
const res = await axios.get(
config.apiConfig.baseUrl + config.apiConfig.endpoints.requests.count,
{
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json',
},
}
);
setCount(res.data.count);
} catch (err) {
console.error('❌ Error al obtener el número de solicitudes:', err.message);
}
};
fetchCount();
}, [config]);
return count;
};
export default useRequestCount;

View File

@@ -32,7 +32,7 @@ const useSessionRenewal = () => {
clearInterval(interval);
logout();
}
}, 10000); // revisa cada 10 segundos
}, 10000);
return () => clearInterval(interval);
}, [alreadyWarned, logout]);
@@ -50,7 +50,7 @@ const useSessionRenewal = () => {
try {
const response = await axios.get(
`${config.apiConfig.baseUrl}${config.apiConfig.endpoints.auth.refreshToken}`,
`${config.apiConfig.coreUrl}${config.apiConfig.endpoints.auth.refreshToken}`,
null,
{
headers: {
@@ -59,7 +59,7 @@ const useSessionRenewal = () => {
}
);
const newToken = response.data.data.token;
const newToken = response.data.token;
localStorage.setItem("token", newToken);
setShowModal(false);
setAlreadyWarned(false);

View File

@@ -1,15 +0,0 @@
export const renderErrorAlert = (error, options = {}) => {
const { className = 'alert alert-danger py-1 px-2 small', role = 'alert' } = options;
if (!error) return null;
return (
<div className={className} role={role}>
{typeof error === 'string' ? error : 'An unexpected error occurred.'}
</div>
);
};
export const resetErrorIfEditEnds = (editMode, setError) => {
if (!editMode) setError(null);
};

5
src/util/array.js Normal file
View File

@@ -0,0 +1,5 @@
const random = (arr) => {
return arr[Math.floor(Math.random() * arr.length)]
}
export { random }

View File

@@ -1,30 +0,0 @@
export const DateParser = {
sqlToString: (sqlDate) => {
const [datePart] = sqlDate.split('T');
const [year, month, day] = datePart.split('-');
return `${day}/${month}/${year}`;
},
timestampToString: (timestamp) => {
const [datePart] = timestamp.split('T');
const [year, month, day] = datePart.split('-');
return `${day}/${month}/${year}`;
},
isoToStringWithTime: (isoString) => {
if (!isoString) return '—';
const date = new Date(isoString);
if (isNaN(date)) return '—'; // Para proteger aún más por si llega basura
return new Intl.DateTimeFormat('es-ES', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false,
timeZone: 'Europe/Madrid'
}).format(date);
}
};

View File

@@ -1,10 +0,0 @@
export const errorParser = (err) => {
const message = err.response?.data?.message;
try {
const parsed = JSON.parse(message);
return Object.values(parsed)[0];
// eslint-disable-next-line no-unused-vars
} catch (e) {
return message || err.message || "Unknown error";
}
};

View File

@@ -1,29 +0,0 @@
export const generateSecurePassword = (length = 12) => {
const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lower = 'abcdefghijklmnopqrstuvwxyz';
const digits = '0123456789';
const symbols = '!@#$%^&*'; // <- compatibles con bcrypt
const all = upper + lower + digits + symbols;
if (length < 8) length = 8;
const getRand = (chars) => chars[Math.floor(Math.random() * chars.length)];
let password = [
getRand(upper),
getRand(lower),
getRand(digits),
getRand(symbols),
];
for (let i = password.length; i < length; i++) {
password.push(getRand(all));
}
for (let i = password.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[password[i], password[j]] = [password[j], password[i]];
}
return password.join('');
};

View File

@@ -1,7 +0,0 @@
export const parseJwt = (token) => {
try {
return JSON.parse(atob(token.split('.')[1]));
} catch (e) {
return null;
}
};