Gallardo7761/mpaste
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Add: migration to new backend

Browse Source
This commit is contained in:
Jose
2026-02-24 03:39:49 +01:00
parent 589215b2bc
commit 4d0c4d3f26
13 changed files with 4686 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4524
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

8
public/config/settings.dev.json
View File

@@ -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"
}
}
}

8
public/config/settings.prod.json
View File

@@ -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"
}
}
}

2
src/App.jsx
View File

@@ -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>
</>

7
src/components/Pastes/CodeEditor.jsx
View File

@@ -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();

21
src/components/Pastes/PastePanel.jsx
View File

@@ -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
}}
/>
</>

6
src/components/Pastes/PublicPasteItem.jsx
View File

@@ -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,
};

98
src/context/AuthContext.jsx
View File

@@ -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>
);
};

4
src/context/DataContext.jsx
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}>

36
src/context/ErrorContext.jsx Normal file
View File

@@ -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);

173
src/hooks/useData.js
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,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)
};
};

6
src/main.jsx
View File

@@ -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>

13
src/pages/Home.jsx
View File

@@ -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);