Match result page

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { IntlProvider } from "react-intl";
 import messagesEn from "./locale/en.json";
 import messagesEs from "./locale/es.json";
@@ -14,7 +14,9 @@ import LocaleContext from "./IntlProvider";
 import FooterVisibilityContext from "./FooterVisibilityContext";
 import Cookies from "js-cookie";
 import FilterContext from "./FilterContextProvider";
+import { SiteSettingsProvider } from "./SiteSettingsContext";
 import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   const messageMap = {
@@ -24,16 +26,20 @@ function App() {
     it: messagesIt,
     de: messagesDe,
   };
+
   const initialLocale = Cookies.get("wildbookLangCode") || "en";
   const [locale, setLocale] = useState(initialLocale);
+
   const [visible, setVisible] = useState(true);
+
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
     minHeight: "100vh",
   };
 
-  const queryClient = new QueryClient();
+  const queryClientRef = useRef(null);
+  if (!queryClientRef.current) queryClientRef.current = new QueryClient();
 
   const handleLocaleChange = (newLocale) => {
     setLocale(newLocale);
@@ -59,7 +65,7 @@ function App() {
     : "/";
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClientRef.current}>
       <LocaleContext.Provider
         value={{ locale, onLocaleChange: handleLocaleChange }}
       >
@@ -73,27 +79,32 @@ function App() {
               defaultLocale="en"
               messages={messageMap[locale]}
             >
-              <FooterVisibilityContext.Provider value={{ visible, setVisible }}>
-                <FilterContext.Provider
-                  value={{ filters, updateFilter, resetFilters }}
+              <SiteSettingsProvider>
+                <FooterVisibilityContext.Provider
+                  value={{ visible, setVisible }}
                 >
-                  <FrontDesk
-                    adminUserInitialized={true}
-                    setLocale={setLocale}
-                  />
-                  <ToastContainer
-                    position="top-right"
-                    autoClose={3000}
-                    hideProgressBar={false}
-                    newestOnTop={false}
-                    closeOnClick
-                    rtl={false}
-                    pauseOnFocusLoss
-                    draggable
-                    pauseOnHover
-                  />
-                </FilterContext.Provider>
-              </FooterVisibilityContext.Provider>
+                  <FilterContext.Provider
+                    value={{ filters, updateFilter, resetFilters }}
+                  >
+                    <FrontDesk
+                      adminUserInitialized={true}
+                      setLocale={setLocale}
+                    />
+
+                    <ToastContainer
+                      position="top-right"
+                      autoClose={3000}
+                      hideProgressBar={false}
+                      newestOnTop={false}
+                      closeOnClick
+                      rtl={false}
+                      pauseOnFocusLoss
+                      draggable
+                      pauseOnHover
+                    />
+                  </FilterContext.Provider>
+                </FooterVisibilityContext.Provider>
+              </SiteSettingsProvider>
             </IntlProvider>
           </BrowserRouter>
         </div>

frontend/src/AuthenticatedSwitch.jsx

@@ -11,7 +11,6 @@ const AboutUs = lazy(() => import("./pages/AboutUs"));
 
 // Lazy load pages
 const Login = lazy(() => import("./pages/Login"));
-const Profile = lazy(() => import("./pages/Profile"));
 const Home = lazy(() => import("./pages/Home"));
 const EncounterSearch = lazy(
   () => import("./pages/SearchPages/EncounterSearch"),
@@ -29,8 +28,12 @@ const EditAnnotation = lazy(() => import("./pages/EditAnnotation"));
 
 const BulkImport = lazy(() => import("./pages/BulkImport/BulkImport"));
 const BulkImportTask = lazy(() => import("./pages/BulkImport/BulkImportTask"));
+const MatchResults = lazy(
+  () => import("./pages/MatchResultsPage/MatchResults"),
+);
 
 const Encounter = lazy(() => import("./pages/Encounter/Encounter"));
+const Citation = lazy(() => import("./pages/Citation"));
 const PoliciesAndData = lazy(
   () => import("./pages/PoliciesAndData/PoliciesAndData"),
 );
@@ -80,7 +83,8 @@ export default function AuthenticatedSwitch({
       >
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
-            <Route path="/profile" element={<Profile />} />
+            <Route path="/match-results" element={<MatchResults />} />
+            <Route path="/citation" element={<Citation />} />
             <Route path="/policies-and-data" element={<PoliciesAndData />} />
             <Route
               path="/how-to-photograph"

frontend/src/FrontDesk.jsx

@@ -13,8 +13,8 @@ import {
   sessionWarningTime,
   sessionCountdownTime,
 } from "./constants/sessionWarning";
-import useGetSiteSettings from "./models/useGetSiteSettings";
 import useDocumentTitle from "./hooks/useDocumentTitle";
+import { useSiteSettings } from "./SiteSettingsContext";
 
 export default function FrontDesk() {
   useDocumentTitle();
@@ -24,7 +24,7 @@ export default function FrontDesk() {
   const [mergeData, setMergeData] = useState([]);
   const [count, setCount] = useState(0);
   const [loading, setLoading] = useState(true);
-  const { data, isLoading: siteSettingsLoading } = useGetSiteSettings();
+  const { data, isLoading: siteSettingsLoading } = useSiteSettings();
   const showclassicsubmit = data?.showClassicSubmit;
   const showClassicEncounterSearch = data?.showClassicEncounters;
   const showHowToPhotograph = data?.showHowToPhotograph;

frontend/src/SiteSettingsContext.jsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext } from "react";
+import useGetSiteSettings from "./models/useGetSiteSettings";
+
+const SiteSettingsContext = createContext(null);
+
+export const SiteSettingsProvider = ({ children }) => {
+  const { data, isLoading, error } = useGetSiteSettings();
+  return (
+    <SiteSettingsContext.Provider value={{ data, isLoading, error }}>
+      {children}
+    </SiteSettingsContext.Provider>
+  );
+};
+
+export const useSiteSettings = () => {
+  const context = useContext(SiteSettingsContext);
+  if (context === null) {
+    throw new Error("useSiteSettings must be used within SiteSettingsProvider");
+  }
+  return context;
+};

frontend/src/__tests__/FrontDesk.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import { render, screen, waitFor } from "@testing-library/react";
 import axios from "axios";
 import FrontDesk from "../FrontDesk";
-import useGetSiteSettings from "../models/useGetSiteSettings";
+import { useSiteSettings } from "../SiteSettingsContext";
 
 jest.mock("../AuthenticatedSwitch", () => {
   const MockComponent = () => <div>Authenticated</div>;
@@ -35,7 +35,7 @@ jest.mock("../components/SessionWarning", () => {
 });
 
 jest.mock("../hooks/useDocumentTitle", () => jest.fn());
-jest.mock("../models/useGetSiteSettings");
+jest.mock("../SiteSettingsContext", () => ({ useSiteSettings: jest.fn() }));
 jest.mock("../models/notifications/getMergeNotifications", () => jest.fn());
 jest.mock("../models/notifications/getCollaborationNotifications", () =>
   jest.fn(),
@@ -46,7 +46,11 @@ jest.mock("axios");
 describe("FrontDesk Component", () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    useGetSiteSettings.mockReturnValue({ data: { showClassicSubmit: false } });
+    useSiteSettings.mockReturnValue({
+      data: { showClassicSubmit: false },
+      isLoading: false,
+      error: null,
+    });
   });
 
   test("renders UnauthenticatedSwitch if user is not logged in (401)", async () => {
@@ -65,7 +69,11 @@ describe("FrontDesk Component", () => {
   test("keeps loading on non-401 login check failure (current behavior)", async () => {
     const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     axios.head.mockRejectedValueOnce(new Error("Network Error"));
-    useGetSiteSettings.mockReturnValue({ data: {} });
+    useSiteSettings.mockReturnValue({
+      data: {},
+      isLoading: false,
+      error: null,
+    });
 
     render(<FrontDesk />);
 

frontend/src/__tests__/components/AuthenticatedSwitch.test.js

@@ -80,12 +80,6 @@ describe("AuthenticatedSwitch", () => {
     expect(await screen.findByText("Home Page")).toBeInTheDocument();
   });
 
-  test("renders the profile page when navigating to /profile", async () => {
-    window.history.pushState({}, "", "/profile");
-    renderComponent({ showAlert: false, setShowAlert: jest.fn() });
-    expect(await screen.findByText("Profile Page")).toBeInTheDocument();
-  });
-
   test("renders the login page when navigating to /login", async () => {
     window.history.pushState({}, "", "/login");
     renderComponent({ showAlert: false, setShowAlert: jest.fn() });

frontend/src/__tests__/components/Map.test.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import MapComponent from "../../components/Map";
-import useGetSiteSettings from "../../models/useGetSiteSettings";
+import { useSiteSettings } from "../../SiteSettingsContext";
 
-jest.mock("../../models/useGetSiteSettings", () => jest.fn());
+jest.mock("../../SiteSettingsContext", () => ({ useSiteSettings: jest.fn() }));
 
 jest.mock("react-intl", () => {
   const OriginalModule = jest.requireActual("react-intl");
@@ -31,22 +31,34 @@ describe("MapComponent", () => {
   });
 
   test("renders loading state when no googleMapsKey is present", () => {
-    useGetSiteSettings.mockReturnValue({ data: {} });
+    useSiteSettings.mockReturnValue({
+      data: {},
+      isLoading: false,
+      error: null,
+    });
 
     render(<MapComponent setBounds={jest.fn()} />);
 
     expect(screen.getByText(/MAP_IS_LOADING/i)).toBeInTheDocument();
   });
 
   test("renders the Draw button", () => {
-    useGetSiteSettings.mockReturnValue({ data: {} });
+    useSiteSettings.mockReturnValue({
+      data: {},
+      isLoading: false,
+      error: null,
+    });
 
     render(<MapComponent setBounds={jest.fn()} />);
     expect(screen.getByRole("button")).toBeInTheDocument();
   });
 
   test("toggles button text between DRAW and CANCEL", () => {
-    useGetSiteSettings.mockReturnValue({ data: {} });
+    useSiteSettings.mockReturnValue({
+      data: {},
+      isLoading: false,
+      error: null,
+    });
 
     render(<MapComponent setBounds={jest.fn()} />);
     const button = screen.getByRole("button");
@@ -63,7 +75,11 @@ describe("MapComponent", () => {
   test("calls setBounds and setTempBounds when drawing is toggled", () => {
     const setBoundsMock = jest.fn();
     const setTempBoundsMock = jest.fn();
-    useGetSiteSettings.mockReturnValue({ data: {} });
+    useSiteSettings.mockReturnValue({
+      data: {},
+      isLoading: false,
+      error: null,
+    });
 
     render(
       <MapComponent

frontend/src/__tests__/pages/BulkImport/BulkImportEditableDataTable.test.js

@@ -2,6 +2,7 @@ import React from "react";
 import { screen, fireEvent } from "@testing-library/react";
 import { DataTable } from "../../../pages/BulkImport/EditableDataTable";
 import { renderWithProviders } from "../../../utils/utils";
+import { useSiteSettings } from "../../../SiteSettingsContext";
 
 const mockStore = {
   spreadsheetData: [
@@ -42,7 +43,11 @@ const mockStore = {
   ]),
 };
 
-jest.mock("../../../models/useGetSiteSettings", () => () => ({
+jest.mock("../../../SiteSettingsContext", () => ({
+  useSiteSettings: jest.fn(),
+}));
+
+useSiteSettings.mockReturnValue({
   data: {
     bulkImportMinimalFields: {},
     locationData: { locationID: ["loc1", "loc2"] },
@@ -57,7 +62,9 @@ jest.mock("../../../models/useGetSiteSettings", () => () => ({
       key1: ["val1", "val2"],
     },
   },
-}));
+  isLoading: false,
+  error: null,
+});
 
 describe("EditableDataTable", () => {
   test("renders the table with correct headers", () => {

frontend/src/__tests__/pages/BulkImport/BulkImportImageUpload.test.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { render, fireEvent, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
+import { useSiteSettings } from "../../../SiteSettingsContext";
 
-jest.mock("../../../models/useGetSiteSettings", () => ({
+jest.mock("../../../SiteSettingsContext", () => ({
   __esModule: true,
-  default: () => ({ data: { maximumMediaSizeMegabytes: 5 } }),
+  useSiteSettings: jest.fn(),
 }));
 jest.mock("../../../pages/BulkImport/BulkImportImageUploadInfo", () => ({
   __esModule: true,
@@ -52,6 +53,11 @@ describe("BulkImportImageUpload", () => {
   };
 
   beforeEach(() => {
+    useSiteSettings.mockReturnValue({
+      data: { maximumMediaSizeMegabytes: 5 },
+      isLoading: false,
+      error: null,
+    });
     store = {
       filesParsed: false,
       imagePreview: [],

frontend/src/__tests__/pages/BulkImport/BulkImportInstuctionsModal.test.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import BulkImportInstructionsModal from "../../../pages/BulkImport/BulkImportInstructionsModal";
+import { useSiteSettings } from "../../../SiteSettingsContext";
 
-jest.mock("../../../models/useGetSiteSettings", () => ({
+jest.mock("../../../SiteSettingsContext", () => ({
   __esModule: true,
-  default: () => ({ data: null }),
+  useSiteSettings: jest.fn(),
 }));
 
 jest.mock("react-intl", () => ({
@@ -22,6 +23,11 @@ describe("BulkImportInstructionsModal (without changing the component)", () => {
       showInstructions: true,
       setShowInstructions: jest.fn(),
     };
+    useSiteSettings.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: null,
+    });
   });
 
   it("renders the Wildbook docs link in the NEED_HELP_DOCS step", () => {