Merge pull request #5802 from HSLdevcom/AB#565

AB#565 stop page fixes

Author: sharhio

app/component/stop/Timetable.js

@@ -6,11 +6,9 @@ import sortBy from 'lodash/sortBy';
 import groupBy from 'lodash/groupBy';
 import padStart from 'lodash/padStart';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { matchShape, routerShape } from 'found';
 import { useFragment } from 'react-relay';
-import { connectToStores } from 'fluxible-addons-react';
 import cx from 'classnames';
-import { configShape } from '../../util/shapes';
+import { useRouter } from 'found';
 import Icon from '../Icon';
 import FilterTimeTableModal from './FilterTimeTableModal';
 import TimeTableOptionsPanel from './TimeTableOptionsPanel';
@@ -23,6 +21,7 @@ import ScrollableWrapper from '../ScrollableWrapper';
 import { replaceQueryParams } from '../../util/queryUtils';
 import { PREFIX_STOPS } from '../../util/path';
 import { TimetableFragment } from './queries/TimetableFragment';
+import { useConfigContext } from '../../configurations/ConfigContext';
 
 const mapStopTimes = stoptimesObject =>
   stoptimesObject
@@ -135,10 +134,14 @@ const createTimeTableRows = (timetableMap, showRoutes) =>
       />
     ));
 
-function Timetable(
-  { stop: stopRef, startDate, onDateChange, date, language },
-  { router, match, config },
-) {
+export default function Timetable({
+  stop: stopRef,
+  startDate,
+  onDateChange,
+  date,
+}) {
+  const { match, router } = useRouter();
+  const config = useConfigContext();
   const stop = useFragment(TimetableFragment, stopRef);
   const intl = useIntl();
   if (!stop) {
@@ -259,7 +262,7 @@ function Timetable(
           config.URL.STOP_TIMETABLES[stopIdSplitted[0]],
           stop,
           date,
-          language,
+          config.language,
         )
       : null;
   const virtualMonitorUrl =
@@ -477,23 +480,4 @@ Timetable.propTypes = {
   startDate: PropTypes.string.isRequired,
   onDateChange: PropTypes.func.isRequired,
   date: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
 };
-
-Timetable.contextTypes = {
-  router: routerShape.isRequired,
-  match: matchShape.isRequired,
-  config: configShape.isRequired,
-};
-
-Timetable.displayName = 'Timetable';
-
-const connectedComponent = connectToStores(
-  Timetable,
-  ['PreferencesStore'],
-  context => ({
-    language: context.getStore('PreferencesStore').getLanguage(),
-  }),
-);
-
-export { connectedComponent as default, Timetable as Component };

app/configurations/config.default.js

@@ -755,7 +755,7 @@ export default {
     itinerary: false,
   },
 
-  viaPointsEnabled: false,
+  viaPointsEnabled: true,
   viaPointsMax: 1,
 
   // Toggling this off shows the alert bodytext instead of the header

app/configurations/config.hsl.js

@@ -818,5 +818,4 @@ export default {
 
   showRouteDescNotification: IS_DEV,
   personalization: false,
-  viaPointsEnabled: true,
 };

app/configurations/config.matka.js

@@ -474,5 +474,4 @@ export default {
 
   showStopStatusMarkers: true,
   showRouteDescNotification: IS_DEV,
-  viaPointsEnabled: true,
 };

app/configurations/config.varely.js

@@ -122,7 +122,6 @@ export default configMerger(walttiConfig, {
 
   /* Enable real-time map layer for vehicle positions */
   vehicles: false,
-  viaPointsEnabled: false,
 
   aboutThisService: {
     fi: [

app/configurations/config.waltti.js

@@ -286,7 +286,6 @@ export default {
   },
   analyticsClass: 'plausible-event-name=Ticket+Purchase+Link',
 
-  viaPointsEnabled: false,
   hideNaviTickets: true, // TODO: temporary force switch
   navigation: true,
 

sass/base/_base.scss

@@ -55,6 +55,7 @@ body {
   font-family: $font-family;
   font-weight: $font-weight-medium;
   letter-spacing: $letter-spacing;
+  width: 100%;
   height: 100%;
   margin: 0;
   color: $black !important;
@@ -68,6 +69,7 @@ body {
 }
 
 #app {
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;

test/unit/component/Timetable.test.js

@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import React from 'react';
 import { mockContext } from '../helpers/mock-context';
-import { Component as Timetable } from '../../../app/component/stop/Timetable';
+import Timetable from '../../../app/component/stop/Timetable';
 import TimetableRow from '../../../app/component/stop/TimetableRow';
 import SecondaryButton from '../../../app/component/SecondaryButton';
 import { shallowWithIntl } from '../helpers/mock-intl-enzyme';
@@ -70,13 +70,11 @@ describe('<Timetable />', () => {
   it('should set valid stopPDFURL for StopPageActionBar', () => {
     const baseTimetableURL = 'https://timetabletest.com/stops/';
     const wrapper = shallowWithIntl(<Timetable {...props} />, {
-      context: {
-        ...mockContext,
-        config: {
-          CONFIG: 'default',
-          URL: { STOP_TIMETABLES: { HSL: baseTimetableURL } },
-          timetables: { HSL: timetables.default.HSL },
-        },
+      context: { ...mockContext },
+      config: {
+        CONFIG: 'default',
+        URL: { STOP_TIMETABLES: { HSL: baseTimetableURL } },
+        timetables: { HSL: timetables.default.HSL },
       },
     });
     expect(wrapper.find(SecondaryButton)).to.have.lengthOf(2);