Merge pull request #686 from vintasoftware/597-update-react-router

pyanderson · web-flow · commit a8e10c20625a · 2025-09-26T17:48:19.000-03:00
Upgrade React Router to v7
diff --git a/backend/common/urls.py b/backend/common/urls.py
@@ -6,4 +6,5 @@
 app_name = "common"
 urlpatterns = [
     path("", views.IndexView.as_view(), name="index"),
+    path("users", views.IndexView.as_view(), name="index"),
 ]
diff --git a/backend/templates/common/index.html b/backend/templates/common/index.html
@@ -1,13 +1,12 @@
 {% extends 'base.html' %}
 
-
 {% block body %}
-  <div class="container">
-    <h1 class="heading-1">Django React Boilerplate Example App</h1>
-    <p class="paragraph">
+  <div class="max-w-5xl mx-auto px-4">
+    <h1 class="text-5xl mb-2">Django React Boilerplate Example App</h1>
+    <p class="mb-2">
       Below is an example of a React app included in the Django template.<br/>
-      Check <code class="inline-code">backend/templates/common/index.html</code> and <code class="inline-code">frontend/js/index.js</code> to understand how they're linked:
+      Check <code class="px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded">backend/templates/common/index.html</code> and <code class="px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded">frontend/js/index.js</code> to understand how they're linked:
     </p>
   </div>
-  <div class="container" id="react-app"></div>
+  <div class="max-w-5xl mx-auto px-4" id="react-app"></div>
 {% endblock %}
diff --git a/backend/templates/defender/lockout.html b/backend/templates/defender/lockout.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block body %}
-<div class="container">
+<div class="max-w-5xl mx-auto px-4">
     <h1>Temporary User Lockout</h1>
     <p>
         You have been locked out due to too many failed attempts. You have reached the failure limit of {{ failure_limit }} attempts.
@@ -11,4 +11,4 @@ <h1>Temporary User Lockout</h1>
     </p>
     <p>Please try again after the cool off period.</p>
 </div>
-{% endblock %}
+{% endblock %}
diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -1,45 +1 @@
 @import "tailwindcss";
-
-/* Django background */
-#django-background {
-  @apply text-[#092e20] text-[11pt] bg-no-repeat bg-[auto_200px] bg-center h-[300px] bg-[url('../assets/images/django-logo-positive.png')];
-}
-
-/* Logo wrapper */
-#django-logo-wrapper {
-  @apply text-[#092e20] mb-4;
-}
-
-#django-logo-wrapper > img {
-  @apply w-[100px];
-}
-
-/* Page container */
-.container {
-  @apply max-w-5xl mx-auto px-4;
-}
-
-/* Inline code */
-.inline-code {
-  @apply px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded;
-}
-
-/* Headings */
-.heading-1 {
-  @apply text-5xl mb-2;
-}
-
-.heading-2 {
-  @apply text-4xl mb-2;
-}
-
-/* Paragraphs */
-.paragraph {
-  @apply mb-2;
-}
-
-/* Button */
-.btn {
-  @apply px-2 py-1 border border-black text-black rounded-md
-         hover:bg-black hover:text-white transition duration-200 cursor-pointer;
-}
diff --git a/frontend/js/App.tsx b/frontend/js/App.tsx
@@ -1,8 +1,9 @@
 import * as Sentry from "@sentry/react";
 import cookie from "cookie";
+import { RouterProvider } from "react-router/dom";
 
 import { OpenAPI } from "./api";
