Fire search query when flags are in position or moved

entur · Nov 22, 2023 · 6108e3e · 6108e3e
1 parent 4c36414
commit 6108e3e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 18 deletions.
diff --git a/client-next/src/components/ItineraryList/ItineraryListContainer.tsx b/client-next/src/components/ItineraryList/ItineraryListContainer.tsx
@@ -11,11 +11,13 @@ export function ItineraryListContainer({
   selectedTripPatternIndex,
   setSelectedTripPatternIndex,
   pageResults,
+  loading,
 }: {
   tripQueryResult: QueryType | null;
   selectedTripPatternIndex: number;
   setSelectedTripPatternIndex: (selectedTripPatterIndex: number) => void;
   pageResults: (cursor: string) => void;
+  loading: boolean;
 }) {
   const [earliestStartTime, latestEndTime] = useEarliestAndLatestTimes(tripQueryResult);
   const { containerRef, containerWidth } = useContainerWidth();
@@ -26,6 +28,7 @@ export function ItineraryListContainer({
         onPagination={pageResults}
         previousPageCursor={tripQueryResult?.trip.previousPageCursor}
         nextPageCursor={tripQueryResult?.trip.nextPageCursor}
+        loading={loading}
       />
       <Accordion
         activeKey={`${selectedTripPatternIndex}`}

diff --git a/client-next/src/components/ItineraryList/ItineraryPaginationControl.tsx b/client-next/src/components/ItineraryList/ItineraryPaginationControl.tsx
@@ -4,23 +4,25 @@ export function ItineraryPaginationControl({
   previousPageCursor,
   nextPageCursor,
   onPagination,
+  loading,
 }: {
   previousPageCursor?: string | null;
   nextPageCursor?: string | null;
   onPagination: (cursor: string) => void;
+  loading: boolean;
 }) {
   return (
     <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '1rem 0 ' }}>
       <Button
-        disabled={!previousPageCursor}
+        disabled={!previousPageCursor || loading}
         onClick={() => {
           previousPageCursor && onPagination(previousPageCursor);
         }}
       >
         Previous page
       </Button>{' '}
       <Button
-        disabled={!nextPageCursor}
+        disabled={!nextPageCursor || loading}
         onClick={() => {
           nextPageCursor && onPagination(nextPageCursor);
         }}

diff --git a/client-next/src/components/SearchBar/SearchBar.tsx b/client-next/src/components/SearchBar/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { Button } from 'react-bootstrap';
+import { Button, Spinner } from 'react-bootstrap';
 import { ServerInfo, TripQueryVariables } from '../../gql/graphql.ts';
 import { LocationInputField } from './LocationInputField.tsx';
 import { DepartureArrivalSelect } from './DepartureArrivalSelect.tsx';
@@ -20,11 +20,13 @@ export function SearchBar({
   tripQueryVariables,
   setTripQueryVariables,
   serverInfo,
+  loading,
 }: {
   onRoute: () => void;
   tripQueryVariables: TripQueryVariables;
   setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
   serverInfo?: ServerInfo;
+  loading: boolean;
 }) {
   const [showServerInfo, setShowServerInfo] = useState(false);
   const target = useRef(null);
@@ -60,7 +62,12 @@ export function SearchBar({
         setTripQueryVariables={setTripQueryVariables}
       />
       <div className="search-bar-route-button-wrapper">
-        <Button variant="primary" onClick={() => onRoute()}>
+        <Button variant="primary" onClick={() => onRoute()} disabled={loading}>
+          {loading && (
+            <>
+              <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />{' '}
+            </>
+          )}
           Route
         </Button>
       </div>

diff --git a/client-next/src/hooks/useServerInfo.ts b/client-next/src/hooks/useServerInfo.ts
@@ -20,11 +20,8 @@ const query = graphql(`
 
 export const useServerInfo = () => {
   const [data, setData] = useState<QueryType | null>(null);
-
   useEffect(() => {
     const fetchData = async () => {
-      console.log('i fire once');
-
       setData((await request(endpoint, query)) as QueryType);
     };
     fetchData();

diff --git a/client-next/src/hooks/useTripQuery.ts b/client-next/src/hooks/useTripQuery.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { graphql } from '../gql';
 import request from 'graphql-request';
 import { QueryType, TripQueryVariables } from '../gql/graphql.ts';
@@ -81,23 +81,40 @@ const query = graphql(`
   }
 `);
 
-type TripQueryHook = (variables?: TripQueryVariables) => [QueryType | null, (pageCursor?: string) => Promise<void>];
+type TripQueryHook = (
+  variables?: TripQueryVariables,
+) => [QueryType | null, boolean, (pageCursor?: string) => Promise<void>];
 
 export const useTripQuery: TripQueryHook = (variables) => {
   const [data, setData] = useState<QueryType | null>(null);
+  const [loading, setLoading] = useState(false);
   const callback = useCallback(
     async (pageCursor?: string) => {
-      if (variables) {
-        if (pageCursor) {
-          setData((await request(endpoint, query, { ...variables, pageCursor })) as QueryType);
+      if (loading) {
+        console.warn('Wait for previous search to finish');
+      } else {
+        if (variables) {
+          setLoading(true);
+          if (pageCursor) {
+            setData((await request(endpoint, query, { ...variables, pageCursor })) as QueryType);
+          } else {
+            setData((await request(endpoint, query, variables)) as QueryType);
+          }
+          setLoading(false);
         } else {
-          setData((await request(endpoint, query, variables)) as QueryType);
+          console.warn("Can't search without variables");
         }
-      } else {
-        console.warn("Can't search without variables");
       }
     },
-    [setData, variables],
+    [setData, variables, loading],
   );
-  return [data, callback];
+
+  useEffect(() => {
+    if (variables?.from.coordinates && variables?.to.coordinates) {
+      callback();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [variables?.from, variables?.to]);
+
+  return [data, loading, callback];
 };
diff --git a/client-next/src/screens/App.tsx b/client-next/src/screens/App.tsx
@@ -15,7 +15,7 @@ const INITIAL_VARIABLES: TripQueryVariables = {
 
 export function App() {
   const [tripQueryVariables, setTripQueryVariables] = useState<TripQueryVariables>(INITIAL_VARIABLES);
-  const [tripQueryResult, callback] = useTripQuery(tripQueryVariables);
+  const [tripQueryResult, loading, callback] = useTripQuery(tripQueryVariables);
   const serverInfo = useServerInfo();
   const [selectedTripPatternIndex, setSelectedTripPatternIndex] = useState<number>(0);
 
@@ -26,6 +26,7 @@ export function App() {
         tripQueryVariables={tripQueryVariables}
         setTripQueryVariables={setTripQueryVariables}
         serverInfo={serverInfo}
+        loading={loading}
       />
 
       <Stack direction="horizontal" gap={0}>
@@ -34,6 +35,7 @@ export function App() {
           selectedTripPatternIndex={selectedTripPatternIndex}
           setSelectedTripPatternIndex={setSelectedTripPatternIndex}
           pageResults={callback}
+          loading={loading}
         />
         <MapView
           tripQueryResult={tripQueryResult}