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

refactor(itinerary): adapt itinerary-page component to upstream #825

Closed
wants to merge 1 commit into from
Closed

refactor(itinerary): adapt itinerary-page component to upstream #825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 5 additions & 1 deletion app/component/DatetimepickerContainer.js
View file
Open in desktop
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
7 changes: 4 additions & 3 deletions app/component/Itinerary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ const Itinerary = (
breakpoint,
intermediatePlaces,
zones,
onlyHasWalkingItineraries,
hideBorder,
lowestCo2value,
...props
},
Expand Down Expand Up @@ -650,7 +650,7 @@ const Itinerary = (
passive: props.passive,
'bp-large': breakpoint === 'large',
'cancelled-itinerary': props.isCancelled,
'no-border': onlyHasWalkingItineraries,
'no-border': hideBorder,
},
]);

Expand Down Expand Up @@ -904,12 +904,13 @@ Itinerary.propTypes = {
showCancelled: PropTypes.bool,
zones: PropTypes.arrayOf(PropTypes.string),
delayThreshold: PropTypes.number,
onlyHasWalkingItineraries: PropTypes.bool,
hideBorder: PropTypes.bool,
lowestCo2value: PropTypes.number,
};

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

Expand Down
152 changes: 76 additions & 76 deletions app/component/ItineraryDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,20 +52,22 @@ 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 ItineraryDetails extends React.Component {
Expand Down Expand Up @@ -101,24 +103,26 @@ class ItineraryDetails 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 ItineraryDetails 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 ItineraryDetails 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 ItineraryDetails extends React.Component {
isMultiRow,
};
return extraProps;
};
}

componentDidMount() {
const { itinerary } = this.props;
Expand Down Expand Up @@ -214,7 +218,7 @@ class ItineraryDetails 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 ItineraryDetails 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 ItineraryDetails 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 ItineraryDetails extends React.Component {
className={cx('itinerary-main', {
'bp-large': breakpoint === 'large',
})}
key="legwrapper"
>
{shouldShowFareInfo(config) &&
config.displayFareInfoTop &&
Expand All @@ -350,6 +345,7 @@ class ItineraryDetails extends React.Component {
)}
{config.showCO2InItinerarySummary && (
<EmissionsInfo
key="emissionssummary"
itinerary={itinerary}
isMobile={this.props.isMobile}
/>
Expand All @@ -362,8 +358,11 @@ class ItineraryDetails 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 ItineraryDetails extends React.Component {
)}
{shouldShowFareInfo(config) && (
<TicketInformation
key="ticketinformation"
fares={fares}
zones={getZones(itinerary.legs)}
legs={itinerary.legs}
Expand All @@ -385,14 +385,14 @@ class ItineraryDetails 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 Down
8 changes: 1 addition & 7 deletions app/component/ItineraryList/ItineraryList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ function ItineraryList(
showAlternativePlan,
separatorPosition,
loadingMoreItineraries,
loading,
driving,
onlyHasWalkingItineraries,
routingErrors,
Expand Down Expand Up @@ -81,7 +80,7 @@ function ItineraryList(
intermediatePlaces={intermediatePlaces}
isCancelled={itineraryHasCancelation(itinerary)}
showCancelled={showCancelled}
onlyHasWalkingItineraries={onlyHasWalkingItineraries}
hideBorder={onlyHasWalkingItineraries}
zones={
config.zones.stops && itinerary.legs ? getZones(itinerary.legs) : []
}
Expand Down Expand Up @@ -145,10 +144,6 @@ function ItineraryList(
);
}

if (loading) {
return null;
}

const canceledItinerariesCount = itineraries.filter(itineraryHasCancelation)
.length;
return (
Expand Down Expand Up @@ -316,7 +311,6 @@ ItineraryList.propTypes = {
showAlternativePlan: PropTypes.bool,
separatorPosition: PropTypes.number,
loadingMoreItineraries: PropTypes.string,
loading: PropTypes.bool.isRequired,
onlyHasWalkingItineraries: PropTypes.bool,
};

Expand Down
Loading