From 64a6d844adbf25e5f7d6ab6a4499b1cb27775297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adriana=20Ceri=C4=87?= <62163307+AdrianaCeric@users.noreply.github.com> Date: Mon, 27 Nov 2023 16:37:23 -0500 Subject: [PATCH 1/6] feat(SavedTripList): Add alert tag on saved trips --- i18n/en-US.yml | 1 + .../user/monitored-trip/saved-trip-list.js | 28 +++++++++++++++++-- lib/components/user/styled.ts | 18 +++++++++++- 3 files changed, 44 insertions(+), 3 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index 08367b1dd..3faa3cca6 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -513,6 +513,7 @@ components: tripNotFoundDescription: Sorry, the requested trip was not found. tripNotifications: Trip notifications SavedTripList: + alertTag: "{alert, plural, one {View one alert} other {View # alerts}}" fromTo: From {from} to {to} myTrips: My trips noSavedTrips: You have no saved trips diff --git a/lib/components/user/monitored-trip/saved-trip-list.js b/lib/components/user/monitored-trip/saved-trip-list.js index bdcf1336c..24211b5f0 100644 --- a/lib/components/user/monitored-trip/saved-trip-list.js +++ b/lib/components/user/monitored-trip/saved-trip-list.js @@ -6,6 +6,7 @@ import { Pause } from '@styled-icons/fa-solid/Pause' import { PencilAlt } from '@styled-icons/fa-solid/PencilAlt' import { Play } from '@styled-icons/fa-solid/Play' import { Trash } from '@styled-icons/fa-solid/Trash' +import { TriangleExclamation } from '@styled-icons/fa-solid/TriangleExclamation' import { withAuthenticationRequired } from '@auth0/auth0-react' import React, { Component } from 'react' @@ -16,6 +17,7 @@ import { InlineLoading } from '../../narrative/loading' import { PageHeading, TripHeader, + TripPanelAlert, TripPanelFooter, TripPanelHeading } from '../styled' @@ -27,6 +29,7 @@ import BackToTripPlanner from '../back-to-trip-planner' import PageTitle from '../../util/page-title' import withLoggedInUserSupport from '../with-logged-in-user-support' +import getRenderData from './trip-status-rendering-strategies' import TripSummaryPane from './trip-summary-pane' /** @@ -72,9 +75,10 @@ class TripListItem extends Component { } render() { - const { trip } = this.props + const { renderData, trip } = this.props const { itinerary } = trip const { legs } = itinerary + const alerts = renderData.alerts // Assuming the monitored itinerary has at least one leg: // - get the 'from' location of the first leg, // - get the 'to' location of the last leg. @@ -83,6 +87,16 @@ class TripListItem extends Component { return ( + {alerts && alerts.length > 0 && ( + + + + + + )} {trip.tripName} @@ -145,6 +159,16 @@ class TripListItem extends Component { } // connect to the redux store +const itemMapStateToProps = (state, ownProps) => { + const { trip } = ownProps + const renderData = getRenderData({ + monitoredTrip: trip + }) + + return { + renderData + } +} const itemMapDispatchToProps = { confirmAndDeleteUserMonitoredTrip: @@ -153,7 +177,7 @@ const itemMapDispatchToProps = { togglePauseTrip: userActions.togglePauseTrip } const ConnectedTripListItem = connect( - null, + itemMapStateToProps, itemMapDispatchToProps )(injectIntl(TripListItem)) diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts index ae2c07e0d..632350479 100644 --- a/lib/components/user/styled.ts +++ b/lib/components/user/styled.ts @@ -1,4 +1,4 @@ -import { Panel } from 'react-bootstrap' +import { Button, Panel } from 'react-bootstrap' import styled, { css } from 'styled-components' export const PageHeading = styled.h2` @@ -48,6 +48,22 @@ export const TripPanelHeading = styled(Panel.Heading)` background-color: white !important; ` +export const TripPanelAlert = styled(Button)` + border: none; + color: red; + cursor: pointer; + float: right; + text-decoration: underline; + + :hover, + :focus, + :active { + background-color: transparent; + color: #d9534f; + text-decoration: underline; + } +` + export const TripPanelFooter = styled(Panel.Footer)` background-color: white !important; padding: 0px; From 4cadccdfabc0310adf139437d0b5ee04e51cfd3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adriana=20Ceri=C4=87?= <62163307+AdrianaCeric@users.noreply.github.com> Date: Mon, 27 Nov 2023 17:07:34 -0500 Subject: [PATCH 2/6] feat(fr.yml): i18n, french --- i18n/fr.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/i18n/fr.yml b/i18n/fr.yml index 9e0995ef6..7b94eac4e 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -532,6 +532,7 @@ components: tripNotFoundDescription: Le trajet recherché est introuvable. tripNotifications: Notifications du trajet SavedTripList: + alertTag: "{alert, plural, one {Afficher une alerte} other {Afficher # alertes}}" fromTo: De {from} à {to} myTrips: Mes trajets noSavedTrips: Vous n'avez aucun trajet enregistré From 4d08edeee7bb0c3d10013dcd4943c4fefbda3196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adriana=20Ceri=C4=87?= <62163307+AdrianaCeric@users.noreply.github.com> Date: Wed, 29 Nov 2023 11:33:25 -0500 Subject: [PATCH 3/6] refactor(TripPanelAlert): make alert tag link --- lib/components/user/styled.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts index 632350479..d3dee73e3 100644 --- a/lib/components/user/styled.ts +++ b/lib/components/user/styled.ts @@ -1,6 +1,8 @@ import { Button, Panel } from 'react-bootstrap' import styled, { css } from 'styled-components' +import { RED_ON_WHITE } from '../util/colors' + export const PageHeading = styled.h2` margin: 10px 0px 45px 0px; ` @@ -48,16 +50,15 @@ export const TripPanelHeading = styled(Panel.Heading)` background-color: white !important; ` -export const TripPanelAlert = styled(Button)` +export const TripPanelAlert = styled.a` border: none; - color: red; + color: ${RED_ON_WHITE}; cursor: pointer; float: right; text-decoration: underline; - :hover, - :focus, - :active { + :hover { + opacity: 90%, background-color: transparent; color: #d9534f; text-decoration: underline; From d324da06a8052e3454e532569eacd3bf305abc6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adriana=20Ceri=C4=87?= <62163307+AdrianaCeric@users.noreply.github.com> Date: Thu, 30 Nov 2023 10:54:59 -0500 Subject: [PATCH 4/6] fix: cleanup alert tag styles --- lib/components/user/styled.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts index d3dee73e3..d5137b6ac 100644 --- a/lib/components/user/styled.ts +++ b/lib/components/user/styled.ts @@ -51,17 +51,14 @@ export const TripPanelHeading = styled(Panel.Heading)` ` export const TripPanelAlert = styled.a` - border: none; color: ${RED_ON_WHITE}; cursor: pointer; float: right; text-decoration: underline; - - :hover { - opacity: 90%, + &:hover { background-color: transparent; - color: #d9534f; - text-decoration: underline; + color: ${RED_ON_WHITE}; + opacity: 80%; } ` From 018b6714f5067c7cdab48c3f7d0a9c1bc6a7d5a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adriana=20Ceri=C4=87?= <62163307+AdrianaCeric@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:21:34 -0500 Subject: [PATCH 5/6] fix: type errors --- lib/components/user/monitored-trip/saved-trip-list.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/components/user/monitored-trip/saved-trip-list.tsx b/lib/components/user/monitored-trip/saved-trip-list.tsx index 754eed741..b4f3768f6 100644 --- a/lib/components/user/monitored-trip/saved-trip-list.tsx +++ b/lib/components/user/monitored-trip/saved-trip-list.tsx @@ -36,6 +36,7 @@ import TripSummaryPane from './trip-summary-pane' interface ItemProps { confirmAndDeleteUserMonitoredTrip: (id: string, intl: IntlShape) => void intl: IntlShape + renderData: any routeTo: (url: any) => void togglePauseTrip: (trip: MonitoredTrip, intl: IntlShape) => void trip: MonitoredTrip @@ -179,7 +180,7 @@ class TripListItem extends Component { } // connect to the redux store -const itemMapStateToProps = (state, ownProps) => { +const itemMapStateToProps = (ownProps: ItemProps) => { const { trip } = ownProps const renderData = getRenderData({ monitoredTrip: trip From f6f30da7d0eb99cce744b024cae1216f7e9453d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adriana=20Ceri=C4=87?= <62163307+AdrianaCeric@users.noreply.github.com> Date: Tue, 5 Dec 2023 15:02:00 -0500 Subject: [PATCH 6/6] fix: pr suggestion --- lib/components/user/monitored-trip/saved-trip-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/user/monitored-trip/saved-trip-list.tsx b/lib/components/user/monitored-trip/saved-trip-list.tsx index b4f3768f6..3dc7284be 100644 --- a/lib/components/user/monitored-trip/saved-trip-list.tsx +++ b/lib/components/user/monitored-trip/saved-trip-list.tsx @@ -99,7 +99,7 @@ class TripListItem extends Component { const { renderData, trip } = this.props const { itinerary } = trip const { legs } = itinerary - const alerts = renderData.alerts + const { alerts } = renderData // Assuming the monitored itinerary has at least one leg: // - get the 'from' location of the first leg, // - get the 'to' location of the last leg.