WIP: React intl ramp up #408

binh-dam-ibigroup · 2021-07-08T18:28:37Z

This PR adds localization support to OTP-RR.

binh-dam-ibigroup · 2021-07-15T13:50:35Z

lib/components/narrative/line-itin/itin-summary.js

+              {itinerary.transfers > 1
+                ? <FormattedMessage id='components.ItinerarySummary.transferPlural' />
+                : <FormattedMessage id='components.ItinerarySummary.transfer' />


Use <FormatterPlural> for this case, see https://formatjs.io/docs/react-intl/components#formattedplural

Should be addressed as of 4bbbe49

binh-dam-ibigroup · 2021-07-15T13:53:34Z

lib/components/narrative/line-itin/itin-summary.js

+              <FormattedNumber
+                value={minTotalFare / 100}
+                style='currency'
+                currencyDisplay='narrowSymbol'
+                currency={currency}
+              />
+              {minTotalFare !== maxTotalFare &&
+                <span> -
+                  <FormattedNumber
+                    value={maxTotalFare / 100}
+                    style='currency'
+                    currencyDisplay='narrowSymbol'
+                    currency={currency}
+                  />
+                </span>}


This is a concat; it needs to be turned into a conditional message.

Should be addressed as of 4bbbe49

binh-dam-ibigroup · 2021-07-15T21:24:47Z

lib/components/narrative/line-itin/itin-summary.js

-            {Math.round(caloriesBurned)} Cals
+            {Math.round(caloriesBurned)} <FormattedMessage id='components.ItinerarySummary.calories' />


I found multiple spellings for the Calories abbreviation:

This component (used in mobile view of itinerary results) displays "Cals" (as in "100 Cals").

The tabbed itinerary summary (in desktop view) displays "Cal" (as in "100 Cal").
I am in favor of merging the two and say, in English, "100 Cal".

I have changed the components I touched to "Cal" as of 4bbbe49

binh-dam-ibigroup · 2021-07-15T22:56:25Z

lib/components/narrative/line-itin/itin-summary.js

          <Detail>
-            {coreUtils.time.formatTime(itinerary.startTime, timeOptions)} - {coreUtils.time.formatTime(itinerary.endTime, timeOptions)}
+            <FormattedTime
+              startTime={itinerary.startTime}


Need to pass a message id.

Updated as of 4bbbe49

binh-dam-ibigroup · 2021-07-20T15:35:35Z

i18n/en-US.yml

+      true {{minTotalFare} - {maxTotalFare}}
+      false {{minTotalFare}}
+    }}"
+    transfers: "{transfers} {transfers, plural, =0 {Transfer} other {Transfers}"


There is an issue with this expression:

In example.js, set:

ItineraryBody: LineItinerary, // (add import)

and make an itinerary search in mobile view.

This should be addressed in the latest commit (1fbee66)

…er/otp-react-redux into react-intl-ramp-up

…routes.

binh-dam-ibigroup · 2021-08-03T21:32:23Z

