Upgrade to React 18 (#286)

* Start upgrade to React 18 * update package lock * Resolve new react warnings
seasketch · May 16, 2024 · 95c661d · 95c661d
1 parent 59dfe66
commit 95c661d
Show file tree

Hide file tree

Showing 14 changed files with 1,797 additions and 1,385 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,16 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/react": "^16.14.0",
+    "@types/react": "^18.3.2",
     "@types/request": "^2.48.12",
     "babel-plugin-i18next-extract": "0.10.0",
     "@babel/plugin-syntax-import-attributes": "^7.24.1",
     "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "lerna": "^8.1.3",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "request": "^2.88.2",
     "start-server-and-test": "^2.0.3",
     "styled-components": "^6.1.11",

diff --git a/packages/geoprocessing/package.json b/packages/geoprocessing/package.json
@@ -88,8 +88,7 @@
     "@storybook/test": "^8.1.1",
     "@storybook/theming": "^8.1.1",
     "@styled-icons/bootstrap": "^10.47.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.2",
+    "@testing-library/react": "^15.0.7",
     "@turf/area": "7.0.0-alpha.113",
     "@turf/bbox": "7.0.0-alpha.113",
     "@turf/bbox-clip": "7.0.0-alpha.113",
@@ -130,13 +129,13 @@
     "@types/node": "^20.12.12",
     "@types/pbf": "^3.0.5",
     "@types/rbush": "^3.0.3",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@types/react-table": "^7.7.20",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react": "^4.2.1",
     "abortcontroller-polyfill": "^1.7.5",
-    "aws-cdk-lib": "2.141.0",
+    "aws-cdk-lib": "2.142.0",
     "aws-regions": "2.3.1",
     "aws-sdk": "2.1621.0",
     "babel-loader": "^8.2.2",
@@ -153,7 +152,7 @@
     "copy-node-modules": "^1.1.1",
     "default-import": "^1.1.5",
     "encoding": "^0.1.13",
-    "esbuild": "0.20.2",
+    "esbuild": "0.21.3",
     "esbuild-plugin-inline-image": "^0.0.9",
     "esbuild-plugins-node-modules-polyfill": "^1.6.4",
     "fast-deep-equal": "^3.1.3",
@@ -189,13 +188,13 @@
     "proj4": "^2.11.0",
     "promptly": "^3.2.0",
     "rbush": "^3.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.3",
     "react-i18next": "^12.2.0",
     "react-popper": "^2.3.0",
     "react-table": "^7.8.0",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.3.1",
     "read-pkg-up": "^7.0.1",
     "reproject-geojson": "^0.5.0",
     "request": "^2.88.2",

diff --git a/packages/geoprocessing/src/components/DataDownload.tsx b/packages/geoprocessing/src/components/DataDownload.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 
 // Strictly limit format and data types accepted
 const SUPPORTED_FORMATS = ["json", "csv"] as const;
-export type SUPPORTED_FORMAT = typeof SUPPORTED_FORMATS[number];
+export type SUPPORTED_FORMAT = (typeof SUPPORTED_FORMATS)[number];
 export type StringOrNumber = string | number;
 
 export interface DataFormatters {
@@ -87,9 +87,6 @@ export const DataDownload = ({
       const [{ name }] = useSketchProperties();
       return name;
     } catch (error) {
-      console.info(
-        `ReportContext is not available. sketchName not added for "${filename}"`
-      );
       return "";
     }
   })();
@@ -129,7 +126,7 @@ export const DataDownload = ({
     <a
       key={index}
       download={`${fullFilename}.${dOption.extension}`}
-      href={data && data.length > 0 ? dOption.url : "javascript:;"}
+      href={data && data.length > 0 ? dOption.url : "#"}
       aria-disabled={!data || data.length === 0}
     >
       <DownloadButtonStyled>

diff --git a/packages/geoprocessing/src/components/ReportError.tsx b/packages/geoprocessing/src/components/ReportError.tsx
@@ -44,7 +44,25 @@ const ErrorCard = () => {
   );
 };
 
-export class ReportError extends React.Component {
+interface ReportErrorProps {
+  children: React.ReactNode;
+}
+
+interface ReportErrorState {
+  hasError: boolean;
+  error: {
+    message: string;
+    stack: string;
+  };
+  info: {
+    componentStack: string;
+  };
+}
+
+export class ReportError extends React.Component<
+  ReportErrorProps,
+  ReportErrorState
+> {
   state = {
     hasError: false,
     error: { message: "", stack: "" },

diff --git a/packages/geoprocessing/src/components/ResultsCard.tsx b/packages/geoprocessing/src/components/ResultsCard.tsx
@@ -8,12 +8,13 @@ import { ProgressBar, ProgressBarWrapper } from "./ProgressBar.js";
 import { ReportError } from "./ReportError.js";
 import { GeoprocessingRequestParams } from "../types/service.js";
 
-export interface ResultsCardProps<T> extends CardProps {
+export interface ResultsCardProps<T> {
   functionName: string;
   children: (results: T) => ReactNode;
   skeleton?: ReactNode;
   title?: string | ReactNode;
   titleStyle?: React.CSSProperties;
+  style?: object;
   /** Assumes caller will provide card in children to use results (e.g. ToolbarCard with DataDownload). Shows a simple card until loading complete */
   useChildCard?: boolean;
   /** Additional runtime parameters from report client for geoprocessing function. */

diff --git a/packages/geoprocessing/src/components/table/Table.tsx b/packages/geoprocessing/src/components/table/Table.tsx
@@ -26,9 +26,8 @@ declare module "react-table" {
    * Unused plugings are commented out
    */
 
-  export interface TableOptions<
-    D extends object = {}
-  > extends UseExpandedOptions<D>,
+  export interface TableOptions<D extends object = {}>
+    extends UseExpandedOptions<D>,
       // UseFiltersOptions<D>,
       UseGlobalFiltersOptions<D>,
       // UseGroupByOptions<D>,
@@ -292,64 +291,79 @@ export function Table<D extends object>(props: TableOptions<D>): ReactElement {
       )}
       <table className={props.className} {...getTableProps()}>
         <thead>
-          {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <th
-                  // Return an array of prop objects and react-table will merge them appropriately
-                  {...column.getHeaderProps([
-                    {
-                      className: column.className,
-                      style: column.style,
-                    },
-                    columnProps(column), // user passed
-                    headerProps(column), // user passed
-                  ])}
-                >
-                  <div>
-                    {column.canGroupBy ? (
-                      <span {...column.getGroupByToggleProps()}>
-                        {column.isGrouped ? "🛑 " : "👊 "}
-                      </span>
-                    ) : null}
-                    <span {...column.getSortByToggleProps()}>
-                      {column.render("Header")}
-                      {column.isSorted ? (
-                        column.isSortedDesc ? (
-                          <span className="up-arrow" />
-                        ) : (
-                          <span className="down-arrow" />
-                        )
-                      ) : (
-                        ""
-                      )}
-                    </span>
-                  </div>
-                  {/* Render the columns filter UI */}
-                  {/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
-                </th>
-              ))}
-            </tr>
-          ))}
+          {headerGroups.map((headerGroup) => {
+            const { key: headerGroupPropKey, ...otherHeaderGroupProps } =
+              headerGroup.getHeaderGroupProps();
+            return (
+              <tr key={headerGroupPropKey} {...otherHeaderGroupProps}>
+                {headerGroup.headers.map((column) => {
+                  const { key: headerPropKey, ...otherHeaderProps } =
+                    column.getHeaderProps([
+                      {
+                        className: column.className,
+                        style: column.style,
+                      },
+                      columnProps(column), // user passed
+                      headerProps(column), // user passed
+                    ]);
+                  return (
+                    <th
+                      // Return an array of prop objects and react-table will merge them appropriately
+                      {...otherHeaderProps}
+                      key={headerPropKey}
+                    >
+                      <div>
+                        {column.canGroupBy ? (
+                          <span {...column.getGroupByToggleProps()}>
+                            {column.isGrouped ? "🛑 " : "👊 "}
+                          </span>
+                        ) : null}
+                        <span {...column.getSortByToggleProps()}>
+                          {column.render("Header")}
+                          {column.isSorted ? (
+                            column.isSortedDesc ? (
+                              <span className="up-arrow" />
+                            ) : (
+                              <span className="down-arrow" />
+                            )
+                          ) : (
+                            ""
+                          )}
+                        </span>
+                      </div>
+                      {/* Render the columns filter UI */}
+                      {/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
+                    </th>
+                  );
+                })}
+              </tr>
+            );
+          })}
         </thead>
         <tbody {...getTableBodyProps()}>
           {page.map((row) => {
             prepareRow(row);
+            const { key: otherRowPropKey, ...otherRowProps } = row.getRowProps(
+              rowProps(row) || {}
+            );
             return (
-              <tr {...row.getRowProps(rowProps(row) || {})}>
+              <tr key={otherRowPropKey} {...otherRowProps}>
                 {row.cells.map((cell) => {
                   let cellVal = cell.value;
+                  const { key: otherCellPropKey, ...otherCellProps } =
+                    cell.getCellProps([
+                      {
+                        className: cell.column.className,
+                        style: cell.column.style,
+                      },
+                      columnProps(cell.column),
+                      cellProps(cell),
+                    ]);
                   return (
                     <td
+                      key={otherCellPropKey}
                       // Return an array of prop objects and react-table will merge them appropriately
-                      {...cell.getCellProps([
-                        {
-                          className: cell.column.className,
-                          style: cell.column.style,
-                        },
-                        columnProps(cell.column),
-                        cellProps(cell),
-                      ])}
+                      {...otherCellProps}
                     >
                       {cell.isGrouped ? (
                         // If it's a grouped cell, add an expander and row count

diff --git a/packages/geoprocessing/src/hooks/useFunction.test.tsx b/packages/geoprocessing/src/hooks/useFunction.test.tsx
@@ -7,7 +7,7 @@ import { ReportContext, ReportContextValue } from "../context/index.js";
 import { v4 as uuid } from "uuid";
 import { SketchProperties } from "../types/index.js";
 import { GeoprocessingTaskStatus, GeoprocessingTask } from "../aws/tasks.js";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 
 // @ts-ignore
 // switch to manual fetch mocking or vitest-fetch-mock
@@ -156,9 +156,9 @@ test.skip("useFunction handles errors thrown within geoprocessing function", asy
 
 test.skip("throws error if ReportContext is not set", async () => {
   const { result } = renderHook(() => useFunction("calcFoo"));
-  expect(result && result.error).toBeTruthy();
-  if (!result || !result.error) return;
-  expect(result.error.message).toContain("ReportContext");
+  expect(result && result.current.error).toBeTruthy();
+  if (!result || !result.current.error) return;
+  expect(result.current.error).toContain("ReportContext");
 });
 
 const TestReport = () => {
@@ -180,7 +180,11 @@ const TestReport = () => {
   );
 };
 
-const TestContainer: React.FunctionComponent = (props) => {
+interface TestContainerProps {
+  children: React.ReactNode;
+}
+
+const TestContainer: React.FC<TestContainerProps> = (props) => {
   const [sketchId, setSketchId] = useState(1);
   return (
     <ReportContext.Provider

diff --git a/packages/geoprocessing/src/hooks/useFunction.ts b/packages/geoprocessing/src/hooks/useFunction.ts
@@ -295,9 +295,10 @@ export const useFunction = <ResultType>(
         (output) => output.functionName === functionTitle
       );
       if (!data && !context.simulateLoading && !context.simulateError) {
-        throw new Error(
-          `Could not find example data for sketch "${context.sketchProperties.name}" and function "${functionTitle}". Run \`npm test\` to generate example outputs`
-        );
+        setState({
+          loading: false,
+          error: `Could not find example data for sketch "${context.sketchProperties.name}" and function "${functionTitle}". Run \`npm test\` to generate example outputs`,
+        });
       }
       // create a fake GeoprocessingTask record and set state, returning value
       setState({

diff --git a/packages/geoprocessing/src/hooks/useSketchProperties.test.tsx b/packages/geoprocessing/src/hooks/useSketchProperties.test.tsx
@@ -2,7 +2,7 @@ import { describe, test, expect, vi } from "vitest";
 import React from "react";
 import "@testing-library/jest-dom/vitest";
 import { ReportContext } from "../context/index.js";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import useSketchProperties from "./useSketchProperties.js";
 
 const ContextWrapper: React.FunctionComponent<{