-import Home from "./pages/Home";
+import router from "./routes";
 
 OpenAPI.interceptors.request.use((request) => {
   const { csrftoken } = cookie.parse(document.cookie);
@@ -14,7 +15,7 @@ OpenAPI.interceptors.request.use((request) => {
 
 const App = () => (
   <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
-    <Home />
+    <RouterProvider router={router} />
   </Sentry.ErrorBoundary>
 );
 
diff --git a/frontend/js/components/TopNav.tsx b/frontend/js/components/TopNav.tsx
@@ -0,0 +1,48 @@
+import { NavLink } from "react-router";
+
+const TopNav = () => {
+  return (
+    <header className="sticky top-0 z-50">
+      <nav
+        aria-label="Primary"
+        className="mx-auto mt-4 mb-6 max-w-6xl rounded-xl bg-zinc-900/80 backdrop-blur ring-1 ring-white/10"
+      >
+        <div className="flex items-center gap-2 px-4 py-2">
+          <a className="mr-2 font-semibold tracking-tight text-white" href="/">
+            django-react-boilerplate
+          </a>
+
+          <NavLink
+            className={({ isActive }) =>
+              [
+                "px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 transition",
+                "hover:text-white hover:bg-white/5",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+                isActive ? "text-white bg-white/10" : "",
+              ].join(" ")
+            }
+            end
+            to="/"
+          >
+            Home
+          </NavLink>
+
+          <NavLink
+            className={({ isActive }) =>
+              [
+                "px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 transition",
+                "hover:text-white hover:bg-white/5",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+                isActive ? "text-white bg-white/10" : "",
+              ].join(" ")
+            }
+            to="/users"
+          >
+            Users
+          </NavLink>
+        </div>
+      </nav>
+    </header>
+  );
+};
+export default TopNav;
diff --git a/frontend/js/components/index.ts b/frontend/js/components/index.ts
@@ -0,0 +1,3 @@
+import TopNav from "./TopNav";
+
+export { TopNav };
diff --git a/frontend/js/index.tsx b/frontend/js/index.tsx
@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 
 import App from "./App";
 
-import "../css/style.css";
+import "@/css/style.css";
 
 Sentry.init({
   dsn: window.SENTRY_DSN,
diff --git a/frontend/js/loaders/index.ts b/frontend/js/loaders/index.ts
@@ -0,0 +1 @@
+export * from "./users";
diff --git a/frontend/js/loaders/users.ts b/frontend/js/loaders/users.ts
@@ -0,0 +1,22 @@
+import { redirectDocument } from "react-router";
+
+import { ApiError, UsersService } from "@/js/api";
+
+export async function usersLoader({ request }: { request: Request }) {
+  const url = new URL(request.url);
+  const limit = Number(url.searchParams.get("limit") || 10);
+  const offset = Number(url.searchParams.get("offset") || 0);
+  try {
+    return await UsersService.usersList({ limit, offset });
+  } catch (error) {
+    if (
+      error instanceof ApiError &&
+      (error?.status === 401 || error?.status === 403)
+    ) {
+      const url = new URL(request.url);
+      const next = url.pathname + url.search + url.hash;
+      throw redirectDocument(`/admin/login/?next=${encodeURIComponent(next)}`);
+    }
+    throw error;
+  }
+}
diff --git a/frontend/js/pages/Home.tsx b/frontend/js/pages/Home.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
 
-import DjangoImgSrc from "../../assets/images/django-logo-negative.png";
-import { RestService } from "../api";
+import DjangoImgSrc from "@/assets/images/django-logo-negative.png";
+import { RestService } from "@/js/api";
+import { TopNav } from "@/js/components";
 
 const Home = () => {
   const [showBugComponent, setShowBugComponent] = useState(false);
@@ -17,22 +18,27 @@ const Home = () => {
 
   return (
     <>
-      <h2 className="heading-2">Static assets</h2>
-      <div id="django-background">
+      <TopNav />
+      <h2 className="text-4xl mb-2">Static assets</h2>
+      <div className="text-[#092e20] text-[11pt] bg-no-repeat bg-[auto_200px] bg-center h-[300px] bg-[url('../assets/images/django-logo-positive.png')]">
         If you are seeing the green Django logo on a white background and this
         text color is #092e20, frontend static files serving is working:
       </div>
-      <div id="django-logo-wrapper">
+      <div className="text-[#092e20] mb-4">
         <div>
           Below this text, you should see an img tag with the white Django logo
           on a green background:
         </div>
-        <img alt="Django Negative Logo" src={DjangoImgSrc} />
+        <img
+          alt="Django Negative Logo"
+          className="w-[100px]"
+          src={DjangoImgSrc}
+        />
       </div>
-      <h2 className="heading-2">Rest API</h2>
-      <p className="paragraph">{restCheck?.message}</p>
+      <h2 className="text-4xl mb-2">Rest API</h2>
+      <p className="mb-2">{restCheck?.message}</p>
       <button
-        className="btn"
+        className="px-2 py-1 border border-black text-black rounded-md hover:bg-black hover:text-white transition duration-200 cursor-pointer"
         type="button"
         onClick={() => setShowBugComponent(true)}
       >
diff --git a/frontend/js/pages/Users.tsx b/frontend/js/pages/Users.tsx
@@ -0,0 +1,76 @@
+import { Link, useLoaderData } from "react-router";
+
+import { PaginatedUserList } from "../api";
+import { TopNav } from "../components";
+import { makeLink } from "../utils";
+
+const Users = () => {
+  const data = useLoaderData<PaginatedUserList>();
+
+  const prev = makeLink(data.previous);
+  const next = makeLink(data.next);
+
+  return (
+    <>
+      <TopNav />
+      <section className="mx-auto max-w-3xl px-4">
+        <h1 className="mt-4 mb-3 font-semibold text-slate-950">Users</h1>
+
+        <ul className="bg-white rounded-xl border border-zinc-300">
+          {data.results.map((u) => (
+            <li
+              key={u.id}
+              className="px-4 py-3 text-sm text-slate-900 border-t border-zinc-200 first:border-t-0 hover:bg-slate-50"
+            >
+              {u.email}
+            </li>
+          ))}
+        </ul>
+
+        <div className="mt-3 flex items-center justify-between text-sm">
+          <span className="text-slate-600">
+            {data.results.length} on this page • {data.count} total
+          </span>
+
+          <div className="flex items-center gap-2">
+            {!prev ? (
+              <span
+                aria-disabled="true"
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 border border-transparent opacity-45 pointer-events-none"
+                tabIndex={-1}
+              >
+                ← Previous
+              </span>
+            ) : (
+              <Link
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 hover:bg-emerald-700 border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/45"
+                to={prev}
+              >
+                ← Previous
+              </Link>
+            )}
+
+            {!next ? (
+              <span
+                aria-disabled="true"
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 border border-transparent opacity-45 pointer-events-none"
+                tabIndex={-1}
+              >
+                Next →
+              </span>
+            ) : (
+              <Link
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 hover:bg-emerald-700 border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/45"
+                to={next}
+              >
+                Next →
+              </Link>
+            )}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Users;
diff --git a/frontend/js/pages/__tests__/Home.spec.tsx b/frontend/js/pages/__tests__/Home.spec.tsx
@@ -1,9 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
 
-import { RestService } from "../../api";
-import Home from "../Home";
+import { RestService } from "@/js/api";
+import Home from "@/js/pages/Home";
 
-jest.mock("../../api", () => ({
+jest.mock("@/js/api", () => ({
   RestService: {
     restRestCheckRetrieve: jest.fn(),
   },
@@ -21,15 +22,23 @@ describe("Home", () => {
   });
 
   test("renders static assets and rest API data", async () => {
-    render(<Home />);
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <Home />
+      </MemoryRouter>,
+    );
 
     expect(screen.getByText("Static assets")).toBeInTheDocument();
     expect(screen.getByText("Rest API")).toBeInTheDocument();
     expect(await screen.findByText("Test Result")).toBeInTheDocument();
   });
 
   test("calls restRestCheckRetrieve on mount", async () => {
-    render(<Home />);
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <Home />
+      </MemoryRouter>,
+    );
 
     await waitFor(() => {
       expect(RestService.restRestCheckRetrieve).toHaveBeenCalledWith();
diff --git a/frontend/js/routes/index.ts b/frontend/js/routes/index.ts
@@ -0,0 +1,12 @@
+import { createBrowserRouter } from "react-router";
+
+import { usersLoader } from "@/js/loaders";
+import Home from "@/js/pages/Home";
+import Users from "@/js/pages/Users";
+
+const router = createBrowserRouter([
+  { index: true, Component: Home },
+  { path: "users", Component: Users, loader: usersLoader },
+]);
+
+export default router;
diff --git a/frontend/js/types/assets.d.ts b/frontend/js/types/assets.d.ts
@@ -0,0 +1,13 @@
+// CSS
+declare module "*.css";
+// Images and Fonts
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.webp";
+declare module "*.svg";
+declare module "*.woff";
+declare module "*.woff2";
+declare module "*.ttf";
+declare module "*.eot";
diff --git a/frontend/js/utils/index.ts b/frontend/js/utils/index.ts
@@ -1,3 +1,4 @@
+import { makeLink } from "./navigation";
 import Urls from "./urls";
 
-export { Urls };
+export { Urls, makeLink };
diff --git a/frontend/js/utils/navigation.ts b/frontend/js/utils/navigation.ts
@@ -0,0 +1,5 @@
+export const makeLink = (href: string | null | undefined) => {
+  if (!href) return null;
+  const u = new URL(href, window.location.origin);
+  return `?${u.searchParams.toString()}`;
+};
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.setup.js b/jest.setup.js
diff --git a/package.json b/package.json
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,5 @@`
`6`	`6`	`app_name = "common"`
`7`	`7`	`urlpatterns = [`
`8`	`8`	`path("", views.IndexView.as_view(), name="index"),`
	`9`	`+ path("users", views.IndexView.as_view(), name="index"),`
`9`	`10`	`]`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import TopNav from "./TopNav";`
	`2`	`+`
	`3`	`+export { TopNav };`