lib/components/user/monitored-trip/trip-status-rendering-strategies/base-renderer.js

 * component. The monitoredTrip param can be undefined.
 */
 export default function baseRenderer (monitoredTrip) {
+  const intl = useIntl()


Tricky: baseRenderer is not a component and not a functional component, so this call fails when rendering a trip detail page.

This would hold for changes to active-trip-renderer as well:

otp-react-redux/lib/components/user/monitored-trip/trip-status-rendering-strategies/active-trip-renderer.js

Lines 12 to 17 in 09664bd

export default function activeTripRenderer ({

monitoredTrip,

onTimeThresholdSeconds,

timeFormat

}) {

const intl = useIntl()

Both should be addressed in 6c54a1e

binh-dam-ibigroup · 2021-08-03T22:13:34Z

i18n/en-US.yml

+  BaseRenderer: 
+    bodyDefault: Unknown Trip State
+    lastCheckedDefaultText: Last checked time unknown
+    LastCheckedText: "Last checked: {formattedDuration} ago"


Should be lastCheckedText (lower case l)

addressed in 6c54a1e

binh-dam-ibigroup · 2021-08-03T22:15:28Z

i18n/en-US.yml

+      true {Unsnooze trip analysis}
+      other {Snooze for rest of today}


These should probably two separate messages.

Separated into tripIsNotSnoozed and tripIsSnoozed messages in 6c54a1e

binh-dam-ibigroup · 2021-08-20T19:23:33Z

i18n/en-US.yml

+    departure: DEPARTURE
+    status: STATUS


@philip-cline These table headings should be first letter capitalized here. To render them all-caps, there should be some CSS for the corresponding elements in viewers.css.

IMO, departure and status should be under components.PatternRow, or is there a reason to place them under common?

Both of these addressed in 8a8cfae, I had put the messages under common in case they would be used in the future by another component.

… component.

philip-cline · 2021-08-31T17:41:01Z

lib/components/form/settings-preview.js

+  )
+  // Add tall class to account for vertical centering if there is only
+  // one line in the label (default is 2).
+  const addClass = messages.label.match(/\n/) ? '' : ' tall'


What is the appropriate way to apply styles and formatting here? Right now we're relying on a multi line string in the i18n files

…mponent

…er/otp-react-redux into react-intl-ramp-up

github-actions · 2021-12-16T11:51:46Z

🎉 This PR is included in version 3.8.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

binh-dam-ibigroup assigned binh-dam-ibigroup and philip-cline Jul 8, 2021

binh-dam-ibigroup changed the base branch from dev to react-intl July 8, 2021 18:29

binh-dam-ibigroup added the WIP Work in progress label Jul 8, 2021

binh-dam-ibigroup changed the base branch from react-intl to dev July 15, 2021 13:44

binh-dam-ibigroup commented Jul 15, 2021

View reviewed changes

binh-dam-ibigroup commented Jul 20, 2021

View reviewed changes

philip-cline and others added 17 commits July 21, 2021 09:58

improvement(active-trip-renderer): Localize component

bc6a0b3

Merge branch 'react-intl-ramp-up' of https://github.com/opentripplann…

3b867ef

…er/otp-react-redux into react-intl-ramp-up

improvement(base-renderer): Localize Base Renderer

b66a0fd

Merge branch 'dev' into react-intl-ramp-up

ab18e82

style(narrative-itinerary-header): order keys properly

34de016

style(linting):

32becd7

refactor(lint): Fix lint errors

e5732d9

Merge branch 'react-intl-ramp-up' of https://github.com/opentripplann…

a4d07a0

…er/otp-react-redux into react-intl-ramp-up

refactor(components/user): Localize more user components.

60a16bc

refactor(i18n,NotificationPrefsPane): Localize components

c6c131f

refactor(i18n, user): Localize more user settings components.

f135b16

refactor(i18n, user): Localize more user components.

e25f3b8

refactor(i1un,user): Localize more user settings components.

8d8928b

refactor(ResponsiveWebapp): Initialize locale when laoding other url …

486e8b2

…routes.

refactor(NavLoginButton): Localize component.

d302718

test(create-otp-reducer): Update snapshot

4b5f8b9

refactor(TripSummary): Localize TripSummary, TripSummaryPane

5587e2a

binh-dam-ibigroup commented Aug 3, 2021

View reviewed changes

binh-dam-ibigroup commented Aug 20, 2021

View reviewed changes

evansiroky and others added 15 commits August 22, 2021 18:39

refactor: add i18n for map actions

fdac844

refactor: properly call formatMessage and use inline message defs

85d40b9

refactor: add i18n for user actions

a059a5c

refactor: add i18n to app-menu and batch-routing-panel

702975d

refactor(util/state): Localize state error messages.

62f9ef0

refactor(util/state): Add i18n support for errorMessages in config.yml.

df7ef73

chore(i18n/fr-FR): Add missing translations

79a52fe

refactor(i18n): Move startOver string to common category.

45add91

refactor(util/state): Localize title bar logic.

ebe2068

refactor(PrintLayout): Localize component.

a597dd0

refactor(NotFound): Localize component.

68ee3c0

refactor(StopTimeCell): Localize component

2130b24

refactor(form buttons): Localize Add Place and Plan Trip buttons.

293f8e9

refactor(PatternRow): move formatting to CSS class

8a8cfae

refactor(SettingsPreview): Localize component, refactor as functional…

16ff909

… component.

philip-cline reviewed Aug 31, 2021

View reviewed changes

philip-cline force-pushed the react-intl-ramp-up branch from 9cb3305 to 16ff909 Compare August 31, 2021 18:25

philip-cline and others added 8 commits August 31, 2021 14:50

refactor(SwitchButton): Localize component, refactor as functional co…

47fc0dd

…mponent

refactor(TabbedFormPanel): Localize component

889152b

refactor(UserTripSettings): Localize component

db4f615

refactor(BatchSettings,ModeButton): Localize components.

879a9da

Merge branch 'react-intl-ramp-up' of https://github.com/opentripplann…

58d0b25

…er/otp-react-redux into react-intl-ramp-up

refactor(UserSettings): localize component

7e4610e

refactor(Merge dev): Merge dev & refactor a few small components

b9ac4ba

refactor(PatternRow): Add ARIA roles

1b7c65c

binh-dam-ibigroup merged commit bf1d2d6 into dev Nov 24, 2021

github-actions bot added the released label Dec 16, 2021

binh-dam-ibigroup deleted the react-intl-ramp-up branch December 18, 2023 22:11

		{Math.round(caloriesBurned)} Cals
		{Math.round(caloriesBurned)} <FormattedMessage id='components.ItinerarySummary.calories' />

	export default function activeTripRenderer ({
	monitoredTrip,
	onTimeThresholdSeconds,
	timeFormat
	}) {
	const intl = useIntl()

		true {Unsnooze trip analysis}
		other {Snooze for rest of today}

WIP: React intl ramp up #408

WIP: React intl ramp up #408

Uh oh!

Conversation

binh-dam-ibigroup commented Jul 8, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

philip-cline Jul 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

philip-cline Aug 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

philip-cline Jul 20, 2021 •

edited

Loading

philip-cline Aug 4, 2021 •

edited

Loading