Merge pull request #2586 from HSLdevcom/revert-2572-refactor-router

Revert "Refactor Router"

app/component/StopPage.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Relay, { Route } from 'react-relay/classic';
+import connectToStores from 'fluxible-addons-react/connectToStores';
+import withState from 'recompose/withState';
+import moment from 'moment';
+import StopPageContentContainer from './StopPageContentContainer';
+
+const initialDate = moment().format('YYYYMMDD');
+
+class StopPageContainerRoute extends Route {
+  static queries = {
+    stop: (RelayComponent, variables) => Relay.QL`
+      query {
+        stop(id: $stopId) {
+          ${RelayComponent.getFragment('stop', variables)}
+        }
+      }
+    `,
+  };
+  static paramDefinitions = {
+    startTime: { required: true },
+    timeRange: { required: true },
+    numberOfDepartures: { required: true },
+  };
+  static routeName = 'StopPageContainerRoute';
+}
+
+const StopPageRootContainer = routeProps => (
+  <Relay.Renderer
+    Container={StopPageContentContainer}
+    queryConfig={
+      new StopPageContainerRoute({
+        stopId: routeProps.params.stopId,
+        ...routeProps,
+      })
+    }
+    environment={Relay.Store}
+    render={({ props, done }) =>
+      done ? (
+        <StopPageContentContainer
+          {...props}
+          initialDate={initialDate}
+          setDate={routeProps.setDate}
+        />
+      ) : (
+        undefined
+      )
+    }
+  />
+);
+
+const StopPageContainerWithState = withState('date', 'setDate', initialDate)(
+  StopPageRootContainer,
+);
+
+export default connectToStores(
+  StopPageContainerWithState,
+  ['TimeStore', 'FavouriteStopsStore'],
+  ({ getStore }) => ({
+    startTime: getStore('TimeStore')
+      .getCurrentTime()
+      .unix(),
+    timeRange: 3600 * 12,
+    numberOfDepartures: 100,
+  }),
+);

app/component/StopPageContentContainer.js

@@ -1,85 +1,159 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Relay from 'react-relay/classic';
+import some from 'lodash/some';
+import mapProps from 'recompose/mapProps';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 
+import StopPageTabContainer from './StopPageTabContainer';
 import DepartureListHeader from './DepartureListHeader';
 import DepartureListContainer from './DepartureListContainer';
+import TimetableContainer from './TimetableContainer';
 import Error404 from './404';
+import withBreakpoint from '../util/withBreakpoint';
 
