@geops/rvf-mobility-web-component 0.1.128 → 0.1.129

package/src/utils/hooks/useRealtimeRenderedTrajectory.tsx

@@ -1,42 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-
-import useMapContext from "./useMapContext";
-
-import type { RealtimeTrajectory } from "mobility-toolbox-js/types";
-
-function useRealtimeRenderedTrajectories(trainId: number | string) {
-  const { realtimeLayer } = useMapContext();
-  const [trajectory, setTrajectory] = useState<RealtimeTrajectory>();
-  const [trainIdFound, setTrainIdFound] = useState<string>();
-
-  // We try to find the trainId every second until we have it
-  // TODO: find a efficient way to find the trajectory without polling
-  useEffect(() => {
-    if (trainIdFound || !trainId || !realtimeLayer) {
-      return;
-    }
-    const timeout = setInterval(() => {
-      let traj = realtimeLayer?.trajectories?.[trainId];
-
-      if (!traj) {
-        traj = Object.values(realtimeLayer?.trajectories)?.find((item) => {
-          return item.properties.route_identifier === trainId;
-        });
-      }
-
-      if (traj) {
-        setTrajectory(traj);
-        setTrainIdFound(traj.properties.train_id);
-      }
-    }, 1000);
-
-    return () => {
-      clearInterval(timeout);
-      setTrainIdFound(undefined);
-    };
-  }, [trainId, realtimeLayer, trainIdFound]);
-
-  return trajectory;
-}
-
-export default useRealtimeRenderedTrajectories;

package/src/utils/hooks/useRealtimeStation.tsx

@@ -1,39 +0,0 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import useMapContext from "./useMapContext";
-
-import type { RealtimeStation } from "mobility-toolbox-js/types";
-
-function useRealtimeStation(stationId: number | string) {
-  const { realtimeLayer } = useMapContext();
-  const [station, setStation] = useState<RealtimeStation>();
-  const api = useMemo(() => {
-    return realtimeLayer?.api;
-  }, [realtimeLayer?.api]);
-
-  useEffect(() => {
-    if (!stationId || !api) {
-      return;
-    }
-
-    if (!api.wsApi.open) {
-      api.wsApi.connect(api.url);
-    }
-
-    api.subscribe(`station ${stationId}`, ({ content }) => {
-      if (content) {
-        setStation(content as RealtimeStation);
-      }
-    });
-
-    return () => {
-      setStation(undefined);
-      if (stationId) {
-        api?.unsubscribe(`station ${stationId}`);
-      }
-    };
-  }, [stationId, api]);
-  return station;
-}
-
-export default useRealtimeStation;

package/src/utils/hooks/useRealtimeStopSequences.tsx

@@ -1,43 +0,0 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import useMapContext from "./useMapContext";
-
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-
-function useRealtimeStopSequences(trainId: string) {
-  const { realtimeLayer } = useMapContext();
-  const [stopSequences, setStopSequences] = useState<RealtimeStopSequence[]>();
-
-  const api = useMemo(() => {
-    return realtimeLayer?.api;
-  }, [realtimeLayer?.api]);
-
-  useEffect(() => {
-    let trainIdSubscribed = null;
-    if (!trainId || !api) {
-      return;
-    }
-
-    if (!api.wsApi.open) {
-      api.open();
-    }
-
-    trainIdSubscribed = trainId;
-
-    const onMessage = ({ content }) => {
-      if (content) {
-        setStopSequences([...content]);
-      }
-    };
-    api.subscribeStopSequence(trainId, onMessage);
-
-    return () => {
-      setStopSequences([]);
-      api.unsubscribeStopSequence(trainIdSubscribed);
-    };
-  }, [trainId, api]);
-
-  return stopSequences;
-}
-
-export default useRealtimeStopSequences;

package/src/utils/hooks/useRealtimeTrainsByRouteIdentifier.tsx

