@treely/strapi-slices 7.13.0 → 7.13.1

package/dist/utils/mergeProjectData.d.ts

@@ -0,0 +1,4 @@
+import { FeatureCollection } from 'geojson';
+import { IStrapiData, StrapiProject } from '..';
+declare const mergeProjectData: (featureCollection: FeatureCollection, strapiProjects: Map<string, IStrapiData<StrapiProject>>) => FeatureCollection;
+export default mergeProjectData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.13.0",
+  "version": "7.13.1",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/integrations/strapi/getFpmProjectsByBbox.test.ts

@@ -0,0 +1,115 @@
+import MockAxios from 'jest-mock-axios';
+import { FeatureCollection } from 'geojson';
+import getFpmProjectsByBbox from './getFpmProjectsByBbox';
+
+describe('The getFpmProjectsByBbox function', () => {
+  afterEach(() => {
+    MockAxios.reset();
+  });
+
+  const mockFeatureCollection: FeatureCollection = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [10.0, 20.0],
+        },
+        properties: {
+          id: 'test-project-1',
+          name: 'Test Project 1',
+        },
+      },
+      {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [15.0, 25.0],
+        },
+        properties: {
+          id: 'test-project-2',
+          name: 'Test Project 2',
+        },
+      },
+    ],
+  };
+
+  it('fetches FPM projects by bounding box successfully', async () => {
+    const bbox = '5,15,20,30';
+    const projectsPromise = getFpmProjectsByBbox(bbox);
+
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: mockFeatureCollection }
+    );
+
+    const result = await projectsPromise;
+
+    expect(result).toEqual(mockFeatureCollection);
+    expect(MockAxios.get).toHaveBeenCalledWith('/public/projects', {
+      params: {
+        bbox: '5,15,20,30',
+      },
+      cache: undefined,
+    });
+  });
+
+  it('handles preview mode correctly', async () => {
+    const bbox = '0,0,10,10';
+    const projectsPromise = getFpmProjectsByBbox(bbox, true);
+
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: mockFeatureCollection }
+    );
+
+    await projectsPromise;
+
+    expect(MockAxios.get).toHaveBeenCalledWith('/public/projects', {
+      params: {
+        bbox: '0,0,10,10',
+      },
+      cache: false,
+    });
+  });
+
+  it('handles non-preview mode with cache undefined', async () => {
+    const bbox = '0,0,10,10';
+    const projectsPromise = getFpmProjectsByBbox(bbox, false);
+
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: mockFeatureCollection }
+    );
+
+    await projectsPromise;
+
+    expect(MockAxios.get).toHaveBeenCalledWith('/public/projects', {
+      params: {
+        bbox: '0,0,10,10',
+      },
+      cache: undefined,
+    });
+  });
+
+  it('returns empty feature collection when no projects found', async () => {
+    const bbox = '0,0,10,10';
+    const emptyFeatureCollection: FeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    const projectsPromise = getFpmProjectsByBbox(bbox);
+
+    MockAxios.mockResponseFor(
+      { url: '/public/projects' },
+      { data: emptyFeatureCollection }
+    );
+
+    const result = await projectsPromise;
+
+    expect(result).toEqual(emptyFeatureCollection);
+    expect(result.features).toHaveLength(0);
+  });
+});

package/src/integrations/strapi/getFpmProjectsByBbox.ts

@@ -0,0 +1,24 @@
+import { FeatureCollection } from 'geojson';
+import fpmClient from '../fpmClient';
+
+const getFpmProjectsByBbox = async (
+  bbox: string,
+  preview: boolean = false
+): Promise<FeatureCollection> => {
+  const [west, south, east, north] = bbox.split(',').map(Number);
+  const cache = preview ? false : undefined;
+
+  const fpmResponse = await fpmClient.get<FeatureCollection>(
+    '/public/projects',
+    {
+      params: {
+        bbox: `${west},${south},${east},${north}`,
+      },
+      cache,
+    }
+  );
+
+  return fpmResponse.data;
+};
+
+export default getFpmProjectsByBbox;

package/src/integrations/strapi/getPortfolioProjects.ts

@@ -1,61 +1,20 @@
-import {
-  IStrapiData,
-  IStrapiResponse,
-  PortfolioProject,
-  StrapiProject,
-} from '../..';
-import {
-  STRAPI_DEFAULT_PAGE_SIZE,
-  STRAPI_DEFAULT_POPULATE_DEPTH,
-} from '../../constants/strapi';
+import { PortfolioProject } from '../..';
+import { STRAPI_DEFAULT_POPULATE_DEPTH } from '../../constants/strapi';
 import FPMProject from '../../models/fpm/FPMProject';
 import fpmClient from '../fpmClient';
