From 955543694c34a968ed14a3229d226366cdf9d68d Mon Sep 17 00:00:00 2001 From: Ben Furber Date: Thu, 14 Nov 2024 17:03:23 +0000 Subject: [PATCH 01/16] feat: drop old map --- .../src/CardList/CardList.stories.tsx | 25 +- .../components/src/CardList/CardList.test.tsx | 16 +- packages/components/src/CardList/CardList.tsx | 67 ++-- packages/components/src/Loader/Loader.tsx | 2 +- packages/cypress/src/integration/map.spec.ts | 30 +- .../cypress/src/integration/settings.spec.ts | 1 - src/pages/Maps/Content/Controls/Controls.tsx | 142 --------- .../Controls/GroupingFilterDesktop.tsx | 37 --- .../Content/Controls/GroupingFilterMobile.tsx | 94 ------ .../transformAvailableFiltersToGroups.tsx | 94 ------ ...formSpecialistWorkspaceTypeToWorkspace.tsx | 17 - .../Maps/Content/MapView/MapContainer.tsx | 111 +++++++ src/pages/Maps/Content/MapView/MapList.tsx | 117 +++++++ .../Maps/Content/MapView/MapView.client.tsx | 52 --- src/pages/Maps/Content/MapView/MapView.tsx | 190 +++++++++++ .../Maps/Content/MapView/MapWithList.tsx | 295 ------------------ .../Content/MapView/MapWithListHeader.tsx | 27 +- src/pages/Maps/Content/NewMapBanner.tsx | 38 --- src/pages/Maps/Content/index.ts | 2 - src/pages/Maps/Maps.client.tsx | 175 ++--------- src/pages/Maps/utils/filterPins.ts | 44 +-- 21 files changed, 510 insertions(+), 1066 deletions(-) delete mode 100644 src/pages/Maps/Content/Controls/Controls.tsx delete mode 100644 src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx delete mode 100644 src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx delete mode 100644 src/pages/Maps/Content/Controls/transformAvailableFiltersToGroups.tsx delete mode 100644 src/pages/Maps/Content/Controls/transformSpecialistWorkspaceTypeToWorkspace.tsx create mode 100644 src/pages/Maps/Content/MapView/MapContainer.tsx create mode 100644 src/pages/Maps/Content/MapView/MapList.tsx delete mode 100644 src/pages/Maps/Content/MapView/MapView.client.tsx create mode 100644 src/pages/Maps/Content/MapView/MapView.tsx delete mode 100644 src/pages/Maps/Content/MapView/MapWithList.tsx delete mode 100644 src/pages/Maps/Content/NewMapBanner.tsx delete mode 100644 src/pages/Maps/Content/index.ts diff --git a/packages/components/src/CardList/CardList.stories.tsx b/packages/components/src/CardList/CardList.stories.tsx index cbd6ce502d..4ffefe3736 100644 --- a/packages/components/src/CardList/CardList.stories.tsx +++ b/packages/components/src/CardList/CardList.stories.tsx @@ -8,7 +8,7 @@ export default { component: CardList, } as Meta -const allItems = [ +const list = [ { _deleted: false, _id: 'first-one', @@ -49,38 +49,21 @@ const onPinClick = () => undefined export const Default: StoryFn = () => { return ( ) } -export const FiltedDisplay: StoryFn = () => { - const filteredList = [allItems[0], allItems[2]] - - return ( - - ) -} - -export const WhenFiltedDisplayIsZero: StoryFn = () => { +export const WhenDisplayIsZero: StoryFn = () => { return ( diff --git a/packages/components/src/CardList/CardList.test.tsx b/packages/components/src/CardList/CardList.test.tsx index 1bd6b0e46f..4657bf8074 100644 --- a/packages/components/src/CardList/CardList.test.tsx +++ b/packages/components/src/CardList/CardList.test.tsx @@ -4,11 +4,7 @@ import { describe, expect, it } from 'vitest' import { render } from '../test/utils' import { EMPTY_LIST, type IProps } from './CardList' -import { - Default, - FiltedDisplay, - WhenFiltedDisplayIsZero, -} from './CardList.stories' +import { Default, WhenFiltedDisplayIsZero } from './CardList.stories' describe('CardList', () => { it('Shows all items when no filtering is done', () => { @@ -17,15 +13,7 @@ describe('CardList', () => { expect(getAllByTestId('CardListItem').length).toBe(4) }) - it('Shows only filted items when provided', () => { - const { getAllByTestId } = render( - , - ) - - expect(getAllByTestId('CardListItem').length).toBe(2) - }) - - it('Shows the no items label when filted items is empty', () => { + it('Shows the no item label when filted items is empty', () => { const { getByText } = render( , ) diff --git a/packages/components/src/CardList/CardList.tsx b/packages/components/src/CardList/CardList.tsx index 77f2780653..e0cae132a4 100644 --- a/packages/components/src/CardList/CardList.tsx +++ b/packages/components/src/CardList/CardList.tsx @@ -3,13 +3,11 @@ import { Flex, Text } from 'theme-ui' import { CardListItem } from '../CardListItem/CardListItem' import { Icon } from '../Icon/Icon' -import { Loader } from '../Loader/Loader' import type { IMapPin } from 'oa-shared' export interface IProps { columnsCountBreakPoints?: { [key: number]: number } - filteredList: IMapPin[] | null list: IMapPin[] onBlur: () => void onPinClick: (arg: IMapPin) => void @@ -18,11 +16,10 @@ export interface IProps { } export const EMPTY_LIST = 'Oh nos! Nothing to show!' +const DEFAULT_BREAKPOINTS = { 600: 1, 1100: 2, 1600: 3 } export const CardList = (props: IProps) => { const { - columnsCountBreakPoints, - filteredList, list, onBlur, onPinClick, @@ -30,8 +27,8 @@ export const CardList = (props: IProps) => { viewport, } = props - const listToShow = filteredList === null ? list : filteredList - const displayItems = listToShow + const displayItems = list + .splice(0, 30) .sort( (a, b) => Date.parse(b.creator?._lastActive || '0') - @@ -50,11 +47,10 @@ export const CardList = (props: IProps) => { ) }) - const isListEmpty = displayItems.length === 0 - const hasListLoaded = list - const results = `${displayItems.length} result${ - displayItems.length == 1 ? '' : 's' - } in view` + const isListEmpty = list.length === 0 + const results = `${list.length} result${list.length == 1 ? '' : 's'} in view` + const columnsCountBreakPoints = + props.columnsCountBreakPoints || DEFAULT_BREAKPOINTS return ( { padding: 2, }} > - {!hasListLoaded && } - {hasListLoaded && ( - <> - - {results} - - Most recently active - - - - {isListEmpty && EMPTY_LIST} - {!isListEmpty && ( - - {displayItems} - - )} - + + {results} + + Most recently active + + + + {isListEmpty && EMPTY_LIST} + {!isListEmpty && ( + + {displayItems} + )} ) diff --git a/packages/components/src/Loader/Loader.tsx b/packages/components/src/Loader/Loader.tsx index 92f5fcaf05..57668e7529 100644 --- a/packages/components/src/Loader/Loader.tsx +++ b/packages/components/src/Loader/Loader.tsx @@ -43,7 +43,7 @@ export const Loader = ({ label, sx }: Props) => { /> )} - {label || 'loading...'} + {label || 'Loading...'} diff --git a/packages/cypress/src/integration/map.spec.ts b/packages/cypress/src/integration/map.spec.ts index 3a14272fd5..3449e8ef1d 100644 --- a/packages/cypress/src/integration/map.spec.ts +++ b/packages/cypress/src/integration/map.spec.ts @@ -15,25 +15,7 @@ describe('[Map]', () => { cy.visit('/map') cy.title().should('include', `Map`) - cy.step('Old map pins can be clicked on') - cy.get(`[data-cy=pin-${userId}]`).click() - cy.get('[data-cy=MapMemberCard]').within(() => { - cy.get('[data-cy=Username]').contains(userId) - }) - cy.url().should('include', `#${userId}`) - - cy.step('Old map pins can be hidden') - cy.get('.markercluster-map').click(0, 0) - cy.get('[data-cy=MapMemberCard]').should('not.exist') - cy.url().should('not.include', `#${userId}`) - - cy.step('Link to new map visible and clickable') - cy.wait(500) // wait for interaction - cy.get('[data-cy=Banner]').contains('Test it out!').click() - cy.get('[data-cy=Banner]').contains('go back to the old one!') - - cy.step('New map shows the cards') - cy.get('[data-cy="welome-header"]').should('be.visible') + cy.step('Shows the cards') cy.get('[data-cy="CardList-desktop"]').should('be.visible') cy.get('[data-cy="list-results"]').contains(/\d+ results in view/) @@ -69,10 +51,14 @@ describe('[Map]', () => { cy.get('[data-cy=MapFilterList-ShowResultsButton]').first().click() cy.step('As the user moves in the list updates') + cy.visit(`/map#${userId}`) + cy.wait(500) // Wait for animation to complete for (let i = 0; i < 6; i++) { cy.get('.leaflet-control-zoom-in').click() } + cy.get('[data-cy="list-results"]').contains('1 result') + cy.wait(500) // Wait for animation to complete cy.get('[data-cy="CardList-desktop"]').within(() => { cy.get('[data-cy=CardListItem]').within(() => { cy.contains(userId) @@ -85,7 +71,7 @@ describe('[Map]', () => { .contains(userId) cy.get('[data-cy=CardListItem-selected]').first().click() - cy.step('New map pins can be clicked on') + cy.step('Map pins can be clicked on') cy.get(`[data-cy=pin-${userId}]`).click() cy.get('[data-cy=PinProfile]').within(() => { cy.get('[data-cy=Username]').contains(userId) @@ -93,7 +79,7 @@ describe('[Map]', () => { }) cy.url().should('include', `#${userId}`) - cy.step('New map pins can be hidden with the cross button') + cy.step('Map pins can be hidden with the cross button') cy.get('[data-cy=PinProfile]').should('be.visible') cy.get('[data-cy=PinProfileCloseButton]').click() cy.url().should('not.include', `#${userId}`) @@ -136,8 +122,6 @@ describe('[Map]', () => { it('Test zoom out/ globe button + zoom in to users location button', () => { cy.viewport('macbook-16') cy.visit('/map') - cy.get('[data-cy=Banner]').contains('Test it out!').click() - cy.wait(500) cy.get('[data-cy="WorldViewButton"]', { timeout: 10000 }) .should('exist') diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts index c248253abc..317600ffad 100644 --- a/packages/cypress/src/integration/settings.spec.ts +++ b/packages/cypress/src/integration/settings.spec.ts @@ -159,7 +159,6 @@ describe('[Settings]', () => { cy.step('Can view pin on new map') cy.visit(`/map#${user.username}`) cy.wait(2000) - cy.get('[data-cy=Banner]').contains('Test it out!').click() cy.get('[data-cy=CardListItem]').contains(user.username) cy.step('Can delete map pin') diff --git a/src/pages/Maps/Content/Controls/Controls.tsx b/src/pages/Maps/Content/Controls/Controls.tsx deleted file mode 100644 index a6e32451fa..0000000000 --- a/src/pages/Maps/Content/Controls/Controls.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React, { useState } from 'react' -import { Link, useNavigate } from '@remix-run/react' -import { Button, Modal, OsmGeocoding } from 'oa-components' -import filterIcon from 'src/assets/icons/icon-filters-mobile.png' -import { useCommonStores } from 'src/common/hooks/useCommonStores' -import { logger } from 'src/logger' -import { Box, Flex } from 'theme-ui' - -import { GroupingFilterDesktop } from './GroupingFilterDesktop' -import { GroupingFilterMobile } from './GroupingFilterMobile' - -import type { FilterGroup } from './transformAvailableFiltersToGroups' - -interface IProps { - availableFilters: FilterGroup[] - onLocationChange: (latlng: { lat: number; lng: number }) => void - onFilterChange: (filters: string[]) => void -} -interface IState { - showFiltersMobile: boolean - filtersSelected: Array -} - -export const Controls = ({ - availableFilters, - onLocationChange, - onFilterChange, -}: IProps) => { - const navigate = useNavigate() - const { userStore } = useCommonStores().stores - const [state, setState] = useState({ - showFiltersMobile: false, - filtersSelected: [], - }) - - const toggleFilterMobileModal = () => { - setState((state) => ({ - ...state, - showFiltersMobile: !state.showFiltersMobile, - })) - } - - const onChange = (selected) => { - onFilterChange && onFilterChange(selected) - setState((state) => ({ ...state, filtersSelected: selected })) - } - - const myPinUrl = userStore!.user - ? { - pathname: `/settings`, - hash: '#your-map-pin', - } - : { pathname: '/sign-up' } - - return ( - navigate('/map')} - > - - { - logger.debug(data, 'Map.Content.Controls.ReactOsmGeocoding') - if (data.lat && data.lon) { - onLocationChange({ - lat: data.lat, - lng: data.lon, - }) - } - }} - countrycodes="" - acceptLanguage="en" - /> - - - onChange(selected)} - /> - - e.stopPropagation()} - > - - - - - - - - - onChange(selected)} - onClose={toggleFilterMobileModal} - /> - - - ) -} diff --git a/src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx b/src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx deleted file mode 100644 index e91867c3dd..0000000000 --- a/src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import { Select } from 'oa-components' -import { Box } from 'theme-ui' - -import type { FilterGroup } from './transformAvailableFiltersToGroups' - -interface IProps { - availableFilters: FilterGroup[] - onChange: (selectedItems: string[]) => void -} - -export const GroupingFilterDesktop = (props: IProps) => { - const onSelectChange = (selectedOptions) => { - const arr = selectedOptions.map((option) => option.value) - props.onChange(arr) - } - - return ( - -