feat: update map filtering display for usability

ONEARMY · Dec 5, 2024 · 6c72267 · 6c72267
1 parent 50c017a
commit 6c72267
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 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
@@ -61,7 +61,7 @@ describe('[Map]', () => {
     cy.get('[data-cy="CardList-desktop"]').within(() => {
       cy.get('[data-cy=CardListItem-selected]').within(() => {
         cy.contains(userId)
-        cy.get('[data-cy="MemberBadge-member"]')
+        cy.get('[data-cy="MemberBadge-workshop"]')
       })
     })
     cy.get('[data-cy="PinProfile"]')
@@ -102,17 +102,12 @@ describe('[Map]', () => {
     cy.get('[data-cy="ShowMobileListButton"]').click()
     cy.get('[data-cy="CardList-mobile"]').within(() => {
       cy.get('[data-cy=CardListItem]')
-        .last()
+        .first()
         .within(() => {
           cy.contains(userId)
-          cy.get('[data-cy="MemberBadge-member"]')
+          cy.get('[data-cy="MemberBadge-workshop"]')
         })
     })
-    cy.get('[data-cy=MapFilterProfileTypeCardList-ButtonRight]')
-      .last()
-      .click()
-      .click()
-    cy.get('[data-cy=MapListFilter]').last().click()
 
     cy.step('Mobile list view can be hidden')
     cy.get('[data-cy="ShowMapButton"]').click()

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)
         : []),