From 7dd851de0a90476532212a7aaabc64471c5966bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=20Erik=20St=C3=B8wer?= Date: Wed, 30 Aug 2023 15:55:42 +0200 Subject: [PATCH] Apply formatting --- client-next/README.md | 10 ++-- client-next/codegen.ts | 15 +++--- client-next/src/App.tsx | 6 +-- client-next/src/MapContainer.tsx | 67 +++++++++++++------------- client-next/src/NavBarContainer.tsx | 16 +++--- client-next/src/TripQueryContainer.tsx | 11 ++--- client-next/src/main.tsx | 8 +-- client-next/src/useTripQuery.ts | 43 ++++++----------- client-next/vite.config.ts | 6 +-- 9 files changed, 82 insertions(+), 100 deletions(-) diff --git a/client-next/README.md b/client-next/README.md index fca3efeffcd..f8f22129d91 100644 --- a/client-next/README.md +++ b/client-next/README.md @@ -6,23 +6,23 @@ It is designed to work with the Transmodel GraphQL API. ## Stack notes -This is a true Single Page Application (SPA) written in TypeScript on the React framework. It uses `vite` to run -(locally) and for building static assets. It requires no server runtime, and can be served from a CDN and run entirely +This is a true Single Page Application (SPA) written in TypeScript on the React framework. It uses `vite` to run +(locally) and for building static assets. It requires no server runtime, and can be served from a CDN and run entirely in the browser. The design framework is Bootstrap with React support from `react-bootstrap`. The map framework is MapLibre, using `MapLibre GL JS` with React support from `react-map-gl`. -GraphQL integration is provided by `graphql-request`, with type support added with `@graphql-codegen`. Types are +GraphQL integration is provided by `graphql-request`, with type support added with `@graphql-codegen`. Types are generated during build and are not checked into the repository. ## Prerequisites -Use latest LTS version of Node/npm (currently v18). Recommend using av version manager such as `nvm`. +Use latest LTS version of Node/npm (currently v18). Recommend using av version manager such as `nvm`. The dev and production builds require graphql schema to be present at -`../src/ext/graphql/transmodelapi/schema.graphql`. +`../src/ext/graphql/transmodelapi/schema.graphql`. Running `maven verify` in parent project should solve that. ## Getting started diff --git a/client-next/codegen.ts b/client-next/codegen.ts index 4ecf693f852..375fb772434 100644 --- a/client-next/codegen.ts +++ b/client-next/codegen.ts @@ -1,16 +1,15 @@ - import type { CodegenConfig } from '@graphql-codegen/cli'; const config: CodegenConfig = { overwrite: true, - schema: "../src/ext/graphql/transmodelapi/schema.graphql", - documents: "src/**/*.{ts,tsx}", + schema: '../src/ext/graphql/transmodelapi/schema.graphql', + documents: 'src/**/*.{ts,tsx}', generates: { - "src/gql/": { - preset: "client", - plugins: [] - } - } + 'src/gql/': { + preset: 'client', + plugins: [], + }, + }, }; export default config; diff --git a/client-next/src/App.tsx b/client-next/src/App.tsx index 3e8ab0717b4..728cacf6461 100644 --- a/client-next/src/App.tsx +++ b/client-next/src/App.tsx @@ -1,6 +1,6 @@ -import {MapContainer} from "./MapContainer.tsx"; -import {NavBarContainer} from "./NavBarContainer.tsx"; -import {TripQueryContainer} from "./TripQueryContainer.tsx"; +import { MapContainer } from './MapContainer.tsx'; +import { NavBarContainer } from './NavBarContainer.tsx'; +import { TripQueryContainer } from './TripQueryContainer.tsx'; export function App() { return ( diff --git a/client-next/src/MapContainer.tsx b/client-next/src/MapContainer.tsx index 9fe911d703d..75302dd30c9 100644 --- a/client-next/src/MapContainer.tsx +++ b/client-next/src/MapContainer.tsx @@ -1,44 +1,43 @@ -import Map, {NavigationControl} from 'react-map-gl'; +import { Map, NavigationControl } from 'react-map-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; const mapStyle = { - "version": 8, - "sources": { - "osm": { - "type": "raster", - "tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"], - "tileSize": 256, - "attribution": "© OpenStreetMap Contributors", - "maxzoom": 19 - } + version: 8, + sources: { + osm: { + type: 'raster', + tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'], + tileSize: 256, + attribution: '© OpenStreetMap Contributors', + maxzoom: 19, }, - "layers": [ - { - "id": "osm", - "type": "raster", - "source": "osm" // This must match the source key above - } - ] + }, + layers: [ + { + id: 'osm', + type: 'raster', + source: 'osm', // This must match the source key above + }, + ], }; // TODO: this should be configurable const initialViewState = { - latitude: 60.7554885, - longitude: 10.2332855, - zoom: 4 + latitude: 60.7554885, + longitude: 10.2332855, + zoom: 4, }; export function MapContainer() { - - return ( - - - - ); -} \ No newline at end of file + return ( + + + + ); +} diff --git a/client-next/src/NavBarContainer.tsx b/client-next/src/NavBarContainer.tsx index 3fd14d3da9d..aba2a51e272 100644 --- a/client-next/src/NavBarContainer.tsx +++ b/client-next/src/NavBarContainer.tsx @@ -1,11 +1,11 @@ import Container from 'react-bootstrap/Container'; import Navbar from 'react-bootstrap/Navbar'; export function NavBarContainer() { - return ( - - - OTP debug client (next) - - - ); -} \ No newline at end of file + return ( + + + OTP debug client (next) + + + ); +} diff --git a/client-next/src/TripQueryContainer.tsx b/client-next/src/TripQueryContainer.tsx index 805344ba244..b8a672bf05c 100644 --- a/client-next/src/TripQueryContainer.tsx +++ b/client-next/src/TripQueryContainer.tsx @@ -1,4 +1,4 @@ -import {useTripQuery} from "./useTripQuery.ts"; +import { useTripQuery } from './useTripQuery.ts'; export function TripQueryContainer() { const [data, callback] = useTripQuery(); @@ -6,12 +6,7 @@ export function TripQueryContainer() { return ( <> - {data && ( - 
-          {JSON.stringify(data.trip.tripPatterns, null, 2)}
-
- )} - + {data && 
{JSON.stringify(data.trip.tripPatterns, null, 2)}
} ); -} \ No newline at end of file +} diff --git a/client-next/src/main.tsx b/client-next/src/main.tsx index 9b4d7dcd9ee..69df4c40942 100644 --- a/client-next/src/main.tsx +++ b/client-next/src/main.tsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' +import React from 'react'; +import ReactDOM from 'react-dom/client'; import 'bootstrap/dist/css/bootstrap.min.css'; -import { App } from "./App.tsx"; +import { App } from './App.tsx'; ReactDOM.createRoot(document.getElementById('root')!).render( , -) +); diff --git a/client-next/src/useTripQuery.ts b/client-next/src/useTripQuery.ts index 81b6405c418..190900ae896 100644 --- a/client-next/src/useTripQuery.ts +++ b/client-next/src/useTripQuery.ts @@ -1,42 +1,31 @@ -import {useCallback, useState} from "react"; -import {graphql} from './gql'; -import request from "graphql-request"; -import {TripQuery, TripQueryVariables} from "./gql/graphql.ts"; +import { useCallback, useState } from 'react'; +import { graphql } from './gql'; +import request from 'graphql-request'; +import { TripQuery, TripQueryVariables } from './gql/graphql.ts'; // TODO: make this endpoint url configurable -const endpoint = `https://api.entur.io/journey-planner/v3/graphql` +const endpoint = `https://api.entur.io/journey-planner/v3/graphql`; /** General purpose trip query document for debugging trip searches TODO: should live in a separate file, and split into fragments for readability */ const query = graphql(` - query trip { - trip( - from: { - place: "NSR:StopPlace:337" - } - to: { - place: "NSR:StopPlace:1" - } - ) { - tripPatterns { - legs { - id - } - } + query trip { + trip(from: { place: "NSR:StopPlace:337" }, to: { place: "NSR:StopPlace:1" }) { + tripPatterns { + legs { + id } + } } -`) + } +`); -type TripQueryHook = (variables?: TripQueryVariables) => [ - TripQuery | null, - () => Promise -] +type TripQueryHook = (variables?: TripQueryVariables) => [TripQuery | null, () => Promise]; export const useTripQuery: TripQueryHook = (variables = {}) => { const [data, setData] = useState(null); - const callback = useCallback(async () => - setData(await request(endpoint, query, variables)), [setData, variables]); + const callback = useCallback(async () => setData(await request(endpoint, query, variables)), [setData, variables]); return [data, callback]; -} \ No newline at end of file +}; diff --git a/client-next/vite.config.ts b/client-next/vite.config.ts index 5a33944a9b4..627a3196243 100644 --- a/client-next/vite.config.ts +++ b/client-next/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) +});