Add: migration to new backend

public/config/settings.dev.json

@@ -1,11 +1,11 @@
 {
   "apiConfig": {
-    "baseUrl": "https://api.miarma.net/mpaste",
+    "baseUrl": "http://localhost:8081/v2/mpaste",
     "endpoints": {
       "pastes": {
-        "all": "/raw/v1/pastes",
-        "byId": "/raw/v1/pastes/:paste_id",
-        "byKey": "/v1/pastes/:paste_key"
+        "all": "/pastes",
+        "byId": "/:pasteId",
+        "byKey": "/:pasteKey"
       }
     }
   }

public/config/settings.prod.json

@@ -1,11 +1,11 @@
 {
   "apiConfig": {
-    "baseUrl": "https://api.miarma.net/mpaste",
+    "baseUrl": "https://api.miarma.net/v2/mpaste",
     "endpoints": {
       "pastes": {
-        "all": "/raw/v1/pastes",
-        "byId": "/raw/v1/pastes/:paste_id",
-        "byKey": "/v1/pastes/:paste_key"
+        "all": "/pastes",
+        "byId": "/:pasteId",
+        "byKey": "/:pasteKey"
       }
     }
   }

src/App.jsx

@@ -9,7 +9,7 @@ function App() {
       <div className="fill d-flex flex-column">
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/:paste_key" element={<Home />} />
+          <Route path="/:pasteKey" element={<Home />} />
         </Routes>
       </div>
     </>

src/components/Pastes/CodeEditor.jsx

@@ -2,13 +2,6 @@ import Editor from "@monaco-editor/react";
 import { useTheme } from "@/hooks/useTheme";
 import { useRef } from "react";
 import PropTypes from "prop-types";
-import { loader } from '@monaco-editor/react';
-
-loader.config({
-    'vs/nls': {
-        availableLanguages: { '*': 'es' },
-    },
-});
 
 const CodeEditor = ({ className = "", syntax, readOnly, onChange, value }) => {
     const { theme } = useTheme();

src/components/Pastes/PastePanel.jsx

@@ -11,7 +11,7 @@ import { useDataContext } from "@/hooks/useDataContext";
 import PasswordModal from "@/components/Auth/PasswordModal.jsx";
 
 const PastePanel = ({ onSubmit, publicPastes }) => {
-	const { paste_key } = useParams();
+	const { pasteKey } = useParams();
 	const navigate = useNavigate();
 	const { getData } = useDataContext();
 	const [title, setTitle] = useState("");
@@ -30,8 +30,8 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 			title,
 			content,
 			syntax,
-			burn_after: burnAfter,
-			is_private: isPrivate,
+			burnAfter: burnAfter,
+			isPrivate: isPrivate,
 			password: password || null,
 		};
 		if (onSubmit) onSubmit(paste);
@@ -42,8 +42,11 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 	};
 
 	const fetchPaste = async (key, pwd = "") => {
-		const url = `https://api.miarma.net/mpaste/v1/pastes/${key}`;
-		const { data, error } = await getData(url, {}, {
+		const url = import.meta.env.MODE === 'production' ? 
+		`https://api.miarma.net/v2/mpaste/pastes/${key}` :
+		`http://localhost:8081/v2/mpaste/pastes/${key}`;
+		
+		const { data, error } = await getData(url, {}, false, {
 			'X-Paste-Password': pwd
 		});
 
@@ -66,8 +69,8 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 	};
 
 	useEffect(() => {
-		if (paste_key) fetchPaste(paste_key);
-	}, [paste_key]);
+		if (pasteKey) fetchPaste(pasteKey);
+	}, [pasteKey]);
 
 	return (
 		<>
@@ -93,7 +96,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 									{publicPastes && publicPastes.length > 0 ? (
 										publicPastes.map((paste) => (
 											<PublicPasteItem
-												key={paste.paste_key}
+												key={paste.pasteKey}
 												paste={paste}
 												onSelect={handleSelectPaste}
 											/>
@@ -224,7 +227,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 				onClose={() => setShowPasswordModal(false)}
 				onSubmit={(pwd) => {
 					setShowPasswordModal(false);
-					fetchPaste(paste_key, pwd); // reintentas con la pass
+					fetchPaste(pasteKey, pwd); // reintentas con la pass
 				}}
 			/>
 		</>

src/components/Pastes/PublicPasteItem.jsx

@@ -8,11 +8,11 @@ const trimContent = (text, maxLength = 80) => {
 
 const PublicPasteItem = ({ paste, onSelect }) => {
   return (
-    <div className="public-paste-item p-2 mb-2 rounded custom-border" style={{ cursor: "pointer" }} onClick={() => onSelect(paste.paste_key)}>
+    <div className="public-paste-item p-2 mb-2 rounded custom-border" style={{ cursor: "pointer" }} onClick={() => onSelect(paste.pasteKey)}>
       <h5 className="m-0">{paste.title}</h5>
       <p className="m-0 text-truncate">{trimContent(paste.content, 100)}</p>
       <small className="custom-text-muted">
-        {new Date(paste.created_at).toLocaleString()}
+        {new Date(paste.createdAt).toLocaleString()}
       </small>
     </div>
   );
@@ -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,
 };
 

src/context/AuthContext.jsx

@@ -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 (
-    <AuthContext.Provider value={{ user, token, authStatus, login, logout, error }}>
-      {children}
-    </AuthContext.Provider>
-  );
-};

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 (
     <DataContext.Provider value={data}>

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 (
+    <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>
+  );
+};
+
+export const useError = () => useContext(ErrorContext);

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 };
+      const isFormData = payload instanceof FormData;
+      const headers = { ...getAuthHeaders(isFormData), ...extraHeaders };
+      const cfg = { headers };
+      let response;
+
+      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);
+      }
+
+      if (refresh) await fetchData();
+      return response.data;
+
     } catch (err) {
-      return {
-        data: null,
-        error: {
-          status: err.response?.data?.status || err.response?.status,
-          message: err.response?.data?.message || err.message,
-        },
-      };
+      const error = handleAxiosError(err);
+
+      if (error.status !== 422 && onError) {
+        onError(error);
+      }
+
+      setError(error);
+      throw error;
     }
   };
 
-  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 } };
-      }
-
-      return { data: null, errors: parsed };
-    }
-  };
-
-  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)
   };
 };

src/main.jsx

@@ -5,7 +5,6 @@ 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 */
@@ -15,18 +14,19 @@ 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(
   <StrictMode>
     <ConfigProvider>
       <ThemeProvider>
-        <AuthProvider>
+        <ErrorProvider>
           <BrowserRouter>
             <SearchProvider>
               <App />
             </SearchProvider>
           </BrowserRouter>
-        </AuthProvider>
+        </ErrorProvider>
       </ThemeProvider>
     </ConfigProvider>
   </StrictMode>

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 <p><LoadingIcon /></p>;
 
   const reqConfig = {
     baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.pastes.all}`,
-    params: {
-      _sort: 'created_at',
-      _order: 'desc',
-    },
+    params: {}
   };
 
   return (
-    <DataProvider config={reqConfig}>
+    <DataProvider config={reqConfig} onError={showError}>
       <HomeContent reqConfig={reqConfig} />
     </DataProvider>
   );
@@ -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);