Merge pull request #1287 from WildMeOrg/1197_new_encounter_page_react_api

1197 new encounter page react api

Author: naknomum

frontend/package-lock.json

@@ -4,12 +4,12 @@
   "private": true,
   "dependencies": {
     "@flowjs/flow.js": "^2.14.1",
-    "@testing-library/user-event": "^13.5.0",
     "antd": "^5.21.5",
     "autoprefixer": "^10.4.18",
     "axios": "^1.7.4",
     "bootstrap": "^5.3.2",
     "copy-webpack-plugin": "^12.0.2",
+    "dompurify": "^3.2.7",
     "exif-js": "^2.3.0",
     "flow.js": "^0.2.6",
     "google-map-react": "^2.2.1",
@@ -35,10 +35,12 @@
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
-    "react-select": "^5.8.0",
+    "react-select": "^5.10.2",
+    "react-toastify": "^11.0.5",
     "react-window": "^1.8.11",
     "recharts": "^3.1.0",
     "sass": "^1.71.1",
+    "swiper": "^12.0.1",
     "web-vitals": "^2.1.4",
     "webpack-merge": "^5.10.0",
     "webpack-version-file": "^0.1.7",
@@ -88,6 +90,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "bootstrap-icons": "^1.11.3",
     "css-loader": "^6.10.0",
     "date-fns": "^4.1.0",

frontend/package.json

@@ -14,6 +14,7 @@ import LocaleContext from "./IntlProvider";
 import FooterVisibilityContext from "./FooterVisibilityContext";
 import Cookies from "js-cookie";
 import FilterContext from "./FilterContextProvider";
+import { ToastContainer } from "react-toastify";
 
 function App() {
   const messageMap = {
@@ -51,9 +52,11 @@ function App() {
     setFilters({});
   };
 
-  const publicUrl = process.env.PUBLIC_URL 
-  ? (process.env.PUBLIC_URL.startsWith('http') ? new URL(process.env.PUBLIC_URL).pathname : process.env.PUBLIC_URL)
-  : "/";
+  const publicUrl = process.env.PUBLIC_URL
+    ? process.env.PUBLIC_URL.startsWith("http")
+      ? new URL(process.env.PUBLIC_URL).pathname
+      : process.env.PUBLIC_URL
+    : "/";
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -78,6 +81,17 @@ function App() {
                     adminUserInitialized={true}
                     setLocale={setLocale}
                   />
+                  <ToastContainer
+                    position="top-right"
+                    autoClose={3000}
+                    hideProgressBar={false}
+                    newestOnTop={false}
+                    closeOnClick
+                    rtl={false}
+                    pauseOnFocusLoss
+                    draggable
+                    pauseOnHover
+                  />
                 </FilterContext.Provider>
               </FooterVisibilityContext.Provider>
             </IntlProvider>

frontend/src/App.jsx

@@ -23,10 +23,13 @@ const ReportConfirm = lazy(
 );
 const ProjectList = lazy(() => import("./pages/ProjectList"));
 const ManualAnnotation = lazy(() => import("./pages/ManualAnnotation"));
+const EditAnnotation = lazy(() => import("./pages/EditAnnotation"));
 
 const BulkImport = lazy(() => import("./pages/BulkImport/BulkImport"));
 const BulkImportTask = lazy(() => import("./pages/BulkImport/BulkImportTask"));
 
+const Encounter = lazy(() => import("./pages/Encounter/Encounter"));
+
 export default function AuthenticatedSwitch({
   showclassicsubmit,
   showClassicEncounterSearch,
@@ -75,9 +78,12 @@ export default function AuthenticatedSwitch({
             <Route path="/home" element={<Home />} />
             <Route path="/report" element={<ReportEncounter />} />
             <Route path="/reportConfirm" element={<ReportConfirm />} />
+            <Route path="/encounter" element={<Encounter />} />
+
             <Route path="/encounter-search" element={<EncounterSearch />} />
             <Route path="/admin/logs" element={<AdminLogs />} />
             <Route path="/manual-annotation" element={<ManualAnnotation />} />
+            <Route path="/edit-annotation" element={<EditAnnotation />} />
             <Route path="/bulk-import" element={<BulkImport />} />
             <Route path="/bulk-import-task" element={<BulkImportTask />} />
             <Route path="/login" element={<Login />} />

frontend/src/AuthenticatedSwitch.jsx

@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from "react";
 import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 import Footer from "./components/Footer";
 import UnAuthenticatedAppHeader from "./components/UnAuthenticatedAppHeader";
+import EncounterPageViewOnly from "./pages/Encounter/EncounterPageViewOnly";
 
 // Lazy load pages
 const Login = lazy(() => import("./pages/Login"));
@@ -53,6 +54,7 @@ export default function UnAuthenticatedSwitch({ showclassicsubmit }) {
               path="/home"
               element={<Unauthorized setHeader={setHeader} />}
             />
+            <Route path="/encounter" element={<EncounterPageViewOnly />} />
             <Route path="/citation" element={<Citation />} />
             <Route path="/report" element={<ReportEncounter />} />
             <Route path="/reportConfirm" element={<ReportConfirm />} />

frontend/src/UnAuthenticatedSwitch.jsx

@@ -0,0 +1,196 @@
+/* eslint-disable react/display-name */
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+jest.mock("react-konva", () => {
+  const React = require("react");
+
+  const FakeStage = ({ children, width, height }) => (
+    <div data-testid="konva-stage" data-width={width} data-height={height}>
+      {children}
+    </div>
+  );
+
+  const FakeRect = React.forwardRef(({ onClick, onDragEnd, ...rest }, ref) => {
+    const fakeNode = {
+      x: jest.fn(() => 30),
+      y: jest.fn(() => 40),
+      width: jest.fn(() => 100),
+      height: jest.fn(() => 50),
+      scaleX: jest.fn(() => 1),
+      scaleY: jest.fn(() => 1),
+      rotation: jest.fn(() => 15),
+    };
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(fakeNode);
+      } else {
+        ref.current = fakeNode;
+      }
+    }
+    return (
+      <div
+        data-testid="konva-rect"
+        onClick={onClick}
+        onDragEnd={onDragEnd}
+        {...rest}
+      >
+        rect
+      </div>
+    );
+  });
+
+  const FakeTransformer = React.forwardRef((props, ref) => {
+    const fakeTransformer = {
+      nodes: jest.fn(),
+      getLayer: () => ({
+        batchDraw: jest.fn(),
+      }),
+    };
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(fakeTransformer);
+      } else {
+        ref.current = fakeTransformer;
+      }
+    }
+    return <div data-testid="konva-transformer">transformer</div>;
+  });
+
+  const FakeLayer = ({ children }) => (
+    <div data-testid="konva-layer">{children}</div>
+  );
+
+  return {
+    Stage: FakeStage,
+    Layer: FakeLayer,
+    Rect: FakeRect,
+    Transformer: FakeTransformer,
+  };
+});
+
+import ResizableRotatableRect from "../../../src/components/ResizableRotatableRect";
+
+describe("ResizableRotatableRect", () => {
+  const baseRect = {
+    x: 10,
+    y: 20,
+    width: 120,
+    height: 80,
+    rotation: 0,
+  };
+
+  test("renders Stage and Rect with given size", () => {
+    const setRect = jest.fn();
+    const setValue = jest.fn();
+
+    render(
+      <ResizableRotatableRect
+        rect={baseRect}
+        imgHeight={400}
+        imgWidth={600}
+        setRect={setRect}
+        setValue={setValue}
+        drawStatus="DRAW"
+      />,
+    );
+
+    expect(screen.getByTestId("konva-stage")).toHaveAttribute(
+      "data-width",
+      "600",
+    );
+    expect(screen.getByTestId("konva-stage")).toHaveAttribute(
+      "data-height",
+      "400",
+    );
+    expect(screen.getByTestId("konva-rect")).toBeInTheDocument();
+    expect(screen.getByTestId("konva-transformer")).toBeInTheDocument();
+  });
+
+  test("clicking rect selects it (transformer.nodes called)", () => {
+    const setRect = jest.fn();
+    const setValue = jest.fn();
+
+    render(
+      <ResizableRotatableRect
+        rect={baseRect}
+        imgHeight={400}
+        imgWidth={600}
+        setRect={setRect}
+        setValue={setValue}
+        drawStatus="DRAW"
+      />,
+    );
+
+    const rect = screen.getByTestId("konva-rect");
+    fireEvent.click(rect);
+    fireEvent.dragEnd(rect);
+  });
+
+  test("drag end updates rect via setRect", () => {
+    const setRect = jest.fn();
+    const setValue = jest.fn();
+
+    render(
+      <ResizableRotatableRect
+        rect={baseRect}
+        imgHeight={400}
+        imgWidth={600}
+        setRect={setRect}
+        setValue={setValue}
+        drawStatus="DRAW"
+      />,
+    );
+
+    const rect = screen.getByTestId("konva-rect");
+
+    fireEvent.dragEnd(rect);
+
+    expect(setRect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        x: 30,
+        y: 40,
+      }),
+    );
+  });
+
+  test("transform end updates rect and calls setValue(rotation)", () => {
+    const setRect = jest.fn();
+    const setValue = jest.fn();
+
+    render(
+      <ResizableRotatableRect
+        rect={baseRect}
+        imgHeight={400}
+        imgWidth={600}
+        setRect={setRect}
+        setValue={setValue}
+        drawStatus="DRAW"
+      />,
+    );
+
+    const rect = screen.getByTestId("konva-rect");
+
+    fireEvent(rect, new MouseEvent("transformend", { bubbles: true }));
+    fireEvent.click(rect);
+  });
+
+  test("when drawStatus is DELETE, component still renders Stage but rectProps won't be rebuilt", () => {
+    const setRect = jest.fn();
+    const setValue = jest.fn();
+
+    render(
+      <ResizableRotatableRect
+        rect={baseRect}
+        imgHeight={300}
+        imgWidth={300}
+        setRect={setRect}
+        setValue={setValue}
+        drawStatus="DELETE"
+      />,
+    );
+
+    expect(screen.getByTestId("konva-stage")).toBeInTheDocument();
+    expect(screen.getByTestId("konva-rect")).toBeInTheDocument();
+  });
+});