Staging (#29)

* test: improve alert handling in FindHelpEntry tests and add global alert mock

* Fix: Temporary linting suppressions in FindHelpResults; update README with linting strategy note

* chore: update package-lock.json to sync with package.json dependencies

Author: james-cross

README.md

@@ -71,4 +71,12 @@ See the project instructions for the full GitHub workflow. In short:
 
 ---
 
+## ⚠️ TypeScript & Linting Workaround
+
+Some temporary TypeScript and ESLint suppressions are in place—particularly in `FindHelpResults.tsx`—to avoid breaking builds while types are refined. This includes type assertions (`as any`, `!`) and relaxed location typing.
+
+These will be addressed post-MVP once shared types (e.g. for services and location context) are finalised. All suppressions are tracked in Trello under `Linting Suppression and Deferred Resolution Strategy` - https://trello.com/c/bISJ2l1L.
+
+---
+
 For full developer instructions and context, see the `rebuild-docs.docx` or ask for clarification before making assumptions.

__tests__/components/FindHelpEntry.test.tsx

@@ -49,7 +49,7 @@ describe('FindHelpEntry', () => {
   });
 
   it('shows alert on invalid postcode response', async () => {
-    jest.spyOn(window, 'alert').mockImplementation(() => {});
+    const alertSpy = jest.spyOn(window, 'alert');
     global.fetch = jest.fn(() =>
       Promise.resolve({
         json: () => Promise.resolve({ error: 'Invalid postcode' }),
@@ -61,7 +61,7 @@ describe('FindHelpEntry', () => {
     fireEvent.click(screen.getByRole('button', { name: /continue/i }));
 
     await waitFor(() => {
-      expect(window.alert).toHaveBeenCalledWith(expect.stringMatching(/something went wrong/i));
+      expect(alertSpy).toHaveBeenCalledWith(expect.stringMatching(/something went wrong/i));
     });
   });
-});
+});

jest.setup.ts

@@ -1,7 +1,6 @@
-// jest.setup.ts
 import '@testing-library/jest-dom';
 
-// Mock global fetch
+// Provide a global fetch mock for components using fetch
 global.fetch = jest.fn(() =>
   Promise.resolve({
     json: () => Promise.resolve([
@@ -25,13 +24,17 @@ global.fetch = jest.fn(() =>
   })
 ) as jest.Mock;
 
-// Suppress React act(...) warnings globally
+// Capture original console.error before overriding it
 const originalError = console.error;
 
+// Suppress only specific React test warnings
 beforeAll(() => {
-  jest.spyOn(console, 'error').mockImplementation((...args) => {
-    const [msg] = args;
-    if (typeof msg === 'string' && msg.includes('not wrapped in act')) return;
-    originalError(...args);
+  jest.spyOn(console, 'error').mockImplementation((msg) => {
+    const [text] = Array.isArray(msg) ? msg : [msg];
+    if (typeof text === 'string' && text.includes('not wrapped in act')) return;
+    originalError(...(Array.isArray(msg) ? msg : [msg]));
   });
 });
+
+// ✅ Define global alert as jest mock to avoid jsdom crash
+global.alert = jest.fn();

next.config.ts

@@ -1,8 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
   reactStrictMode: true,
+  env: {
+    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -5,8 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "next dev",
-    "prebuild": "jest",
-    "build": "next build",
+    "build": "cross-env NEXT_DISABLE_ESLINT=true jest && next build",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
@@ -46,6 +45,7 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^30.0.0-beta.3",
     "babel-plugin-module-resolver": "^5.0.2",
+    "cross-env": "^7.0.3",
     "dotenv": "^16.5.0",
     "eslint": "^9.28.0",
     "eslint-config-next": "^15.3.3",

package.json

@@ -11,7 +11,6 @@ export function GET() {
       postcode: provider.postcode,
       latitude: provider.latitude,
       longitude: provider.longitude,
-      locationId: provider.locationId,
       verified: provider.verified
     }));
   });

src/app/api/get-service-providers/route.ts

@@ -4,9 +4,10 @@ import { LocationProvider } from '@/contexts/LocationContext';
 import FindHelpEntry from '@/components/FindHelp/FindHelpEntry';
 import FindHelpResults from '@/components/FindHelp/FindHelpResults';
 import rawProviders from '@/data/service-providers.json';
+import type { ServiceProvider } from '@/types';
 
 export default function FindHelpPage() {
-  const providers = rawProviders as any[];
+  const providers = rawProviders as ServiceProvider[];
 
   return (
     <LocationProvider>

src/app/find-help/page.tsx

@@ -1,7 +1,7 @@
 // FindHelpResults.tsx
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import { useLocation } from '@/contexts/LocationContext';
 import ServiceCard from './ServiceCard';
 import FilterPanel from './FilterPanel';
@@ -12,6 +12,26 @@ interface Props {
   providers: ServiceProvider[];
 }
 
+interface FlattenedServiceWithExtras extends FlattenedService {
+  organisation: string;
+  organisationSlug: string;
+  lat: number;
+  lng: number;
+  distance?: number;
+}
+
+interface MapMarker {
+  id: string;
+  lat: number;
+  lng: number;
+  title: string;
+  organisation?: string;
+  link?: string;
+  serviceName?: string;
+  distanceKm?: number;
+  icon?: string;
+}
+
 export default function FindHelpResults({ providers }: Props) {
   const { location } = useLocation();
   const [showMap, setShowMap] = useState(false);
@@ -20,46 +40,70 @@ export default function FindHelpResults({ providers }: Props) {
   const [selectedCategory, setSelectedCategory] = useState('');
   const [selectedSubCategory, setSelectedSubCategory] = useState('');
 
-  const flattenedServices: FlattenedService[] = useMemo(() => {
+  const getDistanceFromLatLonInKm = useCallback((lat1: number, lon1: number, lat2: number, lon2: number) => {
+    const R = 6371;
+    const dLat = deg2rad(lat2 - lat1);
+    const dLon = deg2rad(lon2 - lon1);
+    const a =
+      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
+      Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return R * c;
+  }, []);
+
+  function deg2rad(deg: number) {
+    return deg * (Math.PI / 180);
+  }
+
+  const flattenedServices: FlattenedServiceWithExtras[] = useMemo(() => {
     if (!providers || providers.length === 0) return [];
 
     return providers.flatMap((org) => {
       if (!org.services || !Array.isArray(org.services)) return [];
 
-      return org.services.map((service) => {
-        if (!service.latitude || !service.longitude) return null;
-        return {
+      return org.services.flatMap((service) => {
+        if (
+          typeof service.latitude !== 'number' ||
+          typeof service.longitude !== 'number'
+        ) {
+          return [];
+        }
+
+        return [{
           id: service.id,
           name: service.name,
           description: service.description,
           category: service.category,
           subCategory: service.subCategory,
-          organisation: org.name,
-          organisationSlug: org.slug,
           lat: service.latitude,
           lng: service.longitude,
+          latitude: service.latitude,
+          longitude: service.longitude,
+          organisation: org.name,
+          organisationSlug: org.slug,
           clientGroups: service.clientGroups || [],
           openTimes: service.openTimes || [],
-        };
-      }).filter(Boolean) as FlattenedService[];
+        }];
+      });
     });
   }, [providers]);
 
   const filteredServicesWithDistance = useMemo(() => {
-    if (!location) return [];
+    if (!location || location.lat == null || location.lng == null) return [];
 
     return flattenedServices
-      .map((service) => {
-        const distance = getDistanceFromLatLonInKm(location.lat, location.lng, service.lat, service.lng);
-        return { ...service, distance };
-      })
+      .map((service) => ({
+        ...service,
+        distance: getDistanceFromLatLonInKm(location.lat!, location.lng!, service.lat, service.lng),
+      }))
       .filter((service) => {
-        const distanceMatch = service.distance <= radius;
+        const distanceMatch = service.distance! <= radius;
         const categoryMatch = selectedCategory ? service.category === selectedCategory : true;
         const subCategoryMatch = selectedSubCategory ? service.subCategory === selectedSubCategory : true;
         return distanceMatch && categoryMatch && subCategoryMatch;
       });
-  }, [flattenedServices, location, radius, selectedCategory, selectedSubCategory]);
+  }, [flattenedServices, location, radius, selectedCategory, selectedSubCategory, getDistanceFromLatLonInKm]);
 
   const sortedServices = useMemo(() => {
     if (sortOrder === 'alpha') {
@@ -68,24 +112,8 @@ export default function FindHelpResults({ providers }: Props) {
     return [...filteredServicesWithDistance].sort((a, b) => (a.distance ?? 0) - (b.distance ?? 0));
   }, [filteredServicesWithDistance, sortOrder]);
 
-  function getDistanceFromLatLonInKm(lat1: number, lon1: number, lat2: number, lon2: number) {
-    const R = 6371;
-    const dLat = deg2rad(lat2 - lat1);
-    const dLon = deg2rad(lon2 - lon1);
-    const a =
-      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
-      Math.sin(dLon / 2) * Math.sin(dLon / 2);
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    return R * c;
-  }
-
-  function deg2rad(deg: number) {
-    return deg * (Math.PI / 180);
-  }
-
-  const combinedMarkers = useMemo(() => {
-    const markers = filteredServicesWithDistance.map((s) => ({
+  const combinedMarkers: MapMarker[] = useMemo(() => {
+    const markers: MapMarker[] = filteredServicesWithDistance.map((s) => ({
       id: s.id,
       lat: s.lat,
       lng: s.lng,
@@ -95,7 +123,8 @@ export default function FindHelpResults({ providers }: Props) {
       serviceName: s.name,
       distanceKm: s.distance,
     }));
-    if (location) {
+
+    if (location && location.lat != null && location.lng != null) {
       markers.unshift({
         id: 'user-location',
         lat: location.lat,
@@ -104,6 +133,7 @@ export default function FindHelpResults({ providers }: Props) {
         icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
       });
     }
+
     return markers;
   }, [filteredServicesWithDistance, location]);
 
@@ -155,17 +185,15 @@ export default function FindHelpResults({ providers }: Props) {
 
         {showMap && (
           <div className="block lg:hidden w-full mb-4" data-testid="map-container">
-            <GoogleMap center={location} markers={combinedMarkers} />
+            <GoogleMap center={(location && location.lat != null && location.lng != null) ? { lat: location.lat, lng: location.lng } : null} markers={combinedMarkers} />
           </div>
         )}
 
         <div className="flex-1 overflow-y-visible lg:overflow-y-auto pr-2">
           {sortedServices.length === 0 ? (
             <p>No services found within {radius} km of your location.</p>
           ) : (
-            <div
-              className={`gap-4 ${showMap ? 'flex flex-col' : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'}`}
-            >
+            <div className={`gap-4 ${showMap ? 'flex flex-col' : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'}`}>
               {sortedServices.map((service) => (
                 <div
                   key={service.id}
@@ -186,7 +214,14 @@ export default function FindHelpResults({ providers }: Props) {
 
       {showMap && (
         <div className="hidden lg:block w-full lg:w-1/2 mt-8 lg:mt-0 lg:sticky lg:top-[6.5rem] min-h-[400px]" data-testid="map-container">
-          <GoogleMap center={location} markers={combinedMarkers} />
+          <GoogleMap
+            center={
+              location && location.lat != null && location.lng != null
+                ? { lat: location.lat, lng: location.lng }
+                : null
+            }
+            markers={combinedMarkers}
+          />
         </div>
       )}
     </section>

src/components/FindHelp/FindHelpResults.tsx

@@ -49,7 +49,7 @@ export function LocationProvider({ children }: { children: ReactNode }) {
             POSITION_UNAVAILABLE: err?.code === 2,
             TIMEOUT: err?.code === 3,
           });
-        } catch (e) {
+        } catch {
           console.error('⛔ Geolocation error: Could not serialize error:', err);
         }
       },
@@ -76,4 +76,4 @@ export function useLocation() {
   return context;
 }
 
-export { LocationContext };
+export { LocationContext };