@@ -1,72 +0,0 @@
-import { RealtimeRestAPI } from "mobility-toolbox-js/ol";
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import useMapContext from "./useMapContext";
-
-import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
-
-function useRealtimeTrainByRouteIdentifier(
-  routeIdentifier: string,
-): RealtimeRouteIdentifierMatch | undefined {
-  const { apikey, hasRealtime, realtimeresturl, realtimetenant, tenant } =
-    useMapContext();
-  const [train, setTrain] = useState<RealtimeRouteIdentifierMatch>();
-
-  const tenantMemo = useMemo(() => {
-    return realtimetenant || tenant;
-  }, [realtimetenant, tenant]);
-
-  const api = useMemo(() => {
-    if (!apikey || !tenantMemo || !hasRealtime) {
-      return null;
-    }
-    return new RealtimeRestAPI({
-      apiKey: apikey,
-      tenant: tenantMemo,
-      url: realtimeresturl,
-    });
-  }, [apikey, tenantMemo, hasRealtime, realtimeresturl]);
-
-  useEffect(() => {
-    if (!api || !routeIdentifier) {
-      return;
-    }
-
-    const abortCtrl: AbortController = new AbortController();
-
-    api
-      .trainsByRouteIdentifier(
-        {
-          exact_match: true,
-          query: routeIdentifier,
-        },
-        { signal: abortCtrl.signal },
-      )
-      .then((res) => {
-        if (res.matches.length > 0) {
-          setTrain(res.matches[0]);
-        } else {
-          setTrain(undefined);
-        }
-      })
-      .catch((e) => {
-        // AbortError is expected
-        if (e.code !== 20) {
-          // eslint-disable-next-line no-console
-          console.error(
-            "Failed to fetch train by route identifier",
-            routeIdentifier,
-            e,
-          );
-          return;
-        }
-      });
-
-    return () => {
-      abortCtrl?.abort();
-    };
-  }, [api, routeIdentifier]);
-
-  return train;
-}
-export default useRealtimeTrainByRouteIdentifier;

package/src/utils/hooks/useRouteStop.tsx

@@ -1,40 +0,0 @@
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
-
-import type {
-  RealtimeStation,
-  RealtimeStop,
-  RealtimeStopSequence,
-} from "mobility-toolbox-js/types";
-
-import type { StopStatus } from "../getStopStatus";
-
-export interface RouteStopContextType {
-  index?: number;
-  invertColor?: boolean;
-  station?: RealtimeStation;
-  status?: StopStatus;
-  stop?: {
-    platform?: string;
-  } & RealtimeStop;
-  stopSequence?: RealtimeStopSequence;
-}
-
-export const RouteStopContext = createContext({
-  index: null,
-  invertColor: null,
-  station: null,
-  status: null,
-  stop: null,
-  stopSequence: null,
-} as RouteStopContextType);
-
-const useRouteStop = (): RouteStopContextType => {
-  const context = useContext<RouteStopContextType>(RouteStopContext);
-  if (!context) {
-    throw new Error("useRouteStop must be used within a ContextProvider");
-  }
-  return context;
-};
-
-export default useRouteStop;

package/src/utils/hooks/useRvfContext.tsx

