Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refacto children cards #921

Merged
merged 2 commits into from
Jun 15, 2023
Merged

Refacto children cards #921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d508a69
Rewrite DetailsChildrenSection component to be more generic
dtrucs Jun 15, 2023
f89154d
Use DetailsChildrenSection for all outdoor site children cards
dtrucs Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions frontend/src/components/pages/details/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,15 +189,17 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
{details.children.length > 0 && (
<div ref={setChildrenRef} id="details_trekChildren_ref">
<DetailsChildrenSection
trekChildren={details.children.map(child => ({
id="children"
items={details.children.map(child => ({
...child,
id: `${child.id}`,
}))}
trekId={id}
parentId={id}
title={intl.formatMessage(
{ id: 'details.childrenFullTitle' },
{ count: details.children.length },
)}
type="TREK"
/>
</div>
)}
Expand Down
155 changes: 92 additions & 63 deletions ...src/components/pages/details/components/DetailsChildrenSection/DetailsChildrenSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,113 @@
import { Separator } from 'components/Separator';
import { TrekResult } from 'modules/results/interface';
import { OutdoorSiteResult } from 'modules/outdoorSite/interface';
import { OutdoorCourseResult } from 'modules/outdoorCourse/interface';
import { ResultCard } from 'components/pages/search/components/ResultCard';
import styled, { css } from 'styled-components';
import { desktopOnly, scrollBar, sizes } from 'stylesheet';
import { cn } from 'services/utils/cn';
import { marginDetailsChild } from '../../Details';
import { generateChildrenDetailsUrl } from '../../utils';
import { generateDetailsUrlFromType } from '../../utils';

interface DetailsChildrenSectionProps {
trekChildren: TrekResult[];
id?: string;
items: TrekResult[] | OutdoorSiteResult[] | OutdoorCourseResult[];
parentId?: string;
title: string;
trekId: string;
type: 'TREK' | 'OUTDOOR_SITE' | 'OUTDOOR_COURSE';
}

export const DetailsChildrenSection: React.FC<DetailsChildrenSectionProps> = ({
trekChildren,
items,
title,
trekId,
parentId,
type,
id = `${type.toLocaleLowerCase()}Children`,
}) => {
const withSteps = parentId !== undefined;
const idAttribute = `details_${id}`;
return (
<div className="mt-6 desktop:mt-12" id="details_trekChildren">
<div
id="details_trekChildrenTitle"
className={`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`}
<div className="pt-6 desktop:pt-12 scroll-mt-20 desktop:scroll-mt-30" id={idAttribute}>
<h2
id={`${idAttribute}Title`}
className={cn(`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`)}
>
{title}
</div>
</h2>
<ScrollContainer
id="details_trekChildrenScrollContainer"
className="flex desktop:flex-col
desktop:pl-18 desktop:pr-9 desktop:mr-9 desktop:pt-10
mt-4 mb-4 desktop:mb-0 px-4
items-stretch
overflow-x-scroll desktop:overflow-x-hidden
overflow-y-hidden desktop:overflow-y-scroll
flex-nowrap max-h-screen
"
id={`${idAttribute}ScrollContainer`}
className={cn(
`
flex desktop:flex-col flex-nowrap items-stretch
my-4 px-4
desktop:mr-9 desktop:mb-0 desktop:pt-10 desktop:pr-9 desktop:pl-18
overflow-x-auto desktop:overflow-x-hidden
overflow-y-hidden desktop:overflow-y-auto
scroll-smooth snap-x
`,
withSteps && '[counter-reset:steps]',
)}
as={withSteps ? 'ol' : 'ul'}
>
{trekChildren.map((trekChild, i) => (
<div key={i}>
<div className="hidden desktop:block">
<Step number={i + 1} />
</div>
<div
className={`mr-3 desktop:ml-5.5 desktop:mr-0 desktop:pl-12 relative ${
i < trekChildren.length - 1
? 'desktop:border-solid desktop:border-primary1 desktop:border-l-3'
: ''
}`}
>
<div className="relative desktop:-top-20">
<ResultCard
id={`${trekChild.id}`}
hoverId={`DETAILS-TREK_CHILDREN-${trekChild.id}`}
type="TREK"
place={trekChild.place}
title={trekChild.name}
tags={trekChild.tags}
attachments={trekChild.attachments}
badgeIconUri={trekChild.category?.pictogramUri}
badgeName={trekChild.category?.label}
informations={trekChild.informations}
redirectionUrl={generateChildrenDetailsUrl(trekChild.id, trekChild.name, trekId)}
className="w-60 desktop:w-auto"
/>
</div>
</div>
</div>
{items.map(item => (
<li
className={cn(
'pb-6 mx-1',
withSteps &&
`
flex
relative
desktop:ml-6
[counter-increment:steps]
before:content-[counters(steps,'.')]
before:hidden before:desktop:block
before:relative
before:z-10
before:mt-8
before:mb-auto
before:-ml-6
before:mr-6
before:py-2 before:px-4
before:rounded-full
before:border-solid before:border-primary1 before:border-3
before:text-H4 before:font-bold before:text-primary1
before:shadow-md
before:bg-white
after:content-['']
after:hidden after:desktop:block
after:w-1
after:bg-primary1
after:absolute
after:top-0
after:bottom-0
after:-left-2p
first:after:top-12
last:after:h-8
snap-center
`,
)}
key={`${item.type}-${item.id}`}
>
<ResultCard
id={`${item.id}`}
hoverId={`${item.type}-${item.id}`}
type={type}
place={item.place}
title={item.name}
tags={item.tags}
attachments={item.attachments}
badgeIconUri={'category' in item ? item.category?.pictogramUri : undefined}
badgeName={'category' in item ? item.category?.label : undefined}
informations={item.informations}
redirectionUrl={generateDetailsUrlFromType(
item.type,
item.id,
item.name,
withSteps ? { parentId } : undefined,
)}
className="w-60 desktop:w-auto"
/>
</li>
))}
</ScrollContainer>
<div className={marginDetailsChild}>
Expand All @@ -77,7 +119,7 @@ export const DetailsChildrenSection: React.FC<DetailsChildrenSectionProps> = ({

const offsetTopForTitle = 130;

const ScrollContainer = styled.div`
const ScrollContainer = styled.ul`
&::-webkit-scrollbar {
${scrollBar.root}
}
Expand All @@ -90,16 +132,3 @@ const ScrollContainer = styled.div`
);
`)}
`;

const Step: React.FC<{ number: number }> = ({ number }) => (
<div
className="h-8 w-8 desktop:h-12 desktop:w-12
rounded-full
flex items-center justify-center
border-solid border-primary1 border-3
text-P1 desktop:text-H4 font-bold text-primary1
shadow-md"
>
{number}
</div>
);
4 changes: 3 additions & 1 deletion frontend/src/components/pages/details/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,9 @@ export const generateDetailsUrlFromType = (
type: 'TREK' | 'TOURISTIC_CONTENT' | 'TOURISTIC_EVENT' | 'OUTDOOR_SITE' | 'OUTDOOR_COURSE',
id: number | string,
title: string,
params?: Record<string, string>,
): string => {
const searchParams = params ? `?${new URLSearchParams(params).toString()}` : '';
const titleWithNoSpace = convertStringForSitemap(title);
return `${routes[type]}/${id}-${encodeURI(titleWithNoSpace)}`;
return `${routes[type]}/${id}-${encodeURI(titleWithNoSpace)}${searchParams}`;
};
39 changes: 20 additions & 19 deletions frontend/src/components/pages/site/OutdoorSiteUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@ import { DetailsHeaderMobile, marginDetailsChild } from 'components/pages/detail
import { useOnScreenSection } from 'components/pages/details/hooks/useHighlightedSection';
import { generateTouristicContentUrl, HtmlText } from 'components/pages/details/utils';
import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
import { AccessChildrenSection } from 'components/pages/site/components/AccessChildrenSection';
import { OutdoorCoursesChildrenSection } from 'components/pages/site/components/OutdoorCoursesChildrenSection';
import { OutdoorSiteChildrenSection } from 'components/pages/site/components/OutdoorSiteChildrenSection';
import React, { useMemo, useRef } from 'react';
import { DetailsChildrenSection } from 'components/pages/details/components/DetailsChildrenSection';
import { useMemo, useRef } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Loader from 'components/Loader';
import { useMediaPredicate } from 'react-media-hook';
Expand Down Expand Up @@ -218,28 +216,30 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
</div>
)}

{Number(outdoorSiteContent?.children?.length) > 0 && (
{Number(outdoorSiteContent.children?.length) > 0 && (
<div ref={setExperienceRef} id="details_trekChildren_ref">
<OutdoorSiteChildrenSection
outdoorChildren={outdoorSiteContent.children}
id={id}
<DetailsChildrenSection
id="experiences"
items={outdoorSiteContent.children}
title={intl.formatMessage(
{ id: 'outdoorSite.sitesFullTitle' },
{ count: Number(outdoorSiteContent.children.length) },
{ count: outdoorSiteContent.children.length },
)}
type="OUTDOOR_SITE"
/>
</div>
)}

{Number(outdoorSiteContent?.courses?.length) > 0 && (
{Number(outdoorSiteContent.courses?.length) > 0 && (
<div ref={setCoursesRef} id="details_trekChildren_ref">
<OutdoorCoursesChildrenSection
outdoorChildren={outdoorSiteContent.courses}
id={id}
<DetailsChildrenSection
id="courses"
items={outdoorSiteContent.courses}
title={intl.formatMessage(
{ id: 'outdoorSite.coursesFullTitle' },
{ count: Number(outdoorSiteContent.courses.length) },
{ count: outdoorSiteContent.courses.length },
)}
type="OUTDOOR_COURSE"
/>
</div>
)}
Expand Down Expand Up @@ -304,15 +304,16 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
</DetailsSection>
)}

{Number(outdoorSiteContent?.access?.length) > 0 && (
{Number(outdoorSiteContent.access?.length) > 0 && (
<div ref={setAccessRef} id="details_trekChildren_ref">
<AccessChildrenSection
accessChildren={outdoorSiteContent?.access}
id={id}
<DetailsChildrenSection
id="access"
items={outdoorSiteContent.access}
title={intl.formatMessage(
{ id: 'outdoorSite.accessFullTitle' },
{ count: Number(outdoorSiteContent?.access?.length) },
{ count: outdoorSiteContent.access.length },
)}
type="TREK"
/>
</div>
)}
Expand Down
78 changes: 0 additions & 78 deletions frontend/src/components/pages/site/components/AccessChildrenSection/index.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading