Merge pull request 'build(frontend): migrate CRA to Next.js (CSR lift-and-shift)' (#21) from feature/wave6-nextjs-migration into main

job-tracker-ui/src/App.tsx

@@ -27,11 +27,11 @@ import { PromptProvider } from "./prompt";
 import JobTable from "./components/JobTable";
 import type { JobTableColumns } from "./components/JobTable";
 import { I18nProvider, useI18n } from "./i18n/I18nProvider";
-import LoginPage from "./pages/LoginPage";
-import LandingPage from "./pages/LandingPage";
-import ForgotPasswordPage from "./pages/ForgotPasswordPage";
-import ResetPasswordPage from "./pages/ResetPasswordPage";
-import RouteErrorPage from "./pages/RouteErrorPage";
+import LoginPage from "./views/LoginPage";
+import LandingPage from "./views/LandingPage";
+import ForgotPasswordPage from "./views/ForgotPasswordPage";
+import ResetPasswordPage from "./views/ResetPasswordPage";
+import RouteErrorPage from "./views/RouteErrorPage";
 import { api } from "./api";
 import { resolveCaptureUrl } from "./captureUrl";
 import { clearAuthClientState, setAuthUserKey } from "./auth";
@@ -45,13 +45,13 @@ const CompaniesTable = lazy(() => import("./components/CompaniesTable"));
 const SettingsView = lazy(() => import("./components/SettingsView"));
 const RemindersView = lazy(() => import("./components/RemindersView"));
 const QuickCommandDialog = lazy(() => import("./components/QuickCommandDialog"));
-const ProfilePage = lazy(() => import("./pages/ProfilePage"));
-const AdminAuditPage = lazy(() => import("./pages/AdminAuditPage"));
-const AdminUsersPage = lazy(() => import("./pages/AdminUsersPage"));
-const AdminSystemPage = lazy(() => import("./pages/AdminSystemPage"));
-const CorrespondenceInboxPage = lazy(() => import("./pages/CorrespondenceInboxPage"));
-const GmailReviewPage = lazy(() => import("./pages/GmailReviewPage"));
-const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
+const ProfilePage = lazy(() => import("./views/ProfilePage"));
+const AdminAuditPage = lazy(() => import("./views/AdminAuditPage"));
+const AdminUsersPage = lazy(() => import("./views/AdminUsersPage"));
+const AdminSystemPage = lazy(() => import("./views/AdminSystemPage"));
+const CorrespondenceInboxPage = lazy(() => import("./views/CorrespondenceInboxPage"));
+const GmailReviewPage = lazy(() => import("./views/GmailReviewPage"));
+const NotFoundPage = lazy(() => import("./views/NotFoundPage"));
 
 type AuthConfig = { requireAuth: boolean };
 type MeResponse = {

job-tracker-ui/src/ClientApp.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+
+import App from "./App";
+import ErrorBoundary from "./components/ErrorBoundary";
+import { I18nProvider } from "./i18n/I18nProvider";
+
+export default function ClientApp() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <I18nProvider>
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>
+      </I18nProvider>
+    </LocalizationProvider>
+  );
+}

job-tracker-ui/src/LandingPage.authRedirect.test.tsx

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
 import { api } from "./api";
