sorting pro badge pins first

packages/components/src/MapCardList/MapCardList.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { compareDesc } from 'date-fns';
 import { Box, Flex, Text } from 'theme-ui';
 
 import { Button } from '../Button/Button';
@@ -29,27 +28,19 @@ export const MapCardList = (props: IProps) => {
   }, [list]);
 
   useEffect(() => {
-    const toRender = list
-      .sort((a, b) =>
-        compareDesc(
-          a.profile!.lastActive || Date.parse('0'),
-          b.profile!.lastActive || Date.parse('0'),
-        ),
-      )
-      .slice(0, renderCount)
-      .map((item) => {
-        const isSelectedPin = item.id === selectedPin?.id;
+    const toRender = list.slice(0, renderCount).map((item) => {
+      const isSelectedPin = item.id === selectedPin?.id;
 
-        return (
-          <CardListItem
-            item={item}
-            key={item.id}
-            isSelectedPin={isSelectedPin}
-            onPinClick={onPinClick}
-            viewport={viewport}
-          />
-        );
-      });
+      return (
+        <CardListItem
+          item={item}
+          key={item.id}
+          isSelectedPin={isSelectedPin}
+          onPinClick={onPinClick}
+          viewport={viewport}
+        />
+      );
+    });
 
     setDisplayItems(toRender);
   }, [renderCount, list]);

packages/cypress/src/integration/map.spec.ts

@@ -23,6 +23,13 @@ describe('[Map]', () => {
     cy.get('[data-cy="CardList-desktop"]').should('be.visible');
     cy.get('[data-cy="list-results"]').contains(/\d+ results in view/);
 
+    cy.step('PRO users appear first in the list');
+    cy.get('[data-cy="CardList-desktop"]')
+      .find('[data-cy=CardListItem]')
+      .first()
+      .find('[data-testid="Username: pro badge"]')
+      .should('exist');
+
     cy.step('Map filters can be used');
     cy.get('[data-cy=MemberTypeVerticalList]')
       .first()

src/pages/Maps/Maps.client.tsx

@@ -4,7 +4,7 @@ import { Box, Flex } from 'theme-ui';
 
 import { MapList } from './Content/MapView/MapList';
 import { MapView } from './Content/MapView/MapView';
-import { filterPins } from './utils/filterPins';
+import { filterPins, sortPinsByBadgeThenLastActive } from './utils/pinUtils';
 import { mapPinService } from './map.service';
 import { MapContext } from './MapContext';
 
@@ -133,13 +133,7 @@ const MapsPage = () => {
           }
         }
 
-        setAllPins(
-          pinsToSet.sort((a, b) => {
-            const aTime = a.profile.lastActive ? new Date(a.profile.lastActive).getTime() : 0;
-            const bTime = b.profile.lastActive ? new Date(b.profile.lastActive).getTime() : 0;
-            return bTime - aTime;
-          }),
-        );
+        setAllPins(sortPinsByBadgeThenLastActive(pinsToSet, 'pro'));
 
         if (filters?.filters) {
           const sortedTypes = (filters.filters.types || [])