Skip to content

Commit

Permalink
Improve DetailsCard to support medias prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtrucs
dtrucs committed Sep 19, 2023
1 parent c533069 commit 64c8565
Show file tree
Hide file tree
Showing 5 changed files with 702 additions and 697 deletions.
13 changes: 11 additions & 2 deletions frontend/src/components/pages/details/Details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { OpenMapButton } from 'components/OpenMapButton';
import { useShowOnScrollPosition } from 'hooks/useShowOnScrollPosition';
import { useMediaPredicate } from 'react-media-hook';
import { sizes } from 'stylesheet';
import React, { useMemo, useRef } from 'react';
import React, { useCallback, useMemo, useRef } from 'react';
import { TrekChildGeometry } from 'modules/details/interface';
import { cleanHTMLElementsFromString } from 'modules/utils/string';
import Report from 'components/Report/Report';
Expand Down Expand Up @@ -267,6 +267,12 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
iconName: poi.type.label,
}))}
type="POI"
medias={{
viewPoints: {
data: details.pois.flatMap(({ viewPoints }) => viewPoints),
handleViewPointClick,
},
}}
/>
</section>
);
Expand Down Expand Up @@ -673,7 +679,10 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
id: `DETAILS-SERVICE-${service.id}`,
}))}
infrastructure={details.infrastructure}
viewPoints={details.viewPoints}
viewPoints={[
...details.viewPoints,
...details.pois.flatMap(({ viewPoints }) => viewPoints).filter(Boolean),
]}
displayMap={displayMobileMap}
setMapId={setMapId}
/>
Expand Down
182 changes: 98 additions & 84 deletions frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ import useHasMounted from 'hooks/useHasMounted';
import parse from 'html-react-parser';
import { useListAndMapContext } from 'modules/map/ListAndMapContext';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { MAX_WIDTH_MOBILE } from 'stylesheet';
import { cn } from 'services/utils/cn';
import { Arrow } from 'components/Icons/Arrow';
import { ViewPoint } from 'modules/viewPoint/interface';
import { Attachment } from '../../../../../modules/interface';
import { useDetailsCard } from './useDetailsCard';
import { DetailsMedias } from '../DetailsMedias';