-import LandingPage from "./pages/LandingPage";
+import LandingPage from "./views/LandingPage";
 
 jest.mock("./api", () => ({
   api: {

job-tracker-ui/src/admin-system-page.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
-import AdminSystemPage from './pages/AdminSystemPage';
+import AdminSystemPage from './views/AdminSystemPage';
 import { I18nProvider } from './i18n/I18nProvider';
 import { api } from './api';
 

job-tracker-ui/src/api.ts

@@ -35,7 +35,7 @@ export function getApiErrorMessage(error: any, fallback = "Request failed.") {
   return fallback;
 }
 
-const envBaseUrl = process.env.REACT_APP_API_BASE_URL;
+const envBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
 const defaultBaseUrl =
   window.location.hostname === "localhost"
     ? "http://localhost:5202/api"

job-tracker-ui/src/assets/JobbjaktMark.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function JobbjaktMark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Job tracker" {...props}>
+      <defs>
+        <linearGradient id="briefcase-track" x1="0" x2="1" y1="0" y2="1">
+          <stop offset="0%" stopColor="#3b82f6" />
+          <stop offset="100%" stopColor="#14b8a6" />
+        </linearGradient>
+      </defs>
+      <rect x="8" y="12" width="48" height="40" rx="12" fill="#0f172a" />
+      <path d="M22 20v-2c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v2" fill="none" stroke="url(#briefcase-track)" strokeWidth="4" strokeLinecap="round" />
+      <rect x="14" y="22" width="36" height="26" rx="8" fill="none" stroke="url(#briefcase-track)" strokeWidth="4" />
+      <path d="M14 31h14" stroke="url(#briefcase-track)" strokeWidth="4" strokeLinecap="round" />
+      <path d="M36 31h14" stroke="url(#briefcase-track)" strokeWidth="4" strokeLinecap="round" />
+      <circle cx="32" cy="31" r="4.5" fill="#e2e8f0" />
+      <path d="M24 40l5 5 11-12" fill="none" stroke="#e2e8f0" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

job-tracker-ui/src/assets/jobbbjakt-mark.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Job tracker">
-  <defs>
-    <linearGradient id="briefcase-track" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0%" stop-color="#3b82f6"/>
-      <stop offset="100%" stop-color="#14b8a6"/>
-    </linearGradient>
-  </defs>
-  <rect x="8" y="12" width="48" height="40" rx="12" fill="#0f172a"/>
-  <path d="M22 20v-2c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v2" fill="none" stroke="url(#briefcase-track)" stroke-width="4" stroke-linecap="round"/>
-  <rect x="14" y="22" width="36" height="26" rx="8" fill="none" stroke="url(#briefcase-track)" stroke-width="4"/>
-  <path d="M14 31h14" stroke="url(#briefcase-track)" stroke-width="4" stroke-linecap="round"/>
-  <path d="M36 31h14" stroke="url(#briefcase-track)" stroke-width="4" stroke-linecap="round"/>
-  <circle cx="32" cy="31" r="4.5" fill="#e2e8f0"/>
-  <path d="M24 40l5 5 11-12" fill="none" stroke="#e2e8f0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

job-tracker-ui/src/components/GoogleAuthCard.tsx

@@ -53,7 +53,7 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
   const [working, setWorking] = useState(false);
   const hostRef = useRef<HTMLDivElement | null>(null);
 
-  const clientId = (process.env.REACT_APP_GOOGLE_CLIENT_ID || "").trim();
+  const clientId = (process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "").trim();
   const signedIn = Boolean(me?.provider);
   const actionLabel = !signedIn
     ? t("continueWithGoogle")

job-tracker-ui/src/correspondence-inbox-page.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { ToastProvider } from './toast';
 import { I18nProvider } from './i18n/I18nProvider';
-import CorrespondenceInboxPage from './pages/CorrespondenceInboxPage';
+import CorrespondenceInboxPage from './views/CorrespondenceInboxPage';
 import { api } from './api';
 
 jest.mock('./api', () => ({

job-tracker-ui/src/gmail-review-page.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { ToastProvider } from './toast';
 import { I18nProvider } from './i18n/I18nProvider';
-import GmailReviewPage from './pages/GmailReviewPage';
+import GmailReviewPage from './views/GmailReviewPage';
 import { api } from './api';
 
 jest.mock('./api', () => ({

job-tracker-ui/src/i18n/translations.ts

@@ -608,7 +608,7 @@ export const translations = {
     adminSystemCpuMode: "CPU mode",
     adminSystemNoSmtpHost: "No SMTP host configured",
     googleAccountTitle: "Google account",
-    googleSetupHint: "Set `REACT_APP_GOOGLE_CLIENT_ID` in your UI environment to enable Google sign-in and account linking.",
+    googleSetupHint: "Set `NEXT_PUBLIC_GOOGLE_CLIENT_ID` in your UI environment to enable Google sign-in and account linking.",
     googleLinked: "Linked",
     googleAvailableToLink: "Available to link",
     googleLinkedDate: "Linked {date}",
@@ -1573,7 +1573,7 @@ export const translations = {
     adminSystemCpuMode: "CPU-modus",
     adminSystemNoSmtpHost: "Ingen SMTP-vert konfigurert",
     googleAccountTitle: "Google-konto",
-    googleSetupHint: "Sett `REACT_APP_GOOGLE_CLIENT_ID` i UI-miljøet ditt for å aktivere Google-innlogging og kontokobling.",
+    googleSetupHint: "Sett `NEXT_PUBLIC_GOOGLE_CLIENT_ID` i UI-miljøet ditt for å aktivere Google-innlogging og kontokobling.",
     googleLinked: "Koblet",
     googleAvailableToLink: "Tilgjengelig for kobling",
     googleLinkedDate: "Koblet {date}",

job-tracker-ui/src/index.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import ErrorBoundary from "./components/ErrorBoundary";
-import { I18nProvider } from './i18n/I18nProvider';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <I18nProvider>
-        <ErrorBoundary>
-          <App />
-        </ErrorBoundary>
-      </I18nProvider>
-    </LocalizationProvider>
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

job-tracker-ui/src/layout/AppShell.tsx

@@ -25,7 +25,7 @@ import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
-import { ReactComponent as JobbjaktMark } from "../assets/jobbbjakt-mark.svg";
+import JobbjaktMark from "../assets/JobbjaktMark";
 import { useI18n } from "../i18n/I18nProvider";
 
 export type NavItem = {

job-tracker-ui/src/login-page.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 
-import LoginPage from './pages/LoginPage';
+import LoginPage from './views/LoginPage';
 import { ToastProvider } from './toast';
 import { I18nProvider } from './i18n/I18nProvider';
 import { api } from './api';

job-tracker-ui/src/profile-page.test.tsx

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ToastProvider } from './toast';
 import { I18nProvider } from './i18n/I18nProvider';
-import ProfilePage from './pages/ProfilePage';
+import ProfilePage from './views/ProfilePage';
 import { api } from './api';
 
 const createObjectURLMock = jest.fn(() => 'blob:mock-pdf');

job-tracker-ui/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

job-tracker-ui/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;