From 956894eb09106f386d879090b349e2efa3e95c9b Mon Sep 17 00:00:00 2001 From: Ben Furber Date: Thu, 14 Nov 2024 17:03:23 +0000 Subject: [PATCH] feat: drop old map --- .../src/CardList/CardList.stories.tsx | 12 +- .../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 | 29 +- .../cypress/src/integration/settings.spec.ts | 1 - src/config/config.ts | 19 +- 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 | 288 ------------------ .../Content/MapView/MapWithListHeader.tsx | 24 +- src/pages/Maps/Content/NewMapBanner.tsx | 38 --- src/pages/Maps/Content/index.ts | 2 - src/pages/Maps/Maps.client.tsx | 180 ++--------- src/pages/Maps/Maps.test.tsx | 106 ------- src/pages/Maps/utils/filterPins.ts | 11 +- 23 files changed, 513 insertions(+), 1136 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 delete mode 100644 src/pages/Maps/Maps.test.tsx diff --git a/packages/components/src/CardList/CardList.stories.tsx b/packages/components/src/CardList/CardList.stories.tsx index bbe289bc27..a086e8c78a 100644 --- a/packages/components/src/CardList/CardList.stories.tsx +++ b/packages/components/src/CardList/CardList.stories.tsx @@ -44,17 +44,9 @@ const allItems = [ ] export const Default: StoryFn = () => { - return -} - -export const FiltedDisplay: StoryFn = () => { - const filteredList = [allItems[0], allItems[2]] - - return ( - - ) + return } export const WhenFiltedDisplayIsZero: StoryFn = () => { - return + 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 18edc87f53..7958934953 100644 --- a/packages/components/src/CardList/CardList.tsx +++ b/packages/components/src/CardList/CardList.tsx @@ -3,24 +3,23 @@ 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 } dataCy: string - filteredList: IMapPin[] | null list: IMapPin[] } 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, dataCy, filteredList, list } = props + const { dataCy, list } = 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') - @@ -28,11 +27,10 @@ export const CardList = (props: IProps) => { ) .map((item) => ) - 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 583b37b1d0..4c11f81629 100644 --- a/packages/cypress/src/integration/map.spec.ts +++ b/packages/cypress/src/integration/map.spec.ts @@ -14,24 +14,7 @@ describe('[Map]', () => { cy.step('Shows all pins onload') cy.visit('/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.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/) @@ -63,10 +46,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(() => { @@ -77,7 +64,7 @@ describe('[Map]', () => { .and('include', `/u/${userId}`) }) - 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) @@ -85,7 +72,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}`) @@ -139,8 +126,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 2544407cdc..4793322b63 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/config/config.ts b/src/config/config.ts index 572a226cf3..4f333eee70 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -92,12 +92,19 @@ export const isProductionEnvironment = (): boolean => { const firebaseConfigs: { [variant in siteVariants]: IFirebaseConfig } = { /** Sandboxed dev site, all features available for interaction */ dev_site: { - apiKey: 'AIzaSyChVNSMiYxCkbGd9C95aChr9GxRJtW6NRA', - authDomain: 'precious-plastics-v4-dev.firebaseapp.com', - databaseURL: 'https://precious-plastics-v4-dev.firebaseio.com', - messagingSenderId: '174193431763', - projectId: 'precious-plastics-v4-dev', - storageBucket: 'precious-plastics-v4-dev.appspot.com', + apiKey: 'AIzaSyCjc22Q5wl6MEnel4qrSDQNjO5xczspVbk', + + authDomain: 'onearmyworld.firebaseapp.com', + + databaseURL: 'https://onearmyworld.firebaseio.com', + + projectId: 'onearmyworld', + + storageBucket: 'onearmyworld.appspot.com', + + messagingSenderId: '95034788341', + + appId: '1:95034788341:web:c9c75aa61378d740d478bc', }, /** Sandboxed dev site, populated with copy of live site data (reset weekly) */ preview: { 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 ( - -