-import strapiClient from './strapiClient';
-
-const FALLBACK_LOCALE = 'en';
+import getStrapiProjects from './getStrapiProjects';
 
 const getPortfolioProjects = async (
   locale: string = 'en',
   preview: boolean = false
 ): Promise<PortfolioProject[]> => {
   const cache = preview ? false : undefined;
-  const params: Record<string, any> = {
-    pLevel: STRAPI_DEFAULT_POPULATE_DEPTH,
-    locale,
-    'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
-    status: preview ? 'draft' : 'published',
-  };
 
-  const [
-    { data: fpmProjects },
-    { data: strapiProjectsLocalized },
-    { data: strapiProjectsEnglish },
-  ] = await Promise.all([
+  const [{ data: fpmProjects }, strapiProjects] = await Promise.all([
     fpmClient.get<FPMProject[]>('/public/projects', { cache }),
-    strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
-      '/projects',
-      { params, cache }
-    ),
-    strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
-      '/projects',
-      {
-        params: { ...params, locale: FALLBACK_LOCALE },
-        cache,
-      }
-    ),
+    getStrapiProjects(locale, STRAPI_DEFAULT_POPULATE_DEPTH, preview),
   ]);
 
-  const strapiProjects = new Map<string, IStrapiData<StrapiProject>>();
-
-  for (const project of [
-    ...strapiProjectsEnglish.data,
-    ...strapiProjectsLocalized.data,
-  ]) {
-    if (project.attributes.fpmProjectId) {
-      strapiProjects.set(project.attributes.fpmProjectId, project);
-    }
-  }
-
   return fpmProjects.map((fpmProject: FPMProject) => {
     const strapiProject = strapiProjects.get(fpmProject.id);
 

package/src/integrations/strapi/getStrapiProjects.test.ts

@@ -0,0 +1,167 @@
+import MockAxios from 'jest-mock-axios';
+import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
+import getStrapiProjects from './getStrapiProjects';
+
+describe('The getStrapiProjects function', () => {
+  afterEach(() => {
+    MockAxios.reset();
+  });
+
+  const mockStrapiResponse = {
+    data: {
+      data: [strapiProjectMock],
+    },
+  };
+
+  const mockEmptyResponse = {
+    data: {
+      data: [],
+    },
+  };
+
+  it('fetches Strapi projects successfully with default parameters', async () => {
+    const projectsPromise = getStrapiProjects();
+
+    MockAxios.mockResponseFor({ url: '/projects' }, mockStrapiResponse);
+    MockAxios.mockResponseFor({ url: '/projects' }, mockStrapiResponse);
+
+    const result = await projectsPromise;
+
+    expect(result).toBeInstanceOf(Map);
+    expect(result.size).toBe(1);
+    expect(result.get(strapiProjectMock.attributes.fpmProjectId!)).toEqual(
+      strapiProjectMock
+    );
+  });
+
+  it('fetches projects in specified locale and English fallback', async () => {
+    const locale = 'de';
+    const pLevel = '2';
+    const projectsPromise = getStrapiProjects(locale, pLevel);
+
+    MockAxios.mockResponseFor({ url: '/projects' }, mockStrapiResponse);
+    MockAxios.mockResponseFor({ url: '/projects' }, mockStrapiResponse);
+
+    await projectsPromise;
+
+    expect(MockAxios.get).toHaveBeenCalledWith('/projects', {
+      params: {
+        pLevel: '2',
+        locale: 'de',
+        'pagination[pageSize]': '100',
+        status: 'published',
+      },
+      cache: undefined,
+    });
+
+    expect(MockAxios.get).toHaveBeenCalledWith('/projects', {
+      params: {
+        pLevel: '2',
+        locale: 'en',
+        'pagination[pageSize]': '100',
+        status: 'published',
+      },
+      cache: undefined,
+    });
+  });
+
+  it('handles preview mode correctly', async () => {
+    const projectsPromise = getStrapiProjects('en', '1', true);
+
+    MockAxios.mockResponseFor({ url: '/projects' }, mockStrapiResponse);
+    MockAxios.mockResponseFor({ url: '/projects' }, mockStrapiResponse);
+
+    await projectsPromise;
+
+    expect(MockAxios.get).toHaveBeenCalledWith('/projects', {
+      params: {
+        pLevel: '1',
+        locale: 'en',
+        'pagination[pageSize]': '100',
+        status: 'draft',
+      },
+      cache: false,
+    });
+
+    expect(MockAxios.get).toHaveBeenCalledWith('/projects', {
+      params: {
+        pLevel: '1',
+        locale: 'en',
+        'pagination[pageSize]': '100',
+        status: 'draft',
+      },
+      cache: false,
+    });
+  });
+
+  it('combines projects from both locale and English requests', async () => {
+    const germanProject = {
+      ...strapiProjectMock,
+      id: 2,
+      attributes: {
+        ...strapiProjectMock.attributes,
+        fpmProjectId: 'german-project-id',
+      },
+    };
+
+    const englishProject = {
+      ...strapiProjectMock,
+      id: 3,
+      attributes: {
+        ...strapiProjectMock.attributes,
+        fpmProjectId: 'english-project-id',
+      },
+    };
+
+    const projectsPromise = getStrapiProjects('de');
+
+    MockAxios.mockResponseFor(
+      { url: '/projects' },
+      { data: { data: [germanProject] } }
+    );
+    MockAxios.mockResponseFor(
+      { url: '/projects' },
+      { data: { data: [englishProject] } }
+    );
+
+    const result = await projectsPromise;
+
+    expect(result.size).toBe(2);
+    expect(result.get('german-project-id')).toEqual(germanProject);
+    expect(result.get('english-project-id')).toEqual(englishProject);
+  });
+
+  it('filters out projects without fpmProjectId', async () => {
+    const projectWithoutFpmId = {
+      ...strapiProjectMock,
+      attributes: {
+        ...strapiProjectMock.attributes,
+        fpmProjectId: null,
+      },
+    };
+
+    const projectsPromise = getStrapiProjects();
+
+    MockAxios.mockResponseFor(
+      { url: '/projects' },
+      { data: { data: [projectWithoutFpmId] } }
+    );
+    MockAxios.mockResponseFor({ url: '/projects' }, mockEmptyResponse);
+
+    const result = await projectsPromise;
+
+    expect(result.size).toBe(0);
+  });
+
+  it('returns empty map when no projects are found', async () => {
+    const projectsPromise = getStrapiProjects();
+
+    MockAxios.mockResponseFor({ url: '/projects' }, mockEmptyResponse);
+    MockAxios.mockResponseFor({ url: '/projects' }, mockEmptyResponse);
+
+    const result = await projectsPromise;
+
+    expect(result).toBeInstanceOf(Map);
+    expect(result.size).toBe(0);
+  });
+});

package/src/integrations/strapi/getStrapiProjects.ts

@@ -0,0 +1,57 @@
+import { IStrapiData, IStrapiResponse, StrapiProject } from '../..';
+import {
+  STRAPI_DEFAULT_PAGE_SIZE,
+  STRAPI_DEFAULT_POPULATE_DEPTH,
+} from '../../constants/strapi';
+import strapiClient from './strapiClient';
+
+const FALLBACK_LOCALE = 'en';
+
+const getStrapiProjects = async (
+  locale: string = 'en',
+  pLevel: string = STRAPI_DEFAULT_POPULATE_DEPTH,
+  preview: boolean = false
+): Promise<Map<string, IStrapiData<StrapiProject>>> => {
+  const cache = preview ? false : undefined;
+  const strapiParams: Record<string, any> = {
+    pLevel,
+    locale,
+    'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
+    status: preview ? 'draft' : 'published',
+  };
+
+  const strapiProjects = new Map<string, IStrapiData<StrapiProject>>();
+
+  try {
+    const [strapiProjectsLocalized, strapiProjectsEnglish] = await Promise.all([
+      strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
+        '/projects',
+        { params: strapiParams, cache }
+      ),
+      strapiClient.get<IStrapiResponse<IStrapiData<StrapiProject>[]>>(
+        '/projects',
+        {
+          params: { ...strapiParams, locale: FALLBACK_LOCALE },
+          cache,
+        }
+      ),
+    ]);
+
+    // Process Strapi data if we got it
+    for (const project of [
+      ...strapiProjectsEnglish.data.data,
+      ...strapiProjectsLocalized.data.data,
+    ]) {
+      if (project.attributes.fpmProjectId) {
+        strapiProjects.set(project.attributes.fpmProjectId, project);
+      }
+    }
+  } catch (error) {
+    console.warn('Failed to fetch Strapi data:', error);
+    // Return empty map on failure
+  }
+
+  return strapiProjects;
+};
+
+export default getStrapiProjects;

package/src/slices/ProjectsMap/ProjectsMap.test.tsx

@@ -11,10 +11,10 @@ import {
   mapGetSourceSpy,
   mapQuerySourceFeaturesSpy,
 } from '../../../__mocks__/mapbox-gl';
-import getPortfolioProjectsByBbox from '../../integrations/strapi/getPortfolioProjectsByBbox';
+import getFpmProjectsByBbox from '../../integrations/strapi/getFpmProjectsByBbox';
 
-// Mock getPortfolioProjectsByBbox
-jest.mock('../../integrations/strapi/getPortfolioProjectsByBbox', () => ({
+// Mock getFpmProjectsByBbox
+jest.mock('../../integrations/strapi/getFpmProjectsByBbox', () => ({
   __esModule: true,
   default: jest.fn().mockResolvedValue({
     type: 'FeatureCollection',
@@ -93,7 +93,7 @@ describe('The ProjectsMap component', () => {
 
     // Verify the API was called with the correct bbox
     await waitFor(() => {
-      expect(getPortfolioProjectsByBbox).toHaveBeenCalledWith(
+      expect(getFpmProjectsByBbox).toHaveBeenCalledWith(
         '-1.9950830850086163,44.4464186384987,21.995083085002875,54.12644342419196'
       );
     });
@@ -124,7 +124,7 @@ describe('The ProjectsMap component', () => {
       ],
     };
 
-    (getPortfolioProjectsByBbox as jest.Mock).mockResolvedValueOnce(
+    (getFpmProjectsByBbox as jest.Mock).mockResolvedValueOnce(
       mockFeatureCollection
     );
     mapGetSourceSpy.mockReturnValue(null);

package/src/slices/ProjectsMap/ProjectsMap.tsx

@@ -17,8 +17,11 @@ import { IntlContext } from '../../components/ContextProvider';
 import mapboxStyle from './mapboxStyle';
 import { FeatureCollection } from 'geojson';
 import debounce from 'lodash/debounce';
-import getPortfolioProjectsByBbox from '../../integrations/strapi/getPortfolioProjectsByBbox';
+import getFpmProjectsByBbox from '../../integrations/strapi/getFpmProjectsByBbox';
+import getStrapiProjects from '../../integrations/strapi/getStrapiProjects';
+import mergeProjectData from '../../utils/mergeProjectData';
 import { CreditAvailability } from '../../models/fpm/FPMProject';
+import { IStrapiData, StrapiProject } from '../..';
 
 const projectPinImage =
   'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.0.2/assets/fill/map-pin-fill.svg';
@@ -50,10 +53,10 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
   const [isLoading, setIsLoading] = useState(false);
   const initialBboxRef = useRef<string | null>(null);
   const [isMapReady, setIsMapReady] = useState(false);
-  const [userLocation, setUserLocation] = useState<{
-    lat: number;
-    lon: number;
-  } | null>(null);
+  const [strapiProjects, setStrapiProjects] = useState<Map<
+    string,
+    IStrapiData<StrapiProject>
+  > | null>(null);
 
   const isBboxContained = useCallback(
     (innerBbox: string, outerBbox: string): boolean => {
@@ -73,17 +76,37 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
     []
   );
 
-  const fetchProjectsData = useCallback(async (bbox: string) => {
-    setIsLoading(true);
+  const fetchStrapiData = useCallback(async () => {
+    if (strapiProjects) return; // If we already have Strapi data, don't fetch it again
+
     try {
-      const data = await getPortfolioProjectsByBbox(bbox);
-      setFeatureCollection(data);
+      const data = await getStrapiProjects(locale, '2'); // pLevel = Population depth which is a param in the API request. 2 is enough to get the slug and the portfolioHost
+      setStrapiProjects(data);
     } catch (error) {
-      console.error('Error fetching projects:', error);
-    } finally {
-      setIsLoading(false);
+      console.error('❌ Error fetching Strapi projects:', error);
     }
-  }, []);
+  }, [locale, strapiProjects]);
+
+  const fetchProjectsData = useCallback(
+    async (bbox: string) => {
+      setIsLoading(true);
+      try {
+        const fpmData = await getFpmProjectsByBbox(bbox);
+
+        // If we have Strapi data, merge it, otherwise show FPM data immediately
+        const mergedData = strapiProjects
+          ? mergeProjectData(fpmData, strapiProjects)
+          : fpmData;
+
+        setFeatureCollection(mergedData);
+      } catch (error) {
+        console.error('Error fetching projects:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [strapiProjects]
+  );
 
   const debouncedUpdateBbox = useCallback(
     debounce(() => {
@@ -280,10 +303,6 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
         const projectUrl =
           slug && portfolioHost ? `${portfolioHost}/portfolio/${slug}` : null;
 
-        console.log('projectUrl', projectUrl);
-        console.log('slug', slug);
-        console.log('portfolioHost', portfolioHost);
-
         const getBadgeMessage = (status: string) => {
           switch (status) {
             case CreditAvailability.CREDITS_AVAILABLE:
@@ -401,10 +420,8 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
         slice.defaultCenterCoordinates.latitude,
       ];
       initialZoom = slice.defaultZoomLevel;
-    } else if (userLocation) {
-      initialCenter = [userLocation.lon, userLocation.lat];
-      initialZoom = 10;
     } else {
+      // Always start with fallback view - don't wait for user location
       const bbox = initialBboxRef.current || FALLBACK_BBOX;
       const [west, south, east, north] = bbox.split(',').map(Number);
       const bounds = new mapboxgl.LngLatBounds([west, south], [east, north]);
@@ -425,10 +442,7 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
 
     map.current.on('load', () => {
       setIsMapReady(true);
-      if (
-        !(slice.defaultCenterCoordinates && slice.defaultZoomLevel) &&
-        !userLocation
-      ) {
+      if (!(slice.defaultCenterCoordinates && slice.defaultZoomLevel)) {
         const bbox = initialBboxRef.current || FALLBACK_BBOX;
         const [west, south, east, north] = bbox.split(',').map(Number);
         const bounds = new mapboxgl.LngLatBounds([west, south], [east, north]);
@@ -453,12 +467,26 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
   }, [
     slice.defaultCenterCoordinates,
     slice.defaultZoomLevel,
-    userLocation,
     debouncedUpdateBbox,
   ]);
 
+  // Fetch Strapi data once on component mount
+  useEffect(() => {
+    fetchStrapiData();
+  }, [fetchStrapiData]);
+
+  // Handle re-merging data when Strapi data becomes available
+  useEffect(() => {
+    if (strapiProjects && featureCollection) {
+      const mergedData = mergeProjectData(featureCollection, strapiProjects);
+      setFeatureCollection(mergedData);
+    }
+  }, [strapiProjects]);
+
+  // Request user location (non-blocking)
   useEffect(() => {
     if (slice.defaultCenterCoordinates && slice.defaultZoomLevel) {
+      // Use provided default coordinates
       const { latitude, longitude } = slice.defaultCenterCoordinates;
       const buffer = 10;
       const bbox = `${longitude - buffer},${latitude - buffer},${
@@ -467,28 +495,40 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
       initialBboxRef.current = bbox;
       fetchProjectsData(bbox);
     } else if (navigator.geolocation) {
+      // Set fallback immediately (non-blocking)
+      initialBboxRef.current = FALLBACK_BBOX;
+      fetchProjectsData(FALLBACK_BBOX);
+
+      // Request user location asynchronously
       navigator.geolocation.getCurrentPosition(
         (position) => {
           const userLoc = {
             lat: position.coords.latitude,
             lon: position.coords.longitude,
           };
-          setUserLocation(userLoc);
-          const buffer = 1;
-          const bbox = `${userLoc.lon - buffer},${userLoc.lat - buffer},${
-            userLoc.lon + buffer
-          },${userLoc.lat + buffer}`;
-          initialBboxRef.current = bbox;
-          fetchProjectsData(bbox);
+          if (map.current) {
+            map.current.easeTo({
+              center: [userLoc.lon, userLoc.lat],
+              zoom: 10,
+              duration: 1500,
+            });
+
+            // Update bbox for this location
+            const buffer = 1;
+            const bbox = `${userLoc.lon - buffer},${userLoc.lat - buffer},${
+              userLoc.lon + buffer
+            },${userLoc.lat + buffer}`;
+            initialBboxRef.current = bbox;
+            fetchProjectsData(bbox);
+          }
         },
         () => {
-          setUserLocation(null);
-          initialBboxRef.current = FALLBACK_BBOX;
-          fetchProjectsData(FALLBACK_BBOX);
+          // Permission denied or error - already have fallback data loaded
+          // No need to re-fetch since we already loaded FALLBACK_BBOX data
         }
       );
     } else {
-      setUserLocation(null);
+      // Geolocation not supported - use fallback
       initialBboxRef.current = FALLBACK_BBOX;
       fetchProjectsData(FALLBACK_BBOX);
     }