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.
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { Box, Button, Paper, Typography } from "@mui/material";
|
|
import { useNavigate, useRouteError } from "react-router-dom";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
export default function RouteErrorPage() {
|
|
const navigate = useNavigate();
|
|
const error = useRouteError() as any;
|
|
const { t } = useI18n();
|
|
|
|
const details = typeof error?.statusText === "string" && error.statusText.trim()
|
|
? error.statusText
|
|
: typeof error?.message === "string" && error.message.trim()
|
|
? error.message
|
|
: null;
|
|
|
|
return (
|
|
<Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", p: 3 }}>
|
|
<Paper sx={{ p: { xs: 3, md: 5 }, borderRadius: 4, width: "100%", maxWidth: 640 }}>
|
|
<Box sx={{ display: "grid", gap: 1.5 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary", letterSpacing: 1.6 }}>
|
|
{error?.status || 500}
|
|
</Typography>
|
|
<Typography variant="h4" sx={{ fontWeight: 800 }}>
|
|
{t("appErrorTitle")}
|
|
</Typography>
|
|
<Typography sx={{ color: "text.secondary" }}>
|
|
{t("appErrorBody")}
|
|
</Typography>
|
|
{details ? <Typography sx={{ color: "text.secondary" }}>{details}</Typography> : null}
|
|
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mt: 1 }}>
|
|
<Button variant="contained" onClick={() => navigate("/jobs")}>
|
|
{t("goHome")}
|
|
</Button>
|
|
<Button variant="outlined" onClick={() => navigate(-1)}>
|
|
{t("goBack")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|