-class StopPageContent extends React.Component {
+class StopPageContentOptions extends React.Component {
   static propTypes = {
-    params: PropTypes.oneOfType([
-      PropTypes.shape({ stopId: PropTypes.string.isRequired }).isRequired,
-      PropTypes.shape({ terminalId: PropTypes.string.isRequired }).isRequired,
-    ]).isRequired,
-    stop: PropTypes.shape({
-      stoptimes: PropTypes.array,
+    printUrl: PropTypes.string,
+    departureProps: PropTypes.shape({
+      stop: PropTypes.shape({
+        stoptimes: PropTypes.array,
+      }).isRequired,
     }).isRequired,
     relay: PropTypes.shape({
       variables: PropTypes.shape({
-        startTime: PropTypes.string.isRequired,
+        date: PropTypes.string.isRequired,
       }).isRequired,
       setVariables: PropTypes.func.isRequired,
     }).isRequired,
+    initialDate: PropTypes.string.isRequired,
+    setDate: PropTypes.func.isRequired,
     currentTime: PropTypes.number.isRequired,
   };
 
+  static defaultProps = {
+    printUrl: null,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showTab: 'right-now', // Show right-now as default
+    };
+  }
+
   componentWillReceiveProps({ relay, currentTime }) {
     const currUnix = this.props.currentTime;
     if (currUnix !== currentTime) {
-      relay.setVariables({ startTime: String(currUnix) });
+      relay.setVariables({ startTime: currUnix });
     }
   }
 
-  render() {
-    if (!this.props.stop) {
-      return <Error404 />;
-    }
+  onDateChange = ({ target }) => {
+    this.props.setDate(target.value);
+  };
+
+  setTab = val => {
+    this.setState({
+      showTab: val,
+    });
+  };
 
+  render() {
+    // Currently shows only next departures, add Timetables
     return (
-      <React.Fragment>
-        <DepartureListHeader />
-        <div className="stop-scroll-container momentum-scroll">
-          <DepartureListContainer
-            stoptimes={this.props.stop.stoptimes}
-            key="departures"
-            className="stop-page momentum-scroll"
-            routeLinks
-            infiniteScroll
-            isTerminal={!this.props.params.stopId}
-            rowClasses="padding-normal border-bottom"
-            currentTime={this.props.currentTime}
-            showPlatformCodes
-          />
+      <div className="stop-page-content-wrapper">
+        <div>
+          <StopPageTabContainer selectedTab={this.setTab} />
+          <div className="stop-tabs-fillerline" />
+          {this.state.showTab === 'right-now' && <DepartureListHeader />}
         </div>
-      </React.Fragment>
+        {this.state.showTab === 'right-now' && (
+          <div className="stop-scroll-container momentum-scroll">
+            <DepartureListContainerWithProps {...this.props.departureProps} />
+          </div>
+        )}
+        {this.state.showTab === 'timetable' && (
+          <TimetableContainer
+            stop={this.props.departureProps.stop}
+            date={this.props.relay.variables.date}
+            propsForStopPageActionBar={{
+              printUrl: this.props.printUrl,
+              startDate: this.props.initialDate,
+              selectedDate: this.props.relay.variables.date,
+              onDateChange: this.onDateChange,
+            }}
+          />
+        )}
+      </div>
     );
   }
 }
 
+const DepartureListContainerWithProps = mapProps(props => ({
+  stoptimes: props.stop.stoptimes,
+  key: 'departures',
+  className: 'stop-page momentum-scroll',
+  routeLinks: true,
+  infiniteScroll: true,
+  isTerminal: !props.params.stopId,
+  rowClasses: 'padding-normal border-bottom',
+  currentTime: props.relay.variables.startTime,
+  showPlatformCodes: true,
+}))(DepartureListContainer);
+
+const StopPageContent = withBreakpoint(
+  props =>
+    some(props.routes, 'fullscreenMap') &&
+    props.breakpoint !== 'large' ? null : (
+      <StopPageContentOptions
+        printUrl={props.stop.url}
+        departureProps={props}
+        relay={props.relay}
+        initialDate={props.initialDate}
+        setDate={props.setDate}
+        currentTime={props.currentTime}
+      />
+    ),
+);
+
+const StopPageContentOrEmpty = props => {
+  if (props.stop) {
+    return <StopPageContent {...props} />;
+  }
+  return <Error404 />;
+};
+
+StopPageContentOrEmpty.propTypes = {
+  stop: PropTypes.shape({
+    url: PropTypes.string,
+  }).isRequired,
+};
+
 export default Relay.createContainer(
-  connectToStores(StopPageContent, ['TimeStore'], ({ getStore }) => ({
+  connectToStores(StopPageContentOrEmpty, ['TimeStore'], ({ getStore }) => ({
     currentTime: getStore('TimeStore')
       .getCurrentTime()
       .unix(),
   })),
   {
     fragments: {
-      stop: () => Relay.QL`
+      stop: ({ date }) => Relay.QL`
       fragment on Stop {
         url
         stoptimes: stoptimesWithoutPatterns(startTime: $startTime, timeRange: $timeRange, numberOfDepartures: $numberOfDepartures) {
           ${DepartureListContainer.getFragment('stoptimes')}
         }
+        ${TimetableContainer.getFragment('stop', { date })}
       }
     `,
     },
 
     initialVariables: {
-      startTime: String(0),
+      startTime: 0,
       timeRange: 3600 * 12,
       numberOfDepartures: 100,
+      date: null,
     },
   },
 );