fix: tanstack and more

Author: craigyu

frontend/src/__test__/screens/CreateOpening.test.tsx

@@ -43,7 +43,7 @@ describe('CreateOpening screen', () => {
   });
 
   it('shows insufficient privileges notification when user lacks privilege', () => {
-    vi.mocked(famUtils.hasCreateOpeningPriviledge).mockReturnValue(false);
+    vi.mocked(famUtils.hasCreateOpeningPrivilege).mockReturnValue(false);
     mockUseAuth.mockReturnValue({ user: { privileges: {}, associatedClients: [] } });
     mockUseSearchParams.mockReturnValue([new URLSearchParams([['type', TENURED_OPENING]]), vi.fn()]);
 
@@ -55,7 +55,7 @@ describe('CreateOpening screen', () => {
   });
 
   it('shows feature unavailable for government funded opening type', () => {
-    vi.mocked(famUtils.hasCreateOpeningPriviledge).mockReturnValue(true);
+    vi.mocked(famUtils.hasCreateOpeningPrivilege).mockReturnValue(true);
     mockUseAuth.mockReturnValue({ user: { privileges: {}, associatedClients: [] } });
     mockUseSearchParams.mockReturnValue([new URLSearchParams([['type', GOV_FUNDED_OPENING]]), vi.fn()]);
 
@@ -66,7 +66,7 @@ describe('CreateOpening screen', () => {
   });
 
   it('navigates to / when type is invalid', () => {
-    vi.mocked(famUtils.hasCreateOpeningPriviledge).mockReturnValue(true);
+    vi.mocked(famUtils.hasCreateOpeningPrivilege).mockReturnValue(true);
     mockUseAuth.mockReturnValue({ user: { privileges: {}, associatedClients: [] } });
     mockUseSearchParams.mockReturnValue([new URLSearchParams([['type', 'invalid']]), vi.fn()]);
 
@@ -76,7 +76,7 @@ describe('CreateOpening screen', () => {
   });
 
   it('renders CreateOpeningForm when guards pass (tenured opening with privilege)', () => {
-    vi.mocked(famUtils.hasCreateOpeningPriviledge).mockReturnValue(true);
+    vi.mocked(famUtils.hasCreateOpeningPrivilege).mockReturnValue(true);
     mockUseAuth.mockReturnValue({ user: { privileges: { canCreateOpening: true }, associatedClients: [] } });
     mockUseSearchParams.mockReturnValue([new URLSearchParams([['type', TENURED_OPENING]]), vi.fn()]);
 

frontend/src/components/MapPreview/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-import { MapContainer, TileLayer, GeoJSON as RLGeoJSON, useMap } from "react-leaflet";
+import { MapContainer, TileLayer, GeoJSON as RLGeoJSON, useMap, ZoomControl } from "react-leaflet";
 import { geoJSON } from "leaflet";
 
 type MapPreviewProps = {
@@ -37,9 +37,10 @@ const MapPreview = ({ geojson }: MapPreviewProps) => {
         style={{ height: "100%", width: "100%" }}
         center={[49.25, -123.1]}
         zoom={6}
-        zoomControl
+        zoomControl={false}
         scrollWheelZoom={false}
       >
+        <ZoomControl position="bottomright" />
         <TileLayer
           url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}"
           attribution="Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community"

frontend/src/constants/tanstackConfig.ts

@@ -102,15 +102,13 @@ function errorHandler(
     // Prevent the query from remaining in errored state while we attempt token refresh.
     try {
       if (query) {
-        // clear query error and mark as loading/fetching so UI shows a retry in-progress
-        // 'pending' + 'fetching' = isLoading===true in TanStack Query v5
+        // clear query error and mark as retry in-progress without forcing internal fetchStatus
+        // Partial state updates are supported in TanStack Query v5.
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (query as any).setState?.((oldState: any) => ({
-          ...oldState,
+        (query as any).setState?.({
           error: null,
-          status: 'pending',
-          fetchStatus: 'fetching'
-        }));
+          status: 'pending'
+        });
       }
     } catch (e) {
       // ignore if we can't touch internal state

frontend/src/screens/CreateOpening/CreateOpeningForm.tsx

@@ -1,6 +1,6 @@
 import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { Button, Column, Form, Grid, InlineNotification, Loading, Modal, Stack } from '@carbon/react';
+import { Button, Column, Form, Grid, InlineNotification, Loading, Stack } from '@carbon/react';
 import { useBlocker, useNavigate } from 'react-router-dom';
 import { ArrowRight, TrashCan } from '@carbon/icons-react';
 import { scrollToSection } from '@/utils/InputUtils';
@@ -28,7 +28,7 @@ interface CreateOpeningFormProps {
 
 export const CreateOpeningForm = ({ type, currentStep, setCurrentStep }: CreateOpeningFormProps) => {
   // All hooks called unconditionally at component top
-  const [isCancelModalOpen, setIsCancelModalOpen] = useState<boolean>(false);
+  const [isLeavePageModalOpen, setIsLeavePageModalOpen] = useState<boolean>(false);
   const navigate = useNavigate();
   const [form, setForm] = useState<CreateOpeningFormType>(() => {
     return structuredClone(DefaultOpeningForm);
@@ -215,16 +215,30 @@ export const CreateOpeningForm = ({ type, currentStep, setCurrentStep }: CreateO
   }
 
   const handleCancel = () => {
-    setIsCancelModalOpen(true);
+    if (!isNavigationBlocked) {
+      bypassBlockerRef.current = true;
+      navigate(OpeningsRoute.path!);
+      return;
+    }
+
+    setIsLeavePageModalOpen(true);
   };
 
   const handleLeaveConfirm = () => {
     bypassBlockerRef.current = true;
-    blocker.proceed();
+    setIsLeavePageModalOpen(false);
+
+    if (blocker.state === 'blocked') {
+      blocker?.proceed?.();
+      return;
+    }
+
+    navigate(OpeningsRoute.path!);
   };
 
   const handleStay = () => {
-    blocker.reset();
+    setIsLeavePageModalOpen(false);
+    blocker?.reset?.();
   };
 
   const handleCreate = () => {
@@ -325,38 +339,8 @@ export const CreateOpeningForm = ({ type, currentStep, setCurrentStep }: CreateO
         </Grid>
       </Column>
 
-      <Modal
-        passiveModal
-        danger
-        open={isCancelModalOpen}
-        modalHeading={<ModalHead title="Are you sure you want to cancel?" helperTop="Create new opening" />}
-        onRequestClose={() => setIsCancelModalOpen(false)}
-        className="default-modal"
-        preventCloseOnClickOutside
-        size="sm"
-      >
-        <Grid>
-          <Column sm={4} md={8} lg={16}>
-            <p className='cancel-content'>
-              If you leave this page, all the information you've entered will be lost.
-            </p>
-          </Column>
-          <Column sm={4} md={8} lg={16}>
-            <Stack orientation="horizontal" gap={2} className="default-equal-split-stack">
-              <Button className="modal-button" kind="secondary" onClick={() => setIsCancelModalOpen(false)}>
-                Continue reviewing
-              </Button>
-
-              <Button className="modal-button" kind="danger" renderIcon={TrashCan} onClick={() => { bypassBlockerRef.current = true; navigate(OpeningsRoute.path!); }}>
-                Leave without saving
-              </Button>
-            </Stack>
-          </Column>
-        </Grid>
-      </Modal>
-
       <LeavePageModal
-        open={blocker.state === 'blocked'}
+        open={isLeavePageModalOpen || blocker.state === 'blocked'}
         onRequestClose={handleStay}
         onLeave={handleLeaveConfirm}
         onStay={handleStay}