From fda6eb5d72cd37fe4ffa9ee99f2043fe20ced93d Mon Sep 17 00:00:00 2001 From: Arkadiusz Buras Date: Sat, 27 Oct 2018 22:26:12 +0200 Subject: [PATCH] WIP --- app/graphql/resolvers/departures/timetable.rb | 4 +- app/javascript/packs/actions/graphql.ts | 13 +++++ app/javascript/packs/actions/schedules.ts | 54 +++++++++++++++---- app/javascript/packs/application.tsx | 13 ++--- app/javascript/packs/boot.tsx | 15 ++++++ .../packs/pages/Schedules/Timetable.tsx | 20 ++++++- config/webpack/environment.js | 2 +- 7 files changed, 96 insertions(+), 25 deletions(-) create mode 100644 app/javascript/packs/actions/graphql.ts create mode 100644 app/javascript/packs/boot.tsx diff --git a/app/graphql/resolvers/departures/timetable.rb b/app/graphql/resolvers/departures/timetable.rb index 0094d66..2ef7b3f 100644 --- a/app/graphql/resolvers/departures/timetable.rb +++ b/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 diff --git a/app/javascript/packs/actions/graphql.ts b/app/javascript/packs/actions/graphql.ts new file mode 100644 index 0000000..89d5771 --- /dev/null +++ b/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 + } +} diff --git a/app/javascript/packs/actions/schedules.ts b/app/javascript/packs/actions/schedules.ts index 0b5ece7..6f78766 100644 --- a/app/javascript/packs/actions/schedules.ts +++ b/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 } }) + } +} \ No newline at end of file diff --git a/app/javascript/packs/application.tsx b/app/javascript/packs/application.tsx index 01dcf6d..b1205e3 100644 --- a/app/javascript/packs/application.tsx +++ b/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 ( @@ -42,6 +37,6 @@ document.addEventListener('DOMContentLoaded', () => { - , root + ) -}) +} diff --git a/app/javascript/packs/boot.tsx b/app/javascript/packs/boot.tsx new file mode 100644 index 0000000..70f71d6 --- /dev/null +++ b/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(, root) +}) diff --git a/app/javascript/packs/pages/Schedules/Timetable.tsx b/app/javascript/packs/pages/Schedules/Timetable.tsx index c6bb9a6..f8b43b6 100644 --- a/app/javascript/packs/pages/Schedules/Timetable.tsx +++ b/app/javascript/packs/pages/Schedules/Timetable.tsx @@ -1,12 +1,15 @@ 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, @@ -14,6 +17,15 @@ interface ITimetableProps { } class Timetable extends React.Component { + componentDidMount() { + this.props.fetchTimetable({ + "from": "Jarzębiny", + "to": "Nowy Bieżanów P+R", + "line": "73", + "at": "now" + }) + } + render() { return ( @@ -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) diff --git a/config/webpack/environment.js b/config/webpack/environment.js index f31c35c..24f70cd 100644 --- a/config/webpack/environment.js +++ b/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') }