@@ -1,46 +0,0 @@
-/* eslint-disable no-console */
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
-
-import type { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import type { Group } from "ol/layer";
-
-export interface RvfContextType {
-  poisLayer: MaplibreStyleLayer;
-  sellingPointsLayer: MaplibreStyleLayer;
-  setPoisLayer: (layer: MaplibreStyleLayer) => void;
-  setSellingPointsLayer: (layer: MaplibreStyleLayer) => void;
-  setSharedMobilityLayerGroup: (group: Group) => void;
-  setTarifZonenLayer: (layer: MaplibreStyleLayer) => void;
-  sharedMobilityLayerGroup: Group;
-  tarifZonenLayer: MaplibreStyleLayer;
-}
-
-export const RvfContext = createContext<RvfContextType>({
-  poisLayer: null,
-  sellingPointsLayer: null,
-  setPoisLayer: () => {
-    console.warn("setPoisLayer is not implemented");
-  },
-  setSellingPointsLayer: () => {
-    console.warn("setSellingPointsLayer is not implemented");
-  },
-  setSharedMobilityLayerGroup: () => {
-    console.warn("setSharedMobilityLayerGroup is not implemented");
-  },
-  setTarifZonenLayer: () => {
-    console.warn("setTarifZonenLayer is not implemented");
-  },
-  sharedMobilityLayerGroup: null,
-  tarifZonenLayer: null,
-});
-
-const useRvfContext = (): RvfContextType => {
-  const context = useContext<RvfContextType>(RvfContext);
-  if (!context) {
-    throw new Error("useRvfContext must be used within a ContextProvider");
-  }
-  return context;
-};
-
-export default useRvfContext;

package/src/utils/hooks/useScrollTo.tsx

@@ -1,36 +0,0 @@
-import { useLayoutEffect } from "react";
-
-import type { MutableRef } from "react";
-
-const defaultScrollOptions: ScrollIntoViewOptions = { behavior: "smooth" };
-
-function useScrollTo(
-  ref: MutableRef<HTMLElement>,
-  targetSelector: string,
-  dependenciesArray: unknown[] = [],
-  scrollToOptions: ScrollIntoViewOptions = defaultScrollOptions,
-) {
-  useLayoutEffect(() => {
-    const elt = ref.current;
-    if (!elt) {
-      return;
-    }
-    const scrollToElt = elt.querySelector(targetSelector);
-
-    if (scrollToElt) {
-      try {
-        // We use scrollTo avoid scrolling the entire window.
-        elt.scrollTo({
-          ...scrollToOptions,
-          top: (scrollToElt as HTMLElement).offsetTop || 0,
-        });
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error("Error while scrolling to element", err);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependenciesArray]);
-}
-
-export default useScrollTo;

package/src/utils/hooks/useSearchLines.tsx

@@ -1,34 +0,0 @@
-import { useMemo } from "preact/hooks";
-
-import { useLnpLinesInfos } from "./useLnp";
-import useMapContext from "./useMapContext";
-
-import type { LnpLineInfo } from "./useLnp";
-import type { SearchResponse } from "./useSearchStops";
-
-function useSearchLines(query: string): SearchResponse<LnpLineInfo> {
-  const { hasLnp } = useMapContext();
-  const linesInfos = useLnpLinesInfos();
-
-  const results = useMemo(() => {
-    if (!query || !linesInfos || !hasLnp) {
-      return [];
-    }
-    return Object.values(linesInfos || {}).filter((line: LnpLineInfo) => {
-      return (
-        line?.short_name?.toLowerCase().includes(query.toLowerCase()) ||
-        line?.long_name?.toLowerCase().includes(query.toLowerCase()) ||
-        line?.id?.toLowerCase().includes(query.toLowerCase()) ||
-        line?.external_id?.toLowerCase().includes(query.toLowerCase()) ||
-        line?.mot?.toLowerCase().includes(query.toLowerCase())
-      );
-    });
-  }, [hasLnp, linesInfos, query]);
-
-  return {
-    isLoading: false,
-    results: results || [],
-  };
-}
-
-export default useSearchLines;

package/src/utils/hooks/useSearchLnpStops.tsx

@@ -1,38 +0,0 @@
-import { useMemo } from "preact/hooks";
-
-import { useLnpStopsInfos } from "./useLnp";
-import useMapContext from "./useMapContext";
-
-import type { LnpStopInfo } from "./useLnp";
-import type { SearchResponse } from "./useSearchStops";
-
-function useSearchLnpStops(query: string): SearchResponse<LnpStopInfo> {
-  const { hasLnp } = useMapContext();
-  const infos = useLnpStopsInfos();
-
-  const results = useMemo(() => {
-    if (!query || !infos || !hasLnp) {
-      return [];
-    }
-    return Object.values(infos || {}).filter((item: LnpStopInfo) => {
-      return (
-        item?.short_name?.toLowerCase().includes(query.toLowerCase()) ||
-        item?.long_name?.toLowerCase().includes(query.toLowerCase()) ||
-        item?.external_id?.toLowerCase().includes(query.toLowerCase()) ||
-        item?.codes?.find((code) => {
-          return (
-            code.toLowerCase() === query.toLowerCase() ||
-            code.split(":")[1]?.toLowerCase() === query.toLowerCase()
-          );
-        })
-      );
-    });
-  }, [hasLnp, infos, query]);
-
-  return {
-    isLoading: false,
-    results: results || [],
-  };
-}
-
-export default useSearchLnpStops;

package/src/utils/hooks/useSearchStops.tsx

@@ -1,85 +0,0 @@
-import debounce from "lodash.debounce";
-import { StopsAPI } from "mobility-toolbox-js/ol";
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import { MAX_EXTENT_4326 } from "../constants";
-
-import useMapContext from "./useMapContext";
-
-import type { StopsParameters, StopsResponse } from "mobility-toolbox-js/types";
-
-export type StopsFeature = StopsResponse["features"][0];
-
-export interface SearchResponse<T> {
-  isLoading: boolean;
-  results: T[] | undefined;
-}
-
-/**
- * This hook launch a request to the Stops API.
- *
- * @param query
- */
-function useSearchStops(
-  query: string,
-  params?: Partial<StopsParameters>,
-): SearchResponse<StopsFeature> {
-  const { apikey, mots, stopsurl } = useMapContext();
-  const [results, setResults] = useState<StopsFeature[] | undefined>();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const api: StopsAPI = useMemo(() => {
-    if (!apikey || !stopsurl) {
-      return null;
-    }
-    return new StopsAPI({ apiKey: apikey, url: stopsurl });
-  }, [apikey, stopsurl]);
-
-  const debouncedSearch = useMemo(() => {
-    let abortCtrl: AbortController | undefined;
-
-    return debounce((q) => {
-      abortCtrl?.abort();
-      abortCtrl = new AbortController();
-
-      const reqParams = {
-        bbox: MAX_EXTENT_4326?.join(","),
-        mots,
-        q,
-        ...(params ?? {}),
-      } as StopsParameters;
-
-      setIsLoading(true);
-      api
-        .search(reqParams, { signal: abortCtrl.signal })
-        .then((res: StopsResponse) => {
-          setResults(res.features);
-          setIsLoading(false);
-        })
-        .catch((e) => {
-          // AbortError is expected
-          if (e.code !== 20) {
-            // eslint-disable-next-line no-console
-            console.error("Failed to fetch stations", e);
-            return;
-          }
-          setIsLoading(false);
-        });
-    }, 150);
-  }, [api, mots, params]);
-
-  useEffect(() => {
-    if (!query || !api) {
-      setResults([]);
-      return;
-    }
-    debouncedSearch(query);
-  }, [api, debouncedSearch, query]);
-
-  return {
-    isLoading,
-    results: results || [],
-  };
-}
-
-export default useSearchStops;

package/src/utils/hooks/useSearchTrains.tsx

@@ -1,83 +0,0 @@
-import debounce from "lodash.debounce";
-import { RealtimeRestAPI } from "mobility-toolbox-js/ol";
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import useMapContext from "./useMapContext";
-
-import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
-
-import type { SearchResponse } from "./useSearchStops";
-
-function useSearchTrains(
-  query: string,
-): SearchResponse<RealtimeRouteIdentifierMatch> {
-  const { apikey, hasRealtime, realtimeresturl, realtimetenant, tenant } =
-    useMapContext();
-
-  const [results, setResults] = useState<
-    RealtimeRouteIdentifierMatch[] | undefined
-  >();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const tenantMemo = useMemo(() => {
-    return realtimetenant || tenant;
-  }, [realtimetenant, tenant]);
-
-  const api = useMemo(() => {
-    if (!apikey || !tenantMemo || !hasRealtime) {
-      return null;
-    }
-    return new RealtimeRestAPI({
-      apiKey: apikey,
-      tenant: tenantMemo,
-      url: realtimeresturl,
-    });
-  }, [apikey, tenantMemo, hasRealtime, realtimeresturl]);
-
-  const debouncedSearch = useMemo(() => {
-    let abortCtrl: AbortController | undefined;
-
-    return debounce((q?: string) => {
-      abortCtrl?.abort();
-      abortCtrl = new AbortController();
-
-      setIsLoading(true);
-      api
-        .trainsByRouteIdentifier(
-          {
-            exact_match: false,
-            query: q,
-          },
-          { signal: abortCtrl.signal },
-        )
-        .then((res) => {
-          setResults(res.matches);
-          setIsLoading(false);
-        })
-        .catch((e) => {
-          // AbortError is expected
-          if (e.code !== 20) {
-            // eslint-disable-next-line no-console
-            console.error("Failed to fetch trains by route identifier", e);
-            return;
-          }
-          setIsLoading(false);
-        });
-    }, 150);
-  }, [api]);
-
-  useEffect(() => {
-    if (!query || !api) {
-      setResults([]);
-      return;
-    }
-    debouncedSearch(query);
-  }, [api, debouncedSearch, query]);
-
-  return {
-    isLoading,
-    results: results || [],
-  };
-}
-
-export default useSearchTrains;

package/src/utils/hooks/useZoom.tsx

@@ -1,44 +0,0 @@
-import { unByKey } from "ol/Observable";
-import { useEffect, useState } from "preact/hooks";
-
-import useMapContext from "./useMapContext";
-
-const useZoom = () => {
-  const { map } = useMapContext();
-  const [zoom, setZoom] = useState(map?.getView()?.getZoom());
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    let timeout;
-    const view = map.getView();
-    if (view) {
-      setZoom(view.getZoom());
-    }
-    const onZoomChange = (evt) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        return setZoom(evt.target.getZoom());
-      }, 150);
-    };
-    let zoomListener = view.on("change:resolution", onZoomChange);
-
-    const key = map.on("change:view", () => {
-      const vieww = map.getView();
-      unByKey(zoomListener);
-      if (vieww) {
-        setZoom(vieww.getZoom());
-      }
-      zoomListener = vieww.on("change:resolution", onZoomChange);
-    });
-
-    return () => {
-      clearTimeout(timeout);
-      unByKey(zoomListener);
-      unByKey(key);
-    };
-  }, [map]);
-  return zoom;
-};
-
-export default useZoom;