Staging deployment

.env

@@ -5,6 +5,7 @@ REACT_APP_BASE_URL=//maps.trafimage.ch
 REACT_APP_MATOMO_URL_BASE=https://analytics.geops.de/
 REACT_APP_MATOMO_SITE_ID=9
 REACT_APP_VECTOR_TILES_URL=https://maps.geops.io
+REACT_APP_VECTOR_TILES_URL=https://maps.test.geops.io
 #REACT_APP_STYLE_REVIEW_PREFIX=
 REACT_APP_SEARCH_URL=https://maps.trafimage.ch
 # REACT_APP_SEARCH_URL=https://wkp.dev.trafimage.geops.ch

package.json

@@ -1,7 +1,7 @@
 {
   "name": "trafimage-maps",
   "description": "trafimage-maps web component",
-  "version": "1.30.17",
+  "version": "1.30.18-beta.0",
   "private": true,
   "main": "build/bundle.js",
   "proxy": "http://127.0.0.1:8000",

src/WebComponent.scss

@@ -35,6 +35,7 @@
 @import "./components/Menu/MenuItemHeader.scss";
 @import "./components/Search/Search.scss";
 @import "./components/Search/SearchToggle.scss";
+@import "./components/Search/SearchInput.scss";
 @import "./components/Share/Share.scss";
 @import "./components/TopicMenu/TopicMenu.scss";
 @import "./components/TopicsMenu/TopicsMenu.scss";

src/components/MapControls/MapControls.js

@@ -90,6 +90,7 @@ function MapControls({
   const dispatch = useDispatch();
   const overlayWidth = useOverlayWidth();
   const screenHeight = useSelector((state) => state.app.screenHeight);
+  const activeTopic = useSelector((state) => state.app.activeTopic);
   const isSmallHeight = useMemo(() => {
     return ["xs", "s"].includes(screenHeight);
   }, [screenHeight]);
@@ -153,7 +154,7 @@ function MapControls({
       className={`wkp-map-controls ${classes.mapControls}`}
       data-testid="map-controls-wrapper"
     >
-      {menuToggler && <MenuToggler />}
+      {menuToggler && (activeTopic?.menuToggler ?? <MenuToggler />)}
       <Zoom
         map={map}
         zoomInChildren={<ZoomIn />}

src/components/MapControls/MenuToggler/MenuToggler.js

@@ -2,6 +2,7 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { makeStyles } from "@mui/styles";
 import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
 import MapButton from "../../MapButton";
 import { ReactComponent as MenuOpen } from "../../../img/sbb/040_hamburgermenu_102_36.svg";
 import { ReactComponent as MenuClosed } from "../../../img/sbb/040_schliessen_104_36.svg";
@@ -11,21 +12,27 @@ const useStyles = makeStyles({
   displayMenuToggler: { padding: "8px" },
 });
 
-function MenuToggler() {
+function MenuToggler({ children, ...props }) {
   const classes = useStyles();
   const { t } = useTranslation();
   const displayMenu = useSelector((state) => state.app.displayMenu);
   const dispatch = useDispatch();
+
   return (
     <MapButton
       className={`wkp-display-menu-toggler ${classes.displayMenuToggler}`}
       onClick={() => dispatch(setDisplayMenu(!displayMenu))}
-      title={t("Menü")}
+      title={displayMenu ? t("Schliessen") : t("Menü")}
       data-testid="map-controls-menu-toggler"
+      {...props}
     >
-      {displayMenu ? <MenuClosed /> : <MenuOpen />}
+      {children ?? (displayMenu ? <MenuClosed /> : <MenuOpen />)}
     </MapButton>
   );
 }
 
+MenuToggler.propTypes = {
+  children: PropTypes.node,
+};
+
 export default MenuToggler;

src/components/Search/Search.js

@@ -1,249 +1,16 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React, { useEffect, useState, useRef } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import Autosuggest from "react-autosuggest";
-import { FaSearch, FaAngleDown, FaAngleUp } from "react-icons/fa";
-import { useTranslation } from "react-i18next";
-import { IconButton, Typography } from "@mui/material";
-import { setFeatureInfo, setSearchOpen } from "../../model/app/actions";
-import useHasScreenSize from "../../utils/useHasScreenSize";
+import React, { useRef } from "react";
+import SearchInput from "./SearchInput";
 import SearchToggle from "./SearchToggle";
 
 import "./Search.scss";
-import CloseButton from "../CloseButton";
-import { trackEvent } from "../../utils/trackingUtils";
-
-const mobileMapPadding = [50, 50, 50, 50];
 
 function Search() {
-  const [suggestions, setSuggestions] = useState([]);
-  const [value, setValue] = useState("");
-  const map = useSelector((state) => state.app.map);
-  const featureInfo = useSelector((state) => state.app.featureInfo);
-  const searchService = useSelector((state) => state.app.searchService);
-  const activeTopic = useSelector((state) => state.app.activeTopic);
-  const isMobile = useHasScreenSize();
   const searchContainerRef = useRef();
-  const { t } = useTranslation();
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (!searchService) {
-      return;
-    }
-    searchService.setUpsert((section, items, position) => {
-      setSuggestions((oldSuggestions) => {
-        const index = oldSuggestions.findIndex((s) => s.section === section);
-        const start = index === -1 ? position : index;
-        const deleteCount = index === -1 ? 0 : 1;
-        const newSuggestions = [...oldSuggestions];
-        newSuggestions.splice(start, deleteCount, { section, items });
-        return newSuggestions;
-      });
-    });
-  }, [searchService, setSuggestions]);
-
-  useEffect(
-    () => searchService && map && searchService.setMap(map),
-    [searchService, map],
-  );
-
-  if (!searchService || !Object.keys(searchService.searches || []).length) {
-    return null;
-  }
 
   return (
-    <div className="wkp-search">
+    <div className="wkp-search" ref={searchContainerRef}>
       <SearchToggle popupAnchor={searchContainerRef?.current}>
-        <Autosuggest
-          multiSection
-          shouldRenderSuggestions={(val) => val.trim().length > 2}
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={(evt) => {
-            searchService.search(evt.value);
-          }}
-          onSuggestionsClearRequested={() => {
-            setSuggestions([]);
-          }}
-          onSuggestionHighlighted={({ suggestion }) =>
-            searchService.highlight(suggestion)
-          }
-          onSuggestionSelected={(e, thing) => {
-            const { suggestion } = thing;
-            trackEvent(
-              {
-                eventType: "action",
-                componentName: "search result",
-                label: searchService.value(suggestion),
-                variant: suggestion.section,
-                location: t(activeTopic?.name, { lng: "de" }),
-                eventName: e.type,
-              },
-              activeTopic,
-            );
-            dispatch(setFeatureInfo());
-            searchService.select(
-              suggestion,
-              isMobile ? mobileMapPadding : undefined,
-            );
-            dispatch(setSearchOpen(false));
-          }}
-          getSuggestionValue={(suggestion) => searchService.value(suggestion)}
-          renderSuggestion={(suggestion) => searchService.render(suggestion)}
-          renderSectionTitle={({ section }) => {
-            const count = searchService.countItems(section);
-            return (
-              count > 0 && (
-                <div
-                  className="wkp-search-section-opener"
-                  onClick={() => searchService.toggleSection(section)}
-                  onKeyPress={() => searchService.toggleSection(section)}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <div className="wkp-search-section-header">
-                    <Typography variant="h4" component="span">
-                      {t(section)}:{" "}
-                    </Typography>
-                    <Typography variant="subtitle1" component="span">
-                      {t("overallResult", { count })}
-                    </Typography>
-                  </div>
-                  {searchService.sectionCollapsed(section) ? (
-                    <FaAngleDown focusable={false} />
-                  ) : (
-                    <FaAngleUp focusable={false} />
-                  )}
-                </div>
-              )
-            );
-          }}
-          getSectionSuggestions={(result) => {
-            return (
-              result?.items?.map((i) => ({ ...i, section: result.section })) ||
-              []
-            );
-          }}
-          inputProps={{
-            autoFocus: true,
-            tabIndex: 0,
-            "aria-label": t("Suchmaske"),
-            onChange: (e, { newValue }) => setValue(newValue),
-            onKeyUp: (e) => {
-              const { key } = e;
-              if (key === "Enter") {
-                trackEvent(
-                  {
-                    eventType: "action",
-                    componentName: "search input",
-                    label: t("Suche starten"),
-                    location: t(activeTopic?.name, { lng: "de" }),
-                    variant: "Suche starten",
-                  },
-                  activeTopic,
-                );
-                const filtered = suggestions.filter((s) => s.items.length > 0);
-                if (filtered.length > 0) {
-                  const { items, section } = filtered[0];
-                  dispatch(setSearchOpen(false));
-                  searchService.select(
-                    { ...items[0], section },
-                    isMobile ? mobileMapPadding : undefined,
-                  );
-                }
-              } else if (key === "ArrowDown" || key === "ArrowUp") {
-                searchService.highlightSection(); // for improved accessibility
-              }
-            },
-            placeholder: searchService.getPlaceholder(t),
-            value,
-          }}
-          renderInputComponent={(inputProps) => {
-            return (
-              <div className="wkp-search-input" ref={searchContainerRef}>
-                <input {...inputProps} />
-                {value && (
-                  <CloseButton
-                    tabIndex={0}
-                    title={t("Suchtext löschen")}
-                    className="wkp-search-button wkp-search-button-clear"
-                    onClick={() => {
-                      setValue("");
-                      searchService.clearHighlight();
-                      searchService.clearSelect();
-                      const searchFeatureInfos = searchService.clearPopup();
-
-                      // We remove the stations feature infos from the current list of feature infos.
-                      if (featureInfo?.length && searchFeatureInfos?.length) {
-                        (searchFeatureInfos || []).forEach(
-                          (searchFeatureInfo) => {
-                            const index = featureInfo?.findIndex((info) => {
-                              return info === searchFeatureInfo;
-                            });
-                            if (index > -1) {
-                              featureInfo.splice(index, 1);
-                            }
-                          },
-                        );
-                        dispatch(setFeatureInfo([...featureInfo]));
-                      }
-                    }}
-                  />
-                )}
-                <IconButton
-                  tabIndex={0}
-                  aria-label={t("Suche starten")}
-                  title={t("Suche starten")}
-                  className="wkp-search-button wkp-search-button-submit"
-                  onClick={() => {
-                    trackEvent(
-                      {
-                        eventType: "action",
-                        componentName: "search button",
-                        label: t("Suche starten"),
-                        location: t(activeTopic?.name, { lng: "de" }),
-                        variant: "Suche starten",
-                      },
-                      activeTopic,
-                    );
-
-                    if (!value) {
-                      // Hide the search input on small screen
-                      dispatch(setSearchOpen(false));
-                    }
-
-                    if (searchService.selectItem) {
-                      // Will zoom on the current selected feature
-                      searchService.select(
-                        searchService.selectItem,
-                        isMobile ? mobileMapPadding : undefined,
-                      );
-                    }
-
-                    // Launch a search
-                    if (value) {
-                      searchService.search(value).then((searchResults) => {
-                        const result = searchResults.find(
-                          (results) => results.items.length > 0,
-                        );
-                        if (result) {
-                          const { items, section } = result;
-                          dispatch(setSearchOpen(false));
-                          searchService.select(
-                            { ...items[0], section },
-                            isMobile ? mobileMapPadding : undefined,
-                          );
-                        }
-                      });
-                    }
-                  }}
-                >
-                  <FaSearch focusable={false} />
-                </IconButton>
-              </div>
-            );
-          }}
-        />
+        <SearchInput />
       </SearchToggle>
     </div>
   );