Update to react 19 (placemark#233)

Author: tmcw

app/components/converter.tsx

@@ -1,4 +1,3 @@
-import { getFilesFromDataTransferItems } from "@placemarkio/flat-drop-files";
 import {
   DownloadIcon,
   FileTextIcon,
@@ -18,6 +17,7 @@ import {
   stringToGeoJSON,
 } from "app/lib/convert";
 import type { ConvertResult } from "app/lib/convert/utils";
+import { getFilesFromDataTransferItems } from "app/lib/flatDropFiles";
 import { newFeatureId } from "app/lib/id";
 import { lib } from "app/lib/worker";
 import { fileOpen, fileSave } from "browser-fs-access";

app/components/csv_options_form.tsx

@@ -1,4 +1,5 @@
 import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { SelectHeader } from "app/components/csv_options_form/select_header";
 import { MAX_GEOCODER_ROWS } from "app/lib/constants";
 import type { ImportOptions } from "app/lib/convert";
@@ -10,7 +11,6 @@ import { Field, type FormikContextType, useFormikContext } from "formik";
 import { captureException } from "integrations/errors";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
-import { useQuery } from "react-query";
 import { dataAtom } from "state/jotai";
 import type { JsonObject } from "type-fest";
 import type { WorkBook } from "xlsx";
@@ -425,8 +425,9 @@ interface XlsOptionsFormProps {
 }
 
 export function XlsOptionsForm(props: XlsOptionsFormProps) {
-  const { data: xlsx } = useQuery("xlsx", async () => import("xlsx"), {
-    suspense: true,
+  const { data: xlsx } = useSuspenseQuery({
+    queryKey: ["xlsx"],
+    queryFn: async () => import("xlsx"),
   });
 
   return <XlsOptionsFormInner {...props} xlsx={xlsx!} />;

app/components/dialogs/import_example.tsx

@@ -1,10 +1,10 @@
 import { ClipboardIcon, DownloadIcon } from "@radix-ui/react-icons";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { DialogHeader } from "app/components/dialog";
 import { styledInlineA, TextWell } from "app/components/elements";
 import { useImportString } from "app/hooks/use_import";
 import { DEFAULT_IMPORT_OPTIONS } from "app/lib/convert";
 import toast from "react-hot-toast";
-import { useQuery as useReactQuery } from "react-query";
 import { z } from "zod";
 
 const ExampleList = z.array(z.string());
@@ -22,18 +22,15 @@ function friendlyName(filename: string): string {
 
 export function ImportExampleDialog({ onClose }: { onClose: () => void }) {
   const doImport = useImportString();
-  const { data: exampleList } = useReactQuery(
-    "import-examples",
-    () =>
+  const { data: exampleList } = useSuspenseQuery({
+    queryKey: ["import-examples"],
+    queryFn: () =>
       fetch("https://data-library.placemark.io/")
         .then((r) => r.json())
         .then((json) => {
           return ExampleList.parse(json);
         }),
-    {
-      suspense: true,
-    },
-  );
+  });
 
   return (
     <>

app/components/dialogs/quickswitcher.tsx

@@ -1,5 +1,6 @@
 import { Combobox } from "@headlessui/react";
 import { ArrowDownIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
 import { useActions } from "app/components/context_actions/geometry_actions";
 import { useMultiActions } from "app/components/context_actions/multi_actions";
 import {
@@ -21,7 +22,6 @@ import Fuse from "fuse.js";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { LngLatBounds, type LngLatLike } from "mapbox-gl";
 import { useContext, useMemo, useState } from "react";
-import { useQuery } from "react-query";
 import { USelection } from "state";
 import {
   dataAtom,
@@ -81,9 +81,9 @@ export function QuickswitcherDialog({ onClose }: { onClose: () => void }) {
     data: list,
     isLoading,
     isError,
-  } = useQuery(
-    ["geocoder", query],
-    async ({ signal }) => {
+  } = useQuery({
+    queryKey: ["geocoder", query],
+    queryFn: async ({ signal }) => {
       return geocodeEarth({
         query: query || "",
         center: map?.map.getCenter(),
@@ -93,11 +93,9 @@ export function QuickswitcherDialog({ onClose }: { onClose: () => void }) {
         actions: actions.concat(multiActions).concat(singleActions),
       });
     },
-    {
-      enabled: query.length > 2,
-      keepPreviousData: true,
-    },
-  );
+    enabled: query.length > 2,
+    placeholderData: (previousData, _previousQuery) => previousData,
+  });
 
   function goToFeature(item: QItem) {
     if (!item || !map) return;

app/components/drop.tsx

@@ -1,4 +1,4 @@
-import { getFilesFromDataTransferItems } from "@placemarkio/flat-drop-files";
+import { getFilesFromDataTransferItems } from "app/lib/flatDropFiles";
 import { groupFiles } from "app/lib/group_files";
 import type { FileWithHandle } from "browser-fs-access";
 import { captureException } from "integrations/errors";

app/components/last_search_result.tsx

@@ -90,7 +90,9 @@ export function LastSearchResult() {
                 <Button
                   type="button"
                   variant="primary"
-                  onClick={(e) => {
+                  // TODO: this should have a correct type, but classed-components
+                  // is not updated for React 19
+                  onClick={(e: React.MouseEvent) => {
                     onAddPolygon(asPolygon);
                     e.stopPropagation();
                   }}
@@ -119,7 +121,7 @@ export function LastSearchResult() {
                     <Button
                       type="button"
                       variant="primary"
-                      onClick={(e) => {
+                      onClick={(e: React.MouseEvent) => {
                         e.stopPropagation();
                         onAddPolygon(asPolygon);
                       }}

app/components/layers/popover.tsx

@@ -29,6 +29,7 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
 import * as E from "app/components/elements";
 import { TextWell } from "app/components/elements";
 import { FORM_ERROR, Form } from "app/core/components/Form";
@@ -48,7 +49,6 @@ import { Maybe } from "purify-ts/Maybe";
 import { Popover as P, Tooltip as T } from "radix-ui";
 import { Suspense, useState } from "react";
 import toast from "react-hot-toast";
-import { useQuery as reactUseQuery } from "react-query";
 import { layerConfigAtom } from "state/jotai";
 import { match } from "ts-pattern";
 import { type ILayerConfig, zLayerConfig } from "types";
@@ -590,11 +590,12 @@ function SortableLayerConfig({ layerConfig }: { layerConfig: ILayerConfig }) {
   const transact = rep.useTransact();
   const [editing, setEditing] = useState<boolean>(false);
 
-  const { data: tilejson, isError } = reactUseQuery(
-    layerConfig.url,
-    async () => layerConfig.type === "TILEJSON" && getTileJSON(layerConfig.url),
-    { suspense: false, retry: false },
-  );
+  const { data: tilejson, isError } = useQuery({
+    queryKey: [layerConfig.url],
+    queryFn: async () =>
+      layerConfig.type === "TILEJSON" && getTileJSON(layerConfig.url),
+    retry: false,
+  });
 
   const style = {
     transform: CSS.Transform.toString(transform),

app/components/map_component.tsx

@@ -101,7 +101,7 @@ export const MapComponent = memo(function MapComponent({
 
   const dragTargetRef: React.MutableRefObject<DragTarget | null> =
     useRef<DragTarget>(null);
-  const mapHandlers = useRef<PMapHandlers>();
+  const mapHandlers = useRef<PMapHandlers>(null);
 
   // Context
   const map = useContext(MapContext);

app/components/panels/feature_editor/feature_editor_folder.tsx

@@ -15,6 +15,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { LEFT_PANEL_ROW_HEIGHT } from "app/lib/constants";
 import { usePersistence } from "app/lib/persistence/context";
 import { generateKeyBetween, generateNKeysBetween } from "fractional-indexing";
@@ -23,7 +24,6 @@ import { useAtomValue } from "jotai";
 import isEqual from "lodash/isEqual";
 import { Portal } from "radix-ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useVirtual } from "react-virtual";
 import { USelection } from "state";
 import { dataAtom, type Sel, splitsAtom } from "state/jotai";
 import type { FolderMap } from "types";
@@ -255,9 +255,9 @@ export function FeatureEditorFolderInner() {
     return tree.findIndex(({ id }) => id === activeId);
   }, [tree, activeId]);
 
-  const rowVirtualizer = useVirtual({
-    size: tree.length,
-    parentRef,
+  const rowVirtualizer = useVirtualizer({
+    count: tree.length,
+    getScrollElement: () => parentRef.current,
     estimateSize: useCallback(
       (index: number) => {
         return index === activeItemIndex ? 0 : LEFT_PANEL_ROW_HEIGHT;
@@ -479,10 +479,10 @@ export function FeatureEditorFolderInner() {
             className="relative w-full"
             style={{
               willChange: "transform",
-              height: `${rowVirtualizer.totalSize}px`,
+              height: `${rowVirtualizer.getTotalSize()}px`,
             }}
           >
-            {rowVirtualizer.virtualItems.map((row) => {
+            {rowVirtualizer.getVirtualItems().map((row) => {
               const item = tree[row.index];
               const isDragging = activeId === item.id;
               if (isDragging && dropIntoFolder) {

app/components/panels/feature_editor/feature_editor_folder/utils.ts

@@ -1,4 +1,4 @@
-import type { VirtualItem } from "react-virtual";
+import type { VirtualItem } from "@tanstack/react-virtual";
 
 /**
  * Helper to create style for a virtual element.