feat: update map filtering display for usability

ONEARMY · Dec 19, 2024 · 8cbb203 · 8cbb203
1 parent 4d9d177
commit 8cbb203
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/packages/components/src/MapFilterList/MapFilterList.tsx b/packages/components/src/MapFilterList/MapFilterList.tsx
@@ -40,7 +40,7 @@ export const MapFilterList = (props: IProps) => {
   const isActive = (checkingFilter: string) =>
     !!activeFilters.find((filter) => filter.label === checkingFilter)
 
-  const buttonLabel = `Show ${pinCount} result${pinCount === 1 ? '' : 's'}`
+  const buttonLabel = `${pinCount} result${pinCount === 1 ? '' : 's'} in current view`
 
   return (
     <Flex
@@ -61,9 +61,15 @@ export const MapFilterList = (props: IProps) => {
           padding: 2,
         }}
       >
-        <Heading as="h3" variant="small">
-          So what are you looking for?
-        </Heading>
+        <Flex sx={{ flexDirection: 'column' }}>
+          <Heading as="h3" variant="small">
+            Filter what you see
+          </Heading>
+
+          <Text variant="quiet">
+            Zoom out on the map to search the whole world
+          </Text>
+        </Flex>
 
         <ButtonIcon
           data-cy="MapFilterList-CloseButton"
@@ -112,7 +118,7 @@ export const MapFilterList = (props: IProps) => {
 
         {tagFilters.length > 0 && (
           <Flex sx={{ gap: 1, flexDirection: 'column' }}>
-            <Text>Activities</Text>
+            <Text>Spaces activities</Text>
             <MapFilterListWrapper>
               {tagFilters.map((typeFilter, index) => {
                 const onClick = () => onFilterChange(typeFilter)

diff --git a/packages/cypress/src/integration/map.spec.ts b/packages/cypress/src/integration/map.spec.ts
@@ -14,10 +14,13 @@ describe('[Map]', () => {
 
     cy.step('No filters selected by default')
     cy.visit('/map')
-    cy.get('[data-cy=MapFilterProfileTypeCardList]')
+    cy.get('[data-cy=MemberTypeVerticalList]')
       .first()
       .within(() => {
-        cy.get('[data-cy="MapListFilter-active"]').should('have.length', 0)
+        cy.get('[data-cy="MemberTypeVerticalList-Item-active"]').should(
+          'have.length',
+          0,
+        )
       })
 
     cy.step('Shows the cards')
@@ -106,8 +109,12 @@ describe('[Map]', () => {
 
     cy.get('[data-cy="ShowMobileListButton"]').click()
     cy.get('[data-cy="CardList-mobile"]').within(() => {
-      cy.contains(userId)
-      cy.get('[data-cy="MemberBadge-workshop"]')
+      cy.get('[data-cy=CardListItem]')
+        .first()
+        .within(() => {
+          cy.contains(userId)
+          cy.get('[data-cy="MemberBadge-workshop"]')
+        })
     })
 
     cy.step('Mobile list view can be hidden')
@@ -136,11 +143,17 @@ describe('[Map]', () => {
 
     cy.step('Every profile type other than member is set')
     cy.visit('/map')
-    cy.get('[data-cy=MapFilterProfileTypeCardList]')
+    cy.get('[data-cy=MemberTypeVerticalList]')
       .first()
       .within(() => {
-        cy.get('[data-cy="MapListFilter-active"]').should('have.length', 4)
-        cy.get('[data-cy="MapListFilter"]').should('have.length', 1)
+        cy.get('[data-cy="MemberTypeVerticalList-Item-active"]').should(
+          'have.length',
+          4,
+        )
+        cy.get('[data-cy="MemberTypeVerticalList-Item"]').should(
+          'have.length',
+          1,
+        )
       })
   })
 })
diff --git a/src/pages/Maps/Maps.client.tsx b/src/pages/Maps/Maps.client.tsx
@@ -38,7 +38,10 @@ const MapsPage = () => {
 
     const pinDetails = allPins.map(({ creator }) => [
       creator?.profileType,
-      ...(creator?.tags ? creator.tags.map(({ _id }) => _id) : []),
+      // Hiding member tags for the moment
+      ...(creator?.tags && creator?.profileType !== 'member'
+        ? creator.tags.map(({ _id }) => _id)
+        : []),
       ...(creator?.badges
         ? Object.keys(creator?.badges).filter((key) => key)
         : []),