cesnimda
acf60c2a07
Wave 6. Swaps react-scripts' build/dev tooling for Next.js while keeping the app's actual routing/rendering model unchanged -- the app is almost entirely behind auth with no proven SSR/SEO need, so a real App Router rewrite would touch ~90 files for zero user-visible benefit. - next.config.js: output:'export' (static HTML+JS, same "single index.html served by nginx with try_files fallback" deploy as CRA). - app/layout.tsx + app/page.tsx: root shell ports public/index.html's <head>, mounts the whole existing App tree client-only (ssr:false) since it reads window/localStorage during initial render and Next's static prerender would otherwise execute that on the server. - Renamed src/pages/ -> src/views/ (Next's Pages Router auto-detects any `pages/` dir under the app root and tried to build our React Router page components as its own routes). - REACT_APP_* -> NEXT_PUBLIC_* across code, .env.development, Dockerfile, docker-compose.yml build args. - Replaced the CRA SVGR import (`ReactComponent` from .svg, unsupported under Turbopack) with a small inline JobbjaktMark component. - TypeScript 4.9 -> 5.9 (MUI v8's type-checked build needs syntax 4.9's parser rejects; CRA never hit this because babel doesn't type-check). - Dropped CRA-only files (index.tsx, reportWebVitals, react-app-env.d.ts, public/index.html); kept react-scripts as the Jest test runner only (next/jest migration not needed -- the existing config already works). Verified: `next build` static export succeeds, `next dev` serves the landing page and client-side routes (login etc.) correctly, all 57 frontend tests + 172 backend tests still green. Known caveat: deep-linking straight to a sub-route (e.g. /login) 404s in `next dev` since there's no server route for it -- the app only ever mounts at "/". Production is unaffected: nginx's existing try_files fallback still serves index.html for any path.
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import axios from "axios";
|
|
import { clearAuthClientState, getCsrfToken } from "./auth";
|
|
|
|
function looksLikeHtml(value: string) {
|
|
return /<\s*html\b|<\s*body\b|<\s*head\b|<\s*title\b|<\s*!doctype\b/i.test(value);
|
|
}
|
|
|
|
function sanitizeServerMessage(value: string, fallback: string) {
|
|
const text = value.trim();
|
|
if (!text) return fallback;
|
|
if (looksLikeHtml(text)) return fallback;
|
|
return text.length > 300 ? `${text.slice(0, 297).trimEnd()}...` : text;
|
|
}
|
|
|
|
export function getApiErrorMessage(error: any, fallback = "Request failed.") {
|
|
const data = error?.response?.data;
|
|
if (typeof data === "string" && data.trim()) return sanitizeServerMessage(data, fallback);
|
|
if (typeof data?.message === "string" && data.message.trim()) return sanitizeServerMessage(data.message, fallback);
|
|
if (typeof data?.detail === "string" && data.detail.trim()) return sanitizeServerMessage(data.detail, fallback);
|
|
if (typeof data?.title === "string" && data.title.trim()) return sanitizeServerMessage(data.title, fallback);
|
|
if (Array.isArray(data?.errors)) {
|
|
const first = data.errors.find((value: unknown) => typeof value === "string" && value.trim());
|
|
if (first) return sanitizeServerMessage(first, fallback);
|
|
}
|
|
if (data?.errors && typeof data.errors === "object") {
|
|
for (const value of Object.values(data.errors)) {
|
|
if (Array.isArray(value)) {
|
|
const first = value.find((item: unknown) => typeof item === "string" && item.trim());
|
|
if (first) return sanitizeServerMessage(first, fallback);
|
|
}
|
|
if (typeof value === "string" && value.trim()) return sanitizeServerMessage(value, fallback);
|
|
}
|
|
}
|
|
if (typeof error?.message === "string" && error.message.trim()) return sanitizeServerMessage(error.message, fallback);
|
|
return fallback;
|
|
}
|
|
|
|
const envBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
|
|
const defaultBaseUrl =
|
|
window.location.hostname === "localhost"
|
|
? "http://localhost:5202/api"
|
|
: "/api";
|
|
|
|
export const api = axios.create({
|
|
baseURL: envBaseUrl && envBaseUrl.trim().length > 0 ? envBaseUrl : defaultBaseUrl,
|
|
withCredentials: true,
|
|
xsrfCookieName: "XSRF-TOKEN",
|
|
xsrfHeaderName: "X-CSRF-TOKEN",
|
|
});
|
|
|
|
api.interceptors.request.use((config) => {
|
|
const method = (config.method ?? "get").toUpperCase();
|
|
if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
|
|
const csrfToken = getCsrfToken();
|
|
if (csrfToken) {
|
|
config.headers = config.headers ?? {};
|
|
config.headers["X-CSRF-TOKEN"] = csrfToken;
|
|
}
|
|
}
|
|
return config;
|
|
});
|
|
|
|
api.interceptors.response.use(
|
|
(r) => r,
|
|
(err) => {
|
|
const status = err?.response?.status;
|
|
if (status === 401) {
|
|
clearAuthClientState();
|
|
}
|
|
return Promise.reject(err);
|
|
},
|
|
);
|