onSelect(paste.paste_key)}>
+
onSelect(paste.pasteKey)}>
{paste.title}
{trimContent(paste.content, 100)}
- {new Date(paste.created_at).toLocaleString()}
+ {new Date(paste.createdAt).toLocaleString()}
);
@@ -22,7 +22,7 @@ PublicPasteItem.propTypes = {
paste: PropTypes.shape({
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
- created_at: PropTypes.string.isRequired,
+ createdAt: PropTypes.string.isRequired,
}).isRequired,
};
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
deleted file mode 100644
index 8f2b2a4..0000000
--- a/src/context/AuthContext.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useState, useEffect, createContext } from "react";
-import createAxiosInstance from "@/api/axiosInstance";
-import { useConfig } from "@/hooks/useConfig";
-
-export const AuthContext = createContext();
-
-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 [authStatus, setAuthStatus] = useState("checking");
- const [error, setError] = useState(null);
-
- useEffect(() => {
- if (!config) return;
-
- if (!token) {
- setAuthStatus("unauthenticated");
- return;
- }
-
- const BASE_URL = config.apiConfig.baseUrl;
- const VALIDATE_URL = `${BASE_URL}${config.apiConfig.endpoints.auth.validateToken}`;
-
- const checkAuth = async () => {
- try {
- const res = await axios.get(VALIDATE_URL, {
- headers: { Authorization: `Bearer ${token}` },
- });
- if (res.status === 200) {
- setAuthStatus("authenticated");
- } else {
- logout();
- }
- } catch (err) {
- console.error("Error validando token:", err);
- logout();
- }
- };
-
- checkAuth();
- }, [token, config]);
-
- 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;
-
- localStorage.setItem("token", token);
- localStorage.setItem("user", JSON.stringify(member));
- localStorage.setItem("tokenTime", tokenTime);
-
- setToken(token);
- setUser(member);
- 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.";
- } 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);
- setToken(null);
- setAuthStatus("unauthenticated");
- };
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/context/DataContext.jsx b/src/context/DataContext.jsx
index a99a74e..7887f90 100644
--- a/src/context/DataContext.jsx
+++ b/src/context/DataContext.jsx
@@ -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 (
diff --git a/src/context/ErrorContext.jsx b/src/context/ErrorContext.jsx
new file mode 100644
index 0000000..4c0ff33
--- /dev/null
+++ b/src/context/ErrorContext.jsx
@@ -0,0 +1,36 @@
+import { createContext, useState, useContext } from 'react';
+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 (
+
+ {children}
+ {error && (
+
+ )}
+
+ );
+};
+
+export const useError = () => useContext(ErrorContext);
diff --git a/src/hooks/useData.js b/src/hooks/useData.js
index 9bc6d6e..43783f8 100644
--- a/src/hooks/useData.js
+++ b/src/hooks/useData.js
@@ -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,104 +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 = {}, headers = {}) => {
+ const requestWrapper = async (method, endpoint, payload = null, refresh = false, extraHeaders = {}) => {
try {
- const response = await axios.get(url, {
- headers: { ...getAuthHeaders(), ...headers },
- params,
- });
- return { data: response.data.data, error: null };
- } catch (err) {
- return {
- data: null,
- error: {
- status: err.response?.data?.status || err.response?.status,
- message: err.response?.data?.message || err.message,
- },
- };
- }
- };
+ const isFormData = payload instanceof FormData;
+ const headers = { ...getAuthHeaders(isFormData), ...extraHeaders };
+ 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, headers = {}) => requestWrapper("get", url, params, refresh, headers),
+ 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)
};
};
diff --git a/src/main.jsx b/src/main.jsx
index 85c0fc7..fc622f6 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,28 +5,28 @@ import { createRoot } from 'react-dom/client'
import App from '@/App.jsx'
import { BrowserRouter } from 'react-router-dom'
import { ThemeProvider } from '@/context/ThemeContext'
-import { AuthProvider } from '@/context/AuthContext'
import { ConfigProvider } from '@/context/ConfigContext.jsx'
/* CSS */
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
-import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import '@/css/index.css'
import { SearchProvider } from './context/SearchContext'
+import { ErrorProvider } from './context/ErrorContext'
createRoot(document.getElementById('root')).render(
-
+
-
+
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 8010a77..28636a8 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -7,22 +7,21 @@ import { useState } from 'react';
import { DataProvider } from '@/context/DataContext';
import NotificationModal from '@/components/NotificationModal';
import { useSearch } from "@/context/SearchContext";
+import { useError } from '@/context/ErrorContext';
const Home = () => {
const { config, configLoading } = useConfig();
+ const { showError } = useError();
if (configLoading) return
;
const reqConfig = {
baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.pastes.all}`,
- params: {
- _sort: 'created_at',
- _order: 'desc',
- },
+ params: {}
};
return (
-
+
);
@@ -45,8 +44,8 @@ const HomeContent = ({ reqConfig }) => {
const handleSubmit = async (paste) => {
try {
const createdPaste = await postData(reqConfig.baseUrl, paste);
- if (createdPaste && createdPaste.is_private) {
- setKey(createdPaste.paste_key);
+ if (createdPaste && createdPaste.isPrivate) {
+ setKey(createdPaste.pasteKey);
}
} catch (error) {
setError(error);