chore: enable additional eslint rules

containers/ecr-viewer/.eslintrc.json

@@ -1,17 +1,20 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint",
-    "unused-imports",
-    "jsdoc"
-  ],
+  "plugins": ["@typescript-eslint", "unused-imports", "jsdoc"],
   "extends": [
-    "plugin:@next/next/recommended",
+    // "eslint:recommended",
     "plugin:jsdoc/recommended-typescript-error",
+    "plugin:@next/next/recommended",
+    // "plugin:@typescript-eslint/strict-type-checked",
+    // "plugin:@typescript-eslint/stylistic-type-checked",
+    "next/core-web-vitals",
     "prettier"
   ],
   "env": {
-    "es6": true
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
   },
   "parserOptions": {
     "ecmaVersion": 12,
@@ -43,9 +46,12 @@
   },
   "overrides": [
     {
-      "files": [
-        "*.test*",
-        "**/tests/**/*"
+      "files": ["*.test*", "tests/**"],
+      // "plugins": ["jest"],
+      "extends": [
+        // "plugin:jest/recommended"
+        // "plugin:jest-dom/recommended",
+        // "plugin:testing-library/react"
       ],
       "rules": {
         "jsdoc/require-jsdoc": "off"

containers/ecr-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecr-viewer",
-  "packageManager": "^[email protected]",
+  "packageManager": "[email protected]",
   "description": "The DIBBs eCR Viewer app offers a REST API for processing FHIR messages into an HTML page with key insights.",
   "version": "1.0.1",
   "private": true,
@@ -11,6 +11,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "test": "TZ=America/New_York jest",
     "test:watch": "TZ=America/New_York jest --watch",
     "clear-local": "docker compose -f ./docker-compose.yml --profile \"*\" down -v",
@@ -66,7 +67,7 @@
   },
   "devDependencies": {
     "@dotenvx/dotenvx": "^1.22.0",
-    "@next/eslint-plugin-next": "^14.2.5",
+    "@next/eslint-plugin-next": "^14.2.14",
     "@smithy/util-stream": "^2.1.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^15.0.7",
@@ -85,7 +86,7 @@
     "concurrently": "^9.0.1",
     "cypress": "^13.6.6",
     "eslint": "^8.56.0",
-    "eslint-config-next": "14.0.3",
+    "eslint-config-next": "^14.2.14",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsdoc": "^48.2.3",
     "eslint-plugin-unused-imports": "^3.1.0",

containers/ecr-viewer/src/app/components/BaseFilter.tsx

@@ -101,7 +101,9 @@ export const Filter = ({
     <div>
       <div className="position-relative display-flex flex-column">
         <Button
-          className={`margin-right-0 ${isActive ? "filters-applied" : "filter-button"}`}
+          className={`margin-right-0 ${
+            isActive ? "filters-applied" : "filter-button"
+          }`}
           aria-label={`Filter by ${type}`}
           aria-haspopup="listbox"
           aria-expanded={isFilterBoxOpen}

containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx

@@ -54,7 +54,7 @@ const EcrPaginationWrapper = ({
     const search = current.toString();
     const query = search ? `?${search}` : "";
     router.push(`${pathname}${query}`);
-  }, [userPreferences]);
+  }, [pathname, router, searchParams, userPreferences]);
 
   const totalPages =
     totalCount > 0 ? Math.ceil(totalCount / userPreferences.itemsPerPage) : 1;

containers/ecr-viewer/src/app/components/EcrTableClient.tsx

@@ -112,7 +112,7 @@ export const EcrTableClient: React.FC<EcrTableClientProps> = ({
     const search = current.toString();
     const query = search ? `?${search}` : "";
     router.push(`${pathname}${query}`);
-  }, [sortPreferences]);
+  }, [pathname, router, searchParams, sortPreferences]);
 
   /**
    * Updates the sort config from the server.

containers/ecr-viewer/src/app/components/Filters.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Icon } from "@trussworks/react-uswds";
 import { useQueryParam, Filter } from "./BaseFilter";
 import {
@@ -39,6 +39,29 @@ const FilterReportableConditions = () => {
   const [filterConditions, setFilterConditions] = useState<{
     [key: string]: boolean;
   }>({});
+  const conditionParam = searchParams.get("condition");
+  const resetFilterConditions = useCallback(
+    (conditions: string[]) => {
+      const conditionsToTrue = new Set(conditionParam?.split("|") || []);
+
+      const conditionValue = (c: string) => {
+        if (conditionParam === null) {
+          return true;
+        } else {
+          return conditionsToTrue.has(c);
+        }
+      };
+      const prevFilterConditions = conditions.reduce(
+        (dict: { [key: string]: boolean }, condition: string) => {
+          dict[condition] = conditionValue(condition);
+          return dict;
+        },
+        {} as { [key: string]: boolean },
+      );
+      setFilterConditions(prevFilterConditions);
+    },
+    [conditionParam],
+  );
 
   useEffect(() => {
     const fetchConditions = async () => {
@@ -55,7 +78,7 @@ const FilterReportableConditions = () => {
     };
 
     fetchConditions();
-  }, []);
+  }, [resetFilterConditions]);
 
   // Build list of conditions to filter on
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -84,27 +107,6 @@ const FilterReportableConditions = () => {
     (val) => val === true,
   );
 
-  const resetFilterConditions = (conditions: string[]) => {
-    const conditionParam = searchParams.get("condition");
-    const conditionsToTrue = new Set(conditionParam?.split("|") || []);
-
-    const conditionValue = (c: string) => {
-      if (conditionParam === null) {
-        return true;
-      } else {
-        return conditionsToTrue.has(c);
-      }
-    };
-    const prevFilterConditions = conditions.reduce(
-      (dict: { [key: string]: boolean }, condition: string) => {
-        dict[condition] = conditionValue(condition);
-        return dict;
-      },
-      {} as { [key: string]: boolean },
-    );
-    setFilterConditions(prevFilterConditions);
-  };
-
   return (
     <Filter
       type="Reportable Condition"
@@ -178,20 +180,11 @@ const FilterReportableConditions = () => {
 const FilterByDate = () => {
   const { searchParams, updateQueryParam } = useQueryParam();
 
-  const [filterDateOption, setFilterDateOption] = useState("");
+  const [filterDateOption, setFilterDateOption] = useState(
+    searchParams.get("dateRange") || DEFAULT_DATE_RANGE,
+  );
   const isFilterDateDefault = filterDateOption === DEFAULT_DATE_RANGE;
-
-  useEffect(() => {
-    const fetchDateRange = async () => {
-      try {
-        resetFilterDate();
-      } catch (error) {
-        console.error("Error fetching date range:", error);
-      }
-    };
-
-    fetchDateRange();
-  }, []);
+  const queryDateRange = searchParams.get("dateRange");
 
   const handleDateOptionChange = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -201,8 +194,13 @@ const FilterByDate = () => {
     setFilterDateOption(value);
   };
 
+  useEffect(() => {
+    if (!queryDateRange) {
+      setFilterDateOption(DEFAULT_DATE_RANGE);
+    }
+  }, [queryDateRange]);
+
   const resetFilterDate = () => {
-    const queryDateRange = searchParams.get("dateRange");
     if (!queryDateRange) {
       setFilterDateOption(DEFAULT_DATE_RANGE);
     } else if (queryDateRange !== filterDateOption) {

containers/ecr-viewer/src/app/components/Pagination.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 import { Button, Icon } from "@trussworks/react-uswds";
-import { useSearchParams } from "next/navigation";
+import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation";
 import Link from "next/link";
 
 type PaginationProps = {
@@ -22,6 +22,7 @@ const PaginationPage = ({
   isCurrent,
   pathname,
   onClickPageNumber,
+  searchParams,
 }: {
   pathname: string;
   page: number;
@@ -30,6 +31,7 @@ const PaginationPage = ({
     event: React.MouseEvent<HTMLButtonElement>,
     page: number,
   ) => void;
+  searchParams: ReadonlyURLSearchParams;
 }) => {
   const linkClasses = classnames("usa-pagination__button text-bold", {
     "usa-current": isCurrent,
@@ -56,7 +58,7 @@ const PaginationPage = ({
         </Button>
       ) : (
         <Link
-          href={createPageURL(pathname, page)}
+          href={createPageURL(searchParams, pathname, page)}
           className={linkClasses}
           aria-label={`Page ${page}`}
           aria-current={isCurrent ? "page" : undefined}
@@ -102,6 +104,7 @@ export const Pagination = ({
   ...props
 }: PaginationProps &
   React.JSX.IntrinsicElements["nav"]): React.ReactElement => {
+  const searchParams = useSearchParams();
   const navClasses = classnames("usa-pagination", className);
 
   const isOnFirstPage = currentPage === 1;
@@ -203,7 +206,7 @@ export const Pagination = ({
             </Button>
           ) : (
             <Link
-              href={createPageURL(pathname, prevPage || 0)}
+              href={createPageURL(searchParams, pathname, prevPage || 0)}
               className={classnames(
                 "usa-pagination__link usa-pagination__previous-page text-bold",
                 { "visibility-hidden": !prevPage },
@@ -227,6 +230,7 @@ export const Pagination = ({
               pathname={pathname}
               isCurrent={pageNum === currentPage}
               onClickPageNumber={onClickPageNumber}
+              searchParams={searchParams}
             />
           ),
         )}
@@ -251,7 +255,7 @@ export const Pagination = ({
             </Button>
           ) : (
             <Link
-              href={createPageURL(pathname, nextPage || 0)}
+              href={createPageURL(searchParams, pathname, nextPage || 0)}
               className={classnames(
                 "usa-pagination__link usa-pagination__next-page text-bold",
                 { "visibility-hidden": !nextPage },
@@ -271,12 +275,16 @@ export const Pagination = ({
 
 /**
  * Custom function used to create a new path with existing search parameters
+ * @param searchParams - URL search params
  * @param pathname - pathname of the string
  * @param pageNumber - number to append to url params
  * @returns - string of path and search params
  */
-const createPageURL = (pathname: string, pageNumber: number | string) => {
-  const searchParams = useSearchParams();
+const createPageURL = (
+  searchParams: ReadonlyURLSearchParams,
+  pathname: string,
+  pageNumber: number | string,
+) => {
   const params = new URLSearchParams(searchParams);
   params.set("page", pageNumber.toString());
   return `${pathname}?${params.toString()}`;

containers/ecr-viewer/src/app/components/SortButton.tsx

@@ -85,7 +85,9 @@ export const SortButton: React.FC<SortButtonProps> = ({
         resetHeaderMarker();
         changeHeaderMarker();
       }}
-      children={""}
+      // TODO: refactor in the future to set image inside button
+      // eslint-disable-next-line react/no-children-prop
+      children={undefined}
     ></Button>
   );
 };

containers/ecr-viewer/src/app/tests/components/Clinical.test.tsx

@@ -179,7 +179,7 @@ describe("Snapshot test for Clinical Notes", () => {
             </thead>
             <tbody>
               <tr>
-                <td>Parkinson's syndrome</td>
+                <td>Parkinson&apos;s syndrome</td>
                 <td>7/25/22</td>
               </tr>
               <tr>

containers/ecr-viewer/src/app/tests/services/labsService.test.tsx

@@ -495,7 +495,7 @@ describe("Evaluate Organization with ID", () => {
   });
   it("should combine the data into new format", () => {
     const testResultObject: ResultObject = {
-      "Organization/22c6cdd0-bde1-e220-9ba4-2c2802f795ad": [<div></div>],
+      "Organization/22c6cdd0-bde1-e220-9ba4-2c2802f795ad": [],
     };
     const result = combineOrgAndReportData(
       testResultObject,