-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1258: Refactor pois and bottom sheet
- Loading branch information
1 parent
87ca7b9
commit 1a4d6fe
Showing
11 changed files
with
248 additions
and
214 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import BottomSheet, { | ||
| BottomSheetFlatList, | ||
| BottomSheetFlatListMethods, | ||
| BottomSheetScrollView, | ||
| } from '@gorhom/bottom-sheet' | ||
| import React, { memo, ReactElement, Ref } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { Platform } from 'react-native' | ||
| import styled from 'styled-components/native' | ||
|
|
||
| import { LocationType } from 'shared' | ||
| import { ErrorCode, PoiModel } from 'shared/api' | ||
|
|
||
| import useCityAppContext from '../hooks/useCityAppContext' | ||
| import BottomSheetHandle from './BottomSheetHandle' | ||
| import Failure from './Failure' | ||
| import { NoItemsMessage } from './List' | ||
| import PoiDetails from './PoiDetails' | ||
| import PoiListItem from './PoiListItem' | ||
|
|
||
| const StyledBottomSheet = styled(BottomSheet)<{ isFullscreen: boolean }>` | ||
| ${props => props.isFullscreen && `background-color: ${props.theme.colors.backgroundColor};`} | ||
| ` | ||
|
|
||
| const BottomSheetContent = styled.View` | ||
| flex: 1; | ||
| margin: 0 24px; | ||
| ` | ||
|
|
||
| const Title = styled.Text` | ||
| color: ${props => props.theme.colors.textColor}; | ||
| font-family: ${props => props.theme.fonts.native.decorativeFontBold}; | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| ` | ||
|
|
||
| type PoiBottomSheetProps = { | ||
| poiListRef: Ref<BottomSheetFlatListMethods> | ||
| pois: PoiModel[] | ||
| poi: PoiModel | undefined | ||
| userLocation: LocationType | null | ||
| slug: string | undefined | ||
| selectPoi: (poi: PoiModel) => void | ||
| deselectAll: () => void | ||
| snapPoints: number[] | ||
| snapPointIndex: number | ||
| setSnapPointIndex: (index: number) => void | ||
| setScrollPosition: (position: number) => void | ||
| } | ||
|
|
||
| const PoisBottomSheet = ({ | ||
| poiListRef, | ||
| pois, | ||
| poi, | ||
| userLocation, | ||
| slug, | ||
| selectPoi, | ||
| deselectAll, | ||
| snapPoints, | ||
| snapPointIndex, | ||
| setSnapPointIndex, | ||
| setScrollPosition, | ||
| }: PoiBottomSheetProps): ReactElement | null => { | ||
| const { languageCode } = useCityAppContext() | ||
| const { t } = useTranslation('pois') | ||
| const fullscreen = snapPointIndex === snapPoints.length - 1 | ||
| // ios has scrolling issues if content panning gesture is not enabled | ||
| const enableContentPanningGesture = Platform.OS === 'ios' || !fullscreen | ||
|
|
||
| const PoiDetail = poi ? ( | ||
| <PoiDetails language={languageCode} poi={poi} distance={userLocation && poi.distance(userLocation)} /> | ||
| ) : ( | ||
| <Failure code={ErrorCode.PageNotFound} buttonAction={deselectAll} buttonLabel={t('detailsHeader')} /> | ||
| ) | ||
|
|
||
| const renderPoiListItem = ({ item: poi }: { item: PoiModel }): ReactElement => ( | ||
| <PoiListItem | ||
| key={poi.path} | ||
| poi={poi} | ||
| language={languageCode} | ||
| navigateToPoi={() => selectPoi(poi)} | ||
| distance={userLocation && poi.distance(userLocation)} | ||
| /> | ||
| ) | ||
|
|
||
| return ( | ||
| <StyledBottomSheet | ||
| index={snapPointIndex} | ||
| isFullscreen={fullscreen} | ||
| snapPoints={snapPoints} | ||
| enableContentPanningGesture={enableContentPanningGesture} | ||
| enableDynamicSizing={false} | ||
| animateOnMount | ||
| handleComponent={BottomSheetHandle} | ||
| onChange={setSnapPointIndex}> | ||
| <BottomSheetContent> | ||
| {slug ? ( | ||
| <BottomSheetScrollView showsVerticalScrollIndicator={false}>{PoiDetail}</BottomSheetScrollView> | ||
| ) : ( | ||
| <BottomSheetFlatList | ||
| ref={poiListRef} | ||
| data={pois} | ||
| role='list' | ||
| renderItem={renderPoiListItem} | ||
| onMomentumScrollBegin={event => setScrollPosition(event.nativeEvent.contentOffset.y)} | ||
| showsVerticalScrollIndicator={false} | ||
| ListHeaderComponent={<Title>{t('listTitle')}</Title>} | ||
| ListEmptyComponent={<NoItemsMessage>{t('noPois')}</NoItemsMessage>} | ||
| /> | ||
| )} | ||
| </BottomSheetContent> | ||
| </StyledBottomSheet> | ||
| ) | ||
| } | ||
|
|
||
| export default memo(PoisBottomSheet) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { fireEvent } from '@testing-library/react-native' | ||
| import React from 'react' | ||
|
|
||
| import { PoiModelBuilder } from 'shared/api' | ||
|
|
||
| import TestingAppContext from '../../testing/TestingAppContext' | ||
| import renderWithTheme from '../../testing/render' | ||
| import PoisBottomSheet from '../PoisBottomSheet' | ||
|
|
||
| jest.mock('../../components/Page') | ||
| jest.mock('@react-native-clipboard/clipboard', () => () => ({ setString: jest.fn() })) | ||
| jest.mock('react-i18next') | ||
| jest.mock('styled-components') | ||
| jest.mock('@gorhom/bottom-sheet', () => ({ | ||
| __esModule: true, | ||
| ...require('@gorhom/bottom-sheet/mock'), | ||
| })) | ||
|
|
||
| describe('PoisBottomSheet', () => { | ||
| const pois = new PoiModelBuilder(3).build() | ||
| const poi0 = pois[0]! | ||
| const poi1 = pois[1]! | ||
| const poi2 = pois[2]! | ||
| const deselectAll = jest.fn() | ||
| const selectPoi = jest.fn() | ||
|
|
||
| const renderPois = ({ slug = undefined }: { slug?: string; multipoi?: number; poiCategoryId?: number }) => | ||
| renderWithTheme( | ||
| <TestingAppContext> | ||
| <PoisBottomSheet | ||
| slug={slug} | ||
| poi={pois.find(it => it.slug === slug)} | ||
| pois={pois} | ||
| snapPoints={[]} | ||
| snapPointIndex={0} | ||
| userLocation={null} | ||
| poiListRef={jest.fn()} | ||
| setScrollPosition={jest.fn()} | ||
| setSnapPointIndex={jest.fn()} | ||
| deselectAll={deselectAll} | ||
| selectPoi={selectPoi} | ||
| /> | ||
| </TestingAppContext>, | ||
| ) | ||
|
|
||
| it('should show failure if poi is not found', () => { | ||
| const { queryByText, getByText } = renderPois({ slug: 'invalid' }) | ||
|
|
||
| expect(getByText('pageNotFound')).toBeTruthy() | ||
| expect(queryByText(poi0.title)).toBeFalsy() | ||
| expect(queryByText(poi1.title)).toBeFalsy() | ||
| expect(queryByText(poi2.title)).toBeFalsy() | ||
|
|
||
| fireEvent.press(getByText('detailsHeader')) | ||
|
|
||
| expect(deselectAll).toHaveBeenCalledTimes(1) | ||
| }) | ||
|
|
||
| it('should show list', () => { | ||
| const { getByText } = renderPois({}) | ||
|
|
||
| expect(getByText(poi0.title)).toBeTruthy() | ||
| expect(getByText(poi1.title)).toBeTruthy() | ||
| expect(getByText(poi2.title)).toBeTruthy() | ||
|
|
||
| fireEvent.press(getByText(poi1.title)) | ||
| expect(selectPoi).toHaveBeenCalledTimes(1) | ||
| expect(selectPoi).toHaveBeenCalledWith(poi1) | ||
| }) | ||
|
|
||
| it('should show poi', () => { | ||
| const { getByText, queryByText } = renderPois({ slug: poi2.slug }) | ||
|
|
||
| expect(getByText(poi2.title)).toBeTruthy() | ||
| expect(getByText(poi2.category.name)).toBeTruthy() | ||
| expect(getByText(poi2.content)).toBeTruthy() | ||
| expect(getByText(poi2.category.name)).toBeTruthy() | ||
| expect(queryByText(poi0.title)).toBeFalsy() | ||
| expect(queryByText(poi1.title)).toBeFalsy() | ||
| }) | ||
| }) |
Oops, something went wrong.