WIP

app/graphql/resolvers/departures/timetable.rb

@@ -5,11 +5,11 @@ class Timetable < BaseCollection
 
       argument :from, String, required: true, description: 'Name of stop from which you want start'
       argument :to, String, required: true, description: 'Name of final stop of direction'
-      argument :at, Arguments::Time, required: true, description: 'Time of departure'
+      argument :at, Arguments::Time, required: false, description: 'Time of departure'
       argument :day, Enums::DepartureKind, required: false, description: 'For what day, ignored if at is added'
       argument :line, String, required: true, description: 'Name of line you want timetable'
 
-      def resolve(from:, to:, day: nil, line:)
+      def resolve(from:, to:, day: nil, line:, at: nil)
         at ||= Time.zone.now
         version = Version.for_date(at).first
         context[:at] = at

app/javascript/packs/actions/graphql.ts

@@ -0,0 +1,13 @@
+import { GraphQLClient } from 'graphql-request'
+
+export const client = new GraphQLClient('/api/')
+
+export async function query(query, variables = {}) {
+  try {
+    let response = await client.request(query, variables) as any
+    return response
+  } catch (exception) {
+    console.error(exception)
+    return false
+  }
+}

app/javascript/packs/actions/schedules.ts

@@ -1,8 +1,7 @@
 import { Schedules  } from './index'
-import { GraphQLClient } from 'graphql-request'
-import { BusixState } from '~reducers/index'
 
-const client = new GraphQLClient('/api/')
+import { BusixState } from '~reducers/index'
+import { query } from './graphql'
 
 const FETCH_LINES_QUERY = `
   query($cursor: String) {
@@ -13,7 +12,6 @@ const FETCH_LINES_QUERY = `
       }
       edges {
         node {
-          id
           name
           kind
         }
@@ -23,7 +21,7 @@ const FETCH_LINES_QUERY = `
 `
 
 async function fetchAllLines(cursor = '') {
-  let { lines } = await client.request(FETCH_LINES_QUERY, { cursor }) as any
+  let { lines } = await query(FETCH_LINES_QUERY, { cursor })
   const { pageInfo, edges } = lines
   let nodes = edges.map(({ node }) => node)
 
@@ -48,20 +46,15 @@ const FETCH_DIRECTIONS_QUERY = `
   query($line:String!){
     line(name: $line) {
       name
-      id
       directions {
-        id
         name
         start {
-          id
           name
         }
         target {
-          id
           name
         }
         stops {
-          id
           name 
         }
       }
@@ -71,7 +64,46 @@ const FETCH_DIRECTIONS_QUERY = `
 
 export function fetchDirections(line) {
   return async (dispatch, getState) => {
-    let response = await client.request(FETCH_DIRECTIONS_QUERY, { line }) as any
+    let response = await query(FETCH_DIRECTIONS_QUERY, { line })
     dispatch({ type: Schedules.SET_DIRECTIONS, payload: { line: response.line } })
   }
 }
+
+
+const FETCH_TIMETABLE_QUERY = `
+  query($from: String!, $to: String!, $line: String!, $at: Time!, $cursor: String) {
+    timetable(first: 100, after: $cursor, from: $from, to: $to, line: $line, at: $at) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      edges {
+        node {
+          time {
+            date
+          }
+        }
+      }
+    }
+  }
+`
+
+async function fetchAllTimetables(variables, cursor = '') {
+  let { timetable } = await query(FETCH_TIMETABLE_QUERY, { ...variables, cursor })
+
+  const { pageInfo, edges } = timetable
+  let nodes = edges.map(({ node }) => node.time.date)
+
+  if (pageInfo.hasNextPage) {
+    nodes = nodes.concat(await fetchAllTimetables(variables, pageInfo.endCursor))
+  }
+  return nodes
+}
+
+export function fetchTimetable(line, from, to, at) {
+  return async (dispatch, getState) => {
+    let timetable = await fetchAllTimetables({ line, from, to, at })
+    console.log(timetable)
+    //dispatch({ type: Schedules.SET_DIRECTIONS, payload: { line: timetable.line } })
+  }
+}

app/javascript/packs/application.tsx

@@ -1,7 +1,4 @@
-require('~styles')
-
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import { Route, Switch } from 'react-router-dom'
@@ -14,10 +11,8 @@ import ApiExplorer from './pages/ApiExplorer'
 import Schedules from './pages/Schedules'
 import Directions from './pages/Directions'
 
-document.addEventListener('DOMContentLoaded', () => {
-  const root = document.querySelector('#root')
-
-  ReactDOM.render(
+export default function Application() {
+  return (
     <AppWithTranslations>
       <Provider store={store}>
         <ConnectedRouter history={history}>
@@ -42,6 +37,6 @@ document.addEventListener('DOMContentLoaded', () => {
           </Switch>
         </ConnectedRouter>
       </Provider>
-    </AppWithTranslations>, root
+    </AppWithTranslations>
   )
-})
+}

app/javascript/packs/boot.tsx

@@ -0,0 +1,15 @@
+require('~styles')
+
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import Application from './application'
+import { hot } from 'react-hot-loader'
+
+const App = hot(module)(Application)
+
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.querySelector('#root')
+
+  ReactDOM.render(<App />, root)
+})

app/javascript/packs/pages/Schedules/Timetable.tsx

@@ -1,19 +1,31 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 import { Link } from 'react-router-dom'
 import { Spin } from 'antd'
 
 import { BusixState } from '~reducers/index'
-import {} from '~reducers/schedules'
+import { fetchTimetable } from '~actions/schedules'
+import { } from '~reducers/schedules'
 
 interface ITimetableProps {
+  fetchTimetable?,
   currentLine?: string
   currentDirection?: string
   currentStop?: string,
   forDate?: string
 }
 
 class Timetable extends React.Component<ITimetableProps> {
+  componentDidMount() {
+    this.props.fetchTimetable({
+      "from": "Jarzębiny",
+      "to": "Nowy Bieżanów P+R",
+      "line": "73",
+      "at": "now"
+    })
+  }
+
   render() {
     return (
       <Spin spinning={true}>
@@ -28,4 +40,8 @@ function mapStateToProps({ schedules } : BusixState) : ITimetableProps {
   return {}
 }
 
-export default connect(mapStateToProps)(Timetable)
+function mapActionsToProps(dispatch) : ITimetableProps {
+  return bindActionCreators({ fetchTimetable }, dispatch)
+}
+
+export default connect(mapStateToProps, mapActionsToProps)(Timetable)

config/webpack/environment.js

@@ -98,5 +98,5 @@ const webpackConfig = environment.toWebpackConfig()
 module.exports = {
   ...webpackConfig,
   target: 'web',
-  entry: resolve('app/javascript/packs/application.tsx')
+  entry: resolve('app/javascript/packs/boot.tsx')
 }