Apply formatting

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

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;

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 (

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 (
-        <Map
-            // @ts-ignore // TODO: why TypeScript complaining about this
-            mapLib={import('maplibre-gl')}
-            // @ts-ignore // TODO: why TypeScript complaining about this
-            mapStyle={mapStyle}
-            initialViewState={initialViewState}
-            style={{width: "100%", height: " calc(100vh - 56px)"}}
-        >
-            <NavigationControl position="top-left" />
-        </Map>
-    );
-}
+  return (
+    <Map
+      // @ts-ignore // TODO: why TypeScript complaining about this
+      mapLib={import('maplibre-gl')}
+      // @ts-ignore // TODO: why TypeScript complaining about this
+      mapStyle={mapStyle}
+      initialViewState={initialViewState}
+      style={{ width: '100%', height: ' calc(100vh - 56px)' }}
+    >
+      <NavigationControl position="top-left" />
+    </Map>
+  );
+}

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 (
-        <Navbar expand="lg" className="bg-body-tertiary">
-            <Container>
-                <Navbar.Brand>OTP debug client (next)</Navbar.Brand>
-            </Container>
-        </Navbar>
-    );
-}
+  return (
+    <Navbar expand="lg" className="bg-body-tertiary">
+      <Container>
+        <Navbar.Brand>OTP debug client (next)</Navbar.Brand>
+      </Container>
+    </Navbar>
+  );
+}

client-next/src/TripQueryContainer.tsx

@@ -1,17 +1,12 @@
-import {useTripQuery} from "./useTripQuery.ts";
+import { useTripQuery } from './useTripQuery.ts';
 
 export function TripQueryContainer() {
   const [data, callback] = useTripQuery();
 
   return (
     <>
       <button onClick={() => callback()}>Make request</button>
-      {data && (
-        <pre>
-          {JSON.stringify(data.trip.tripPatterns, null, 2)}
-        </pre>
-      )}
-
+      {data && <pre>{JSON.stringify(data.trip.tripPatterns, null, 2)}</pre>}
     </>
   );
-}
+}

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(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);

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<void>
-]
+type TripQueryHook = (variables?: TripQueryVariables) => [TripQuery | null, () => Promise<void>];
 
 export const useTripQuery: TripQueryHook = (variables = {}) => {
   const [data, setData] = useState<TripQuery | null>(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];
-}
+};

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()],
-})
+});