export interface DetailsCardProps {
id: string;
name: string;
Expand All @@ -26,6 +27,12 @@ export interface DetailsCardProps {
className?: string;
redirectionUrl?: string;
type?: string;
medias?: {
viewPoints: {
data: ViewPoint[];
handleViewPointClick: (id: string) => void;
};
};
}

export const DetailsCard: React.FC<DetailsCardProps> = ({
Expand All @@ -40,8 +47,10 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
className = '',
redirectionUrl,
type,
medias,
}) => {
const { truncateState, toggleTruncateState, heightState, detailsCardRef } = useDetailsCard();
const hasMedia = Boolean(medias?.viewPoints.data.length);
const { truncateState, toggleTruncateState, detailsCardRef } = useDetailsCard(hasMedia);
const descriptionStyled =
truncateState === 'TRUNCATE' ? (
<HtmlText className="line-clamp-2 desktop:line-clamp-5 text-greyDarkColored">
Expand All @@ -54,97 +63,108 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
const { setHoveredCardId } = useListAndMapContext();

const hasNavigator = useHasMounted(typeof navigator !== 'undefined' && navigator.onLine);

return (
<DetailsCardContainer
height={heightState}
<li
className={cn(
`border border-solid border-greySoft rounded-card
flex-none overflow-hidden relative
flex flex-col h-fit desktop:flex-row desktop:w-auto mx-1 desktop:mb-6
hover:border-blackSemiTransparent transition-all duration-500`,
flex-none desktop:w-auto mx-1 desktop:mb-6
hover:border-blackSemiTransparent transition-all duration-500`,
className,
)}
onMouseEnter={() => {
setHoveredCardId(id);
}}
onMouseLeave={() => {
setHoveredCardId(null);
}}
>
<div className="flex shrink-0 h-40 desktop:h-full desktop:w-2/5">
<div className="w-full">
<Modal className="h-full">
{({ isFullscreen, toggleFullscreen }) => (
<>
{type === 'TOURISTIC_CONTENT' &&
redirectionUrl &&
attachments.length > 0 &&
hasNavigator && (
<div
className={cn(
`
overflow-hidden relative desktop:w-auto
h-fit desktop:flex-row
transition-all duration-500`,
truncateState !== 'NONE' ? 'desktop:h-auto' : 'desktop:h-55',
truncateState === 'TRUNCATE' && hasMedia && 'desktop:h-55',
className,
)}
onMouseEnter={() => {
setHoveredCardId(id);
}}
onMouseLeave={() => {
setHoveredCardId(null);
}}
>
<div className="float-left flex shrink-0 h-40 desktop:h-full desktop:w-2/5 pr-2 desktop:pr-6">
<div className="w-full">
<Modal className="h-full">
{({ isFullscreen, toggleFullscreen }) => (
<>
{type === 'TOURISTIC_CONTENT' &&
redirectionUrl &&
attachments.length > 0 &&
hasNavigator && (
<DetailsCoverCarousel
attachments={isFullscreen ? attachments : thumbnails}
classNameImage={cn('object-center', isFullscreen && 'object-contain')}
redirect={redirectionUrl}
/>
)}
{type !== 'TOURISTIC_CONTENT' && attachments.length > 0 && hasNavigator && (
<DetailsCoverCarousel
attachments={isFullscreen ? attachments : thumbnails}
classNameImage={cn('object-center', isFullscreen && 'object-contain')}
redirect={redirectionUrl}
onClickImage={toggleFullscreen}
/>
)}
{type !== 'TOURISTIC_CONTENT' && attachments.length > 0 && hasNavigator && (
<DetailsCoverCarousel
attachments={isFullscreen ? attachments : thumbnails}
classNameImage={cn('object-center', isFullscreen && 'object-contain')}
onClickImage={toggleFullscreen}
/>
)}
</>
)}
</Modal>
<CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
</>
)}
</Modal>
<CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
</div>
</div>
</div>
<div
ref={detailsCardRef}
className={`flex flex-col relative
p-2 desktop:p-6 desktop:my-auto`}
>
{place && (
<div ref={detailsCardRef} className="p-2 desktop:p-6">
{place && (
<OptionalLink redirectionUrl={redirectionUrl}>
<p className="text-greyDarkColored">{place}</p>
</OptionalLink>
)}
<OptionalLink redirectionUrl={redirectionUrl}>
<p className="text-greyDarkColored">{place}</p>
<h3 className="mb-1 text-Mobile-C1 desktop:text-H4 text-primary1 font-bold">{name}</h3>
</OptionalLink>
)}
<OptionalLink redirectionUrl={redirectionUrl}>
<h3 className="text-Mobile-C1 desktop:text-H4 text-primary1 font-bold">{name}</h3>
</OptionalLink>
{Boolean(description) && (
<div
className="mt-1 desktop:mt-4
flex flex-col desktop:flex-row desktop:items-end
text-Mobile-C2 desktop:text-P1 text-greyDarkColored"
>
<OptionalLink redirectionUrl={redirectionUrl}>{descriptionStyled}</OptionalLink>
{truncateState !== 'NONE' && (
<button
className="flex items-center text-primary1 underline shrink-0 gap-1 desktop:ml-1"
onClick={toggleTruncateState}
type="button"
aria-hidden
>
<span className="shrink-0">
<FormattedMessage
id={truncateState === 'TRUNCATE' ? 'details.readMore' : 'details.readLess'}
{Boolean(description) && (
<>
<OptionalLink redirectionUrl={redirectionUrl}>{descriptionStyled}</OptionalLink>
{medias && Number(medias.viewPoints.data.length) > 0 && truncateState !== 'TRUNCATE' && (
<div className="clear-both py-6">
<DetailsMedias
viewPoints={medias.viewPoints.data ?? []}
handleViewPointClick={medias.viewPoints.handleViewPointClick}
titleTag="h3"
asCarousel
/>
</span>
<Arrow
size={20}
className={cn(
'shrink-0 transition',
truncateState === 'TRUNCATE' ? 'rotate-90' : '-rotate-90',
)}
/>
</button>
)}
</div>
)}
</div>
)}
{truncateState !== 'NONE' && (
<button
className="flex float-right mb-2 desktop:mb-6 items-center text-primary1 underline shrink-0 gap-1"
onClick={toggleTruncateState}
type="button"
aria-hidden
>
<span className="shrink-0">
<FormattedMessage
id={truncateState === 'TRUNCATE' ? 'details.readMore' : 'details.readLess'}
/>
</span>
<Arrow
size={20}
className={cn(
'shrink-0 transition',
truncateState === 'TRUNCATE' ? 'rotate-90' : '-rotate-90',
)}
/>
</button>
)}
</>
)}
</div>
</div>
</DetailsCardContainer>
</li>
);
};

Expand All @@ -160,9 +180,3 @@ const OptionalLink: React.FC<OptionalLinkProps> = ({ redirectionUrl, children })
<>{children}</>
);
};

const DetailsCardContainer = styled.li<{ height: number }>`
@media (min-width: ${MAX_WIDTH_MOBILE}px) {
height: ${props => props.height}px;
}
`;
Loading

0 comments on commit 64c8565

Please sign in to comment.