Skip to content

Commit

Permalink
refactor(itinerary): adapt itinerary-page component to upstream
Browse files Browse the repository at this point in the history
  • Loading branch information
Andreas Helms authored and Andreas Helms committed Nov 21, 2024
1 parent 95078de commit fa37b0f
Show file tree
Hide file tree
Showing 57 changed files with 15,765 additions and 16,458 deletions.
6 changes: 5 additions & 1 deletion app/component/DatetimepickerContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,14 @@ function DatetimepickerContainer(
});
};

const initialTime = match.location.query.time
? parseInt(match.location.query.time, 10)
: undefined;

return (
<Datetimepicker
realtime={realtime}
initialTimestamp={match.location.query.time}
initialTimestamp={initialTime}
initialArriveBy={match.location.query.arriveBy === 'true'}
onTimeChange={onTimeChange}
onDateChange={onDateChange}
Expand Down
21 changes: 11 additions & 10 deletions app/component/SummaryRow.js → app/component/Itinerary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,13 @@ const bikeWasParked = legs => {
return legs.length;
};

const SummaryRow = (
const Itinerary = (
{
data,
breakpoint,
intermediatePlaces,
zones,
onlyHasWalkingItineraries,
hideBorder,
lowestCo2value,
...props
},
Expand Down Expand Up @@ -650,7 +650,7 @@ const SummaryRow = (
passive: props.passive,
'bp-large': breakpoint === 'large',
'cancelled-itinerary': props.isCancelled,
'no-border': onlyHasWalkingItineraries,
'no-border': hideBorder,
},
]);

Expand Down Expand Up @@ -890,7 +890,7 @@ const SummaryRow = (
);
};

SummaryRow.propTypes = {
Itinerary.propTypes = {
refTime: PropTypes.number.isRequired,
data: PropTypes.object.isRequired,
passive: PropTypes.bool,
Expand All @@ -904,22 +904,23 @@ SummaryRow.propTypes = {
showCancelled: PropTypes.bool,
zones: PropTypes.arrayOf(PropTypes.string),
delayThreshold: PropTypes.number,
onlyHasWalkingItineraries: PropTypes.bool,
hideBorder: PropTypes.bool,
lowestCo2value: PropTypes.number,
};

SummaryRow.defaultProps = {
Itinerary.defaultProps = {
zones: [],
hideBorder: false,
lowestCo2value: 0,
};

SummaryRow.contextTypes = {
Itinerary.contextTypes = {
intl: intlShape.isRequired,
config: PropTypes.object.isRequired,
};

SummaryRow.displayName = 'SummaryRow';
Itinerary.displayName = 'Itinerary';

const SummaryRowWithBreakpoint = withBreakpoint(SummaryRow);
const ItineraryWithBreakpoint = withBreakpoint(Itinerary);

export { SummaryRow as component, SummaryRowWithBreakpoint as default };
export { Itinerary as component, ItineraryWithBreakpoint as default };
162 changes: 81 additions & 81 deletions app/component/ItineraryTab.js → app/component/ItineraryDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,23 +52,25 @@ const TripShape = PropTypes.shape({
}),
});

const ItineraryShape = PropTypes.shape({
legs: PropTypes.arrayOf(
PropTypes.shape({
route: RouteShape,
trip: TripShape,
distance: PropTypes.number,
fares: PropTypes.arrayOf(FareShape),
emissionsPerPerson: PropTypes.shape({
co2: PropTypes.number,
const ItineraryShape = PropTypes.oneOfType([
PropTypes.any,
PropTypes.shape({
legs: PropTypes.arrayOf(
PropTypes.shape({
route: RouteShape,
trip: TripShape,
distance: PropTypes.number,
fares: PropTypes.arrayOf(FareShape),
}),
),
emissionsPerPerson: PropTypes.shape({
co2: PropTypes.number,
}),
),
fares: PropTypes.arrayOf(FareShape),
});
}),
]);

/* eslint-disable prettier/prettier */
class ItineraryTab extends React.Component {
class ItineraryDetails extends React.Component {
static propTypes = {
plan: PropTypes.shape({
date: PropTypes.number.isRequired,
Expand Down Expand Up @@ -101,24 +103,26 @@ class ItineraryTab extends React.Component {
fetchedFares: false,
};

handleFocus = (lat, lon) => {
handleFocus(lat, lon) {
this.props.focusToPoint(lat, lon);
};
}

shouldShowDisclaimer = config => {
shouldShowDisclaimer(config) {
return (
config.showDisclaimer &&
this.context.match.params.hash !== 'walk' &&
this.context.match.params.hash !== 'bike'
);
};
}

shouldShowCarpoolDisclaimer = (itinerary, config) => {
const hasCarpoolLegs = itinerary.legs.some(l => l.mode === 'CARPOOL');
shouldShowCarpoolDisclaimer(config) {
const hasCarpoolLegs = this.props.itinerary.legs.some(
l => l.mode === 'CARPOOL',
);
return hasCarpoolLegs && config.carpoolDisclaimer;
};
}

printItinerary = e => {
printItinerary(e) {
e.stopPropagation();

addAnalyticsEvent({
Expand All @@ -133,9 +137,9 @@ class ItineraryTab extends React.Component {
...this.context.match.location,
pathname: printPath,
});
};
}

getFutureText = (startTime, currentTime) => {
getFutureText(startTime, currentTime) {
const refTime = getCurrentMillis(currentTime);
if (isToday(startTime, refTime)) {
return '';
Expand All @@ -146,9 +150,9 @@ class ItineraryTab extends React.Component {
});
}
return getFormattedTimeDate(startTime, 'dd D.M.');
};
}

setExtraProps = itinerary => {
getExtraProps(itinerary) {
const compressedItinerary = {
...itinerary,
legs: compressLegs(itinerary.legs),
Expand Down Expand Up @@ -184,7 +188,7 @@ class ItineraryTab extends React.Component {
isMultiRow,
};
return extraProps;
};
}

componentDidMount() {
const { itinerary } = this.props;
Expand Down Expand Up @@ -214,7 +218,7 @@ class ItineraryTab extends React.Component {
const { itinerary } = this.props;
const { config } = this.context;

if (!itinerary || !itinerary.legs[0]) {
if (!itinerary?.legs[0]) {
return null;
}

Expand All @@ -224,7 +228,7 @@ class ItineraryTab extends React.Component {
config,
this.state.lang,
);
const extraProps = this.setExtraProps(itinerary);
const extraProps = this.getExtraProps(itinerary);
const legsWithRentalBike = compressLegs(itinerary.legs).filter(leg =>
legContainsRentalBike(leg),
);
Expand Down Expand Up @@ -252,67 +256,57 @@ class ItineraryTab extends React.Component {
}
}

const suggestionIndex = this.context.match.params.secondHash
? Number(this.context.match.params.secondHash) + 1
: Number(this.context.match.params.hash) + 1;
let itineraryIndex = this.context.match.params.secondHash
? Number(this.context.match.params.secondHash)
: Number(this.context.match.params.hash);

if (Number.isNaN(itineraryIndex)) {
itineraryIndex = 1;
} else {
itineraryIndex += 1;
}
return (
<div className="itinerary-tab">
<h2 className="sr-only">
<h2 className="sr-only" key="srlabel">
<FormattedMessage
id="summary-page.row-label"
values={{
number: suggestionIndex,
number: itineraryIndex,
}}
/>
</h2>
<BreakpointConsumer>
{breakpoint => [
breakpoint !== 'large' ? (
<ItinerarySummary
itinerary={itinerary}
key="summary"
walking={extraProps.walking}
biking={extraProps.biking}
driving={extraProps.driving}
futureText={extraProps.futureText}
isMultiRow={extraProps.isMultiRow}
isMobile={this.props.isMobile}
/>
) : (
<>
{!this.props.hideTitle && (
<div className="desktop-title" key="header">
<div className="title-container h2">
<BackButton
title={
<FormattedMessage
id="itinerary-page.title"
defaultMessage="Itinerary suggestions"
/>
}
icon="icon-icon_arrow-collapse--left"
iconClassName="arrow-icon"
fallback="pop"
breakpoint === 'large' && !this.props.hideTitle && (
<div className="desktop-title" key="header">
<div className="title-container h2">
<BackButton
title={
<FormattedMessage
id="itinerary-page.title"
defaultMessage="Itinerary suggestions"
/>
</div>
</div>
)}
<div className="itinerary-summary-container">
<ItinerarySummary
itinerary={itinerary}
key="summary"
walking={extraProps.walking}
biking={extraProps.biking}
driving={extraProps.driving}
futureText={extraProps.futureText}
isMultiRow={extraProps.isMultiRow}
isMobile={this.props.isMobile}
}
icon="icon-icon_arrow-collapse--left"
iconClassName="arrow-icon"
fallback="pop"
/>
</div>
</>
</div>
),
<ItinerarySummary
itinerary={itinerary}
key="summary"
walking={extraProps.walking}
biking={extraProps.biking}
driving={extraProps.driving}
futureText={extraProps.futureText}
isMultiRow={extraProps.isMultiRow}
isMobile={this.props.isMobile}
/>,
showRentalBikeDurationWarning && (
<CityBikeDurationInfo
key="citybikedurationinfo"
networks={Array.from(rentalBikeNetworks)}
config={config}
/>
Expand All @@ -327,6 +321,7 @@ class ItineraryTab extends React.Component {
className={cx('itinerary-main', {
'bp-large': breakpoint === 'large',
})}
key="legwrapper"
>
{shouldShowFareInfo(config) &&
config.displayFareInfoTop &&
Expand All @@ -350,6 +345,7 @@ class ItineraryTab extends React.Component {
)}
{config.showCO2InItinerarySummary && (
<EmissionsInfo
key="emissionssummary"
itinerary={itinerary}
isMobile={this.props.isMobile}
/>
Expand All @@ -362,8 +358,11 @@ class ItineraryTab extends React.Component {
focusToStep={this.props.focusToStep}
toggleCarpoolDrawer={this.props.toggleCarpoolDrawer}
/>
{this.shouldShowCarpoolDisclaimer(itinerary, config) && (
<div className="itinerary-disclaimer">
{this.shouldShowCarpoolDisclaimer(config) && (
<div
className="itinerary-disclaimer"
key="carpool-disclaimer"
>
<div className="info-container">
<div className="icon-container">
<Icon className="info" img="icon-icon_info" />
Expand All @@ -376,6 +375,7 @@ class ItineraryTab extends React.Component {
)}
{shouldShowFareInfo(config) && (
<TicketInformation
key="ticketinformation"
fares={fares}
zones={getZones(itinerary.legs)}
legs={itinerary.legs}
Expand All @@ -385,14 +385,14 @@ class ItineraryTab extends React.Component {
{config.showRouteInformation && <RouteInformation />}
</div>
{this.shouldShowDisclaimer(config) && (
<div className="itinerary-disclaimer">
<div className="itinerary-disclaimer" key="disclaimer">
<FormattedMessage
id="disclaimer"
defaultMessage="Results are based on estimated travel times"
/>
</div>
)}
<div className="itinerary-empty-space" />
<div className="itinerary-empty-space" key="emptyspace" />
</div>,
]}
</BreakpointConsumer>
Expand All @@ -402,17 +402,17 @@ class ItineraryTab extends React.Component {
}

const withRelay = createFragmentContainer(
connectToStores(ItineraryTab, ['TimeStore'], context => ({
connectToStores(ItineraryDetails, ['TimeStore'], context => ({
currentTime: context.getStore('TimeStore').getCurrentTime().unix(),
})),
{
plan: graphql`
fragment ItineraryTab_plan on Plan {
fragment ItineraryDetails_plan on Plan {
date
}
`,
itinerary: graphql`
fragment ItineraryTab_itinerary on Itinerary {
fragment ItineraryDetails_itinerary on Itinerary {
walkDistance
duration
startTime
Expand Down Expand Up @@ -668,4 +668,4 @@ const withRelay = createFragmentContainer(
},
);

export { ItineraryTab as Component, withRelay as default };
export { ItineraryDetails as Component, withRelay as default };
0 ...nts/components/ChangeDepartureTimeLink.js → .../ItineraryList/ChangeDepartureTimeLink.js
View file
File renamed without changes.
Loading

0 comments on commit fa37b0f

Please sign in to comment.