Reorganize files

client-next/src/MapContainer.tsx → client-next/src/components/MapView.tsx

@@ -27,7 +27,7 @@ const initialViewState = {
   longitude: 10.2332855,
   zoom: 4,
 };
-export function MapContainer() {
+export function MapView() {
   return (
     <Map
       // @ts-ignore // TODO: why TypeScript complaining about this

client-next/src/TripQueryContainer.tsx → client-next/src/components/SearchBarContainer.tsx

@@ -1,6 +1,6 @@
-import { useTripQuery } from './useTripQuery.ts';
+import { useTripQuery } from '../hooks/useTripQuery.ts';
 
-export function TripQueryContainer() {
+export function SearchBarContainer() {
   const [data, callback] = useTripQuery();
 
   return (

client-next/src/useTripQuery.ts → client-next/src/hooks/useTripQuery.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
-import { graphql } from './gql';
+import { graphql } from '../gql';
 import request from 'graphql-request';
-import { TripQuery, TripQueryVariables } from './gql/graphql.ts';
+import { TripQuery, TripQueryVariables } from '../gql/graphql.ts';
 
 // TODO: make this endpoint url configurable
 const endpoint = `https://api.entur.io/journey-planner/v3/graphql`;

client-next/src/main.tsx

@@ -1,7 +1,7 @@
 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 './screens/App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

client-next/src/screens/App.tsx

@@ -0,0 +1,13 @@
+import { MapView } from '../components/MapView.tsx';
+import { NavBarContainer } from '../components/NavBarContainer.tsx';
+import { SearchBarContainer } from '../components/SearchBarContainer.tsx';
+
+export function App() {
+  return (
+    <div className="app">
+      <NavBarContainer />
+      <SearchBarContainer />
+      <MapView />
+    </div>
+  );
+}