diff --git a/package-lock.json b/package-lock.json index 65476e3bb..bf9957f70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25841,7 +25841,7 @@ }, "packages/map-template": { "name": "@mapsindoors/map-template", - "version": "1.96.13", + "version": "1.96.14", "dependencies": { "@mapsindoors/components": "*", "@mapsindoors/css": "^3.0.0", diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index ba8ed200e..776203f81 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -5,7 +5,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [1.97.0] - 2026-03-23 +## [1.96.15] - 2026-03-24 + +### Fixed + +- Replaced `useRecoilState` with `useSetRecoilState` across 17 files where only the setter was used, eliminating unnecessary re-render subscriptions. + +## [1.96.14] - 2026-03-23 ### Added diff --git a/packages/map-template/src/components/BottomSheet/BottomSheet.jsx b/packages/map-template/src/components/BottomSheet/BottomSheet.jsx index b30881507..5cfa04cb7 100644 --- a/packages/map-template/src/components/BottomSheet/BottomSheet.jsx +++ b/packages/map-template/src/components/BottomSheet/BottomSheet.jsx @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; import { useState } from 'react'; import { ContainerContext } from './ContainerContext'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import currentLocationState from '../../atoms/currentLocationState'; import filteredLocationsByExternalIDState from '../../atoms/filteredLocationsByExternalIDState'; import Sheet from './Sheet/Sheet'; @@ -62,7 +62,7 @@ function BottomSheet({ directionsFromLocation, directionsToLocation, pushAppView const [filteredLocationsByExternalIDs, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState); - const [, setLocationId] = useRecoilState(locationIdState); + const setLocationId = useSetRecoilState(locationIdState); /* * React on changes on the current location and directions locations and set relevant bottom sheet. diff --git a/packages/map-template/src/components/ChatWindow/ChatSearchResults/ChatSearchResults.jsx b/packages/map-template/src/components/ChatWindow/ChatSearchResults/ChatSearchResults.jsx index f47c6f291..45276f9e9 100644 --- a/packages/map-template/src/components/ChatWindow/ChatSearchResults/ChatSearchResults.jsx +++ b/packages/map-template/src/components/ChatWindow/ChatSearchResults/ChatSearchResults.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import './ChatSearchResults.scss'; import PropTypes from 'prop-types'; import ListItemLocation from '../../WebComponentWrappers/ListItemLocation/ListItemLocation'; @@ -25,8 +25,8 @@ const ChatSearchResults = ({ locations }) => { const [hoveredLocationId, setHoveredLocationId] = useState(null); // Recoil state for location handling - const [, setCurrentLocation] = useRecoilState(currentLocationState); - const [, setIsLocationClicked] = useRecoilState(isLocationClickedState); + const setCurrentLocation = useSetRecoilState(currentLocationState); + const setIsLocationClicked = useSetRecoilState(isLocationClickedState); const [currentVenueName, setCurrentVenueName] = useRecoilState(currentVenueNameState); const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState); const isDesktop = useIsDesktop(); diff --git a/packages/map-template/src/components/Directions/Directions.jsx b/packages/map-template/src/components/Directions/Directions.jsx index 6c9428843..b17bdf790 100644 --- a/packages/map-template/src/components/Directions/Directions.jsx +++ b/packages/map-template/src/components/Directions/Directions.jsx @@ -1,7 +1,7 @@ import { useEffect, useState, useRef } from 'react'; import './Directions.scss'; import { useTranslation } from 'react-i18next'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import mapsIndoorsInstanceState from '../../atoms/mapsIndoorsInstanceState'; import travelModeState from '../../atoms/travelModeState'; import QRCode from '../../assets/qrcode.svg?react'; @@ -68,7 +68,7 @@ function Directions({ isOpen, onBack, onSetSize, onRouteFinished, snapPointSwipe const directions = useRecoilValue(directionsResponseState); - const [, setActiveStep] = useRecoilState(activeStepState); + const setActiveStep = useSetRecoilState(activeStepState); const [substepsOpen, setSubstepsOpen] = useRecoilState(substepsToggledState); @@ -76,7 +76,7 @@ function Directions({ isOpen, onBack, onSetSize, onRouteFinished, snapPointSwipe const isDesktop = useIsDesktop(); - const [, setQRCodeLink] = useRecoilState(qrCodeLinkState) + const setQRCodeLink = useSetRecoilState(qrCodeLinkState) const isDestinationStep = useRecoilValue(isDestinationStepState); diff --git a/packages/map-template/src/components/LocationDetails/ShareLocationLink/ShareLocationLink.jsx b/packages/map-template/src/components/LocationDetails/ShareLocationLink/ShareLocationLink.jsx index 8eb12a671..0190018c9 100644 --- a/packages/map-template/src/components/LocationDetails/ShareLocationLink/ShareLocationLink.jsx +++ b/packages/map-template/src/components/LocationDetails/ShareLocationLink/ShareLocationLink.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import ClickAwayListener from 'react-click-away-listener'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; @@ -36,7 +36,7 @@ function ShareLocationLink({ location, buttonClassName }) { const [showCopyButton, setShowCopyButton] = useState(false); const kioskLocation = useRecoilValue(kioskLocationState); - const [, setQrCodeLink] = useRecoilState(qrCodeLinkState); + const setQrCodeLink = useSetRecoilState(qrCodeLinkState); const isDesktop = useIsDesktop(); diff --git a/packages/map-template/src/components/MapTemplate/MapTemplate.jsx b/packages/map-template/src/components/MapTemplate/MapTemplate.jsx index 840148f3d..2ec4aa697 100644 --- a/packages/map-template/src/components/MapTemplate/MapTemplate.jsx +++ b/packages/map-template/src/components/MapTemplate/MapTemplate.jsx @@ -1,6 +1,6 @@ import { Fragment, useEffect, useRef } from 'react'; import { useState } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { defineCustomElements } from '@mapsindoors/components/dist/components/index.js'; import i18n from 'i18next'; import initI18n from '../../i18n/initialize.js'; @@ -146,37 +146,37 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p const [userSelectedLanguage, setUserSelectedLanguage] = useState(false); const [mapOptions, setMapOptions] = useState({ brandingColor: primaryColor }); - const [, setApiKey] = useRecoilState(apiKeyState); - const [, setGmApiKey] = useRecoilState(gmApiKeyState); - const [, setMapboxAccessToken] = useRecoilState(mapboxAccessTokenState); + const setApiKey = useSetRecoilState(apiKeyState); + const setGmApiKey = useSetRecoilState(gmApiKeyState); + const setMapboxAccessToken = useSetRecoilState(mapboxAccessTokenState); const [isMapReady, setMapReady] = useRecoilState(isMapReadyState); const [venuesInSolution, setVenuesInSolution] = useRecoilState(venuesInSolutionState); const [currentLocation, setCurrentLocation] = useRecoilState(currentLocationState); const categories = useRecoilValue(categoriesState); - const [, setLocationId] = useRecoilState(locationIdState); + const setLocationId = useSetRecoilState(locationIdState); const [color, setPrimaryColor] = useRecoilState(primaryColorState); - const [, setLogo] = useRecoilState(logoState); - const [, setGmMapId] = useRecoilState(gmMapIdState); + const setLogo = useSetRecoilState(logoState); + const setGmMapId = useSetRecoilState(gmMapIdState); const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState); const [currentLanguage, setCurrentLanguage] = useRecoilState(languageState); - const [, setKioskLocation] = useRecoilState(kioskLocationState); - const [, setKioskOriginLocationId] = useRecoilState(kioskOriginLocationIdState); - const [, setTimeoutValue] = useRecoilState(timeoutState); + const setKioskLocation = useSetRecoilState(kioskLocationState); + const setKioskOriginLocationId = useSetRecoilState(kioskOriginLocationIdState); + const setTimeoutValue = useSetRecoilState(timeoutState); const isInactive = useInactive(); // Hook to detect if user is inactive. Used in combination with timeout prop to reset the Map Template to initial values after a specified time. - const [, setSupportsUrlParameters] = useRecoilState(supportsUrlParametersState); - const [, setUseKeyboard] = useRecoilState(useKeyboardState); - const [, setMiTransitionLevel] = useRecoilState(miTransitionLevelState); - const [, setSelectedCategory] = useRecoilState(selectedCategoryState); - const [, setSearchAllVenues] = useRecoilState(searchAllVenuesState); - const [, setCategory] = useRecoilState(categoryState); - const [, setHideNonMatches] = useRecoilState(hideNonMatchesState); - const [, setshowExternalIDs] = useRecoilState(showExternalIDsState); - const [, setShowRoadNames] = useRecoilState(showRoadNamesState); - const [, setSearchExternalLocations] = useRecoilState(searchExternalLocationsState); - const [, setCenter] = useRecoilState(centerState); + const setSupportsUrlParameters = useSetRecoilState(supportsUrlParametersState); + const setUseKeyboard = useSetRecoilState(useKeyboardState); + const setMiTransitionLevel = useSetRecoilState(miTransitionLevelState); + const setSelectedCategory = useSetRecoilState(selectedCategoryState); + const setSearchAllVenues = useSetRecoilState(searchAllVenuesState); + const setCategory = useSetRecoilState(categoryState); + const setHideNonMatches = useSetRecoilState(hideNonMatchesState); + const setshowExternalIDs = useSetRecoilState(showExternalIDsState); + const setShowRoadNames = useSetRecoilState(showRoadNamesState); + const setSearchExternalLocations = useSetRecoilState(searchExternalLocationsState); + const setCenter = useSetRecoilState(centerState); const [viewModeSwitchVisible, setViewModeSwitchVisible] = useState(); const mapClickActionRef = useRef(); - const [, setWayfindingLocation] = useRecoilState(wayfindingLocationState); + const setWayfindingLocation = useSetRecoilState(wayfindingLocationState); const qrCodeLink = useRecoilValue(qrCodeLinkState) const [showVenueSelector, setShowVenueSelector] = useState(true); @@ -188,7 +188,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p const [isMapPositionInvestigating, setIsMapPositionInvestigating] = useState(false); // The filtered locations by external id, if present. - const [, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState); + const setFilteredLocationsByExternalID = useSetRecoilState(filteredLocationsByExternalIDState); // The filtered locations that the user sets when selecting a category/location. const [filteredLocations, setFilteredLocations] = useRecoilState(filteredLocationsState); @@ -197,13 +197,13 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p const [initialFilteredLocations, setInitialFilteredLocations] = useState(); const [appConfig, setAppConfig] = useRecoilState(appConfigState); - const [, setSolution] = useRecoilState(solutionState); + const setSolution = useSetRecoilState(solutionState); - const [, setTileStyle] = useRecoilState(tileStyleState); - const [, setStartZoomLevel] = useRecoilState(startZoomLevelState); + const setTileStyle = useSetRecoilState(tileStyleState); + const setStartZoomLevel = useSetRecoilState(startZoomLevelState); - const [, setBearing] = useRecoilState(bearingState); - const [, setPitch] = useRecoilState(pitchState); + const setBearing = useSetRecoilState(bearingState); + const setPitch = useSetRecoilState(pitchState); const isDesktop = useIsDesktop(); const resetState = useReset(); @@ -220,7 +220,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p const [setCurrentVenueName, updateCategories] = useCurrentVenue(); const finishRoute = useOnRouteFinished(); - const [, setErrorMessage] = useRecoilState(notificationMessageState); + const setErrorMessage = useSetRecoilState(notificationMessageState); /** * Ensure that MapsIndoors Web SDK is available. diff --git a/packages/map-template/src/components/MapWrapper/MapWrapper.jsx b/packages/map-template/src/components/MapWrapper/MapWrapper.jsx index af1a31268..e689ba637 100644 --- a/packages/map-template/src/components/MapWrapper/MapWrapper.jsx +++ b/packages/map-template/src/components/MapWrapper/MapWrapper.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import MIMap from '../MIMap/MIMap'; import { mapTypes } from '../../constants/mapTypes'; import useLiveData from '../../hooks/useLivedata'; @@ -74,16 +74,16 @@ function MapWrapper({ onLocationClick, onMapPositionKnown, useMapProviderModule, const mapboxAccessToken = useRecoilValue(mapboxAccessTokenState); const [mapType, setMapType] = useRecoilState(mapTypeState); const [mapsIndoorsInstance, setMapsIndoorsInstance] = useRecoilState(mapsIndoorsInstanceState); - const [, setUserPosition] = useRecoilState(userPositionState); - const [, setDirectionsService] = useRecoilState(directionsServiceState); + const setUserPosition = useSetRecoilState(userPositionState); + const setDirectionsService = useSetRecoilState(directionsServiceState); const filteredLocations = useRecoilValue(filteredLocationsState); const filteredLocationsByExternalIDs = useRecoilValue(filteredLocationsByExternalIDState); const tileStyle = useRecoilValue(tileStyleState); const bearing = useRecoilValue(bearingState); const pitch = useRecoilValue(pitchState); - const [, setPositionControl] = useRecoilState(positionControlState); + const setPositionControl = useSetRecoilState(positionControlState); const solution = useRecoilValue(solutionState); - const [, setErrorMessage] = useRecoilState(notificationMessageState); + const setErrorMessage = useSetRecoilState(notificationMessageState); const hideNonMatches = useRecoilValue(hideNonMatchesState); const appConfig = useRecoilValue(appConfigState); const [isViewSelectorVisible, setIsViewSelectorVisible] = useState(false); diff --git a/packages/map-template/src/components/RouteInstructions/RouteInstructions.jsx b/packages/map-template/src/components/RouteInstructions/RouteInstructions.jsx index 9cff8a72f..3cc063c19 100644 --- a/packages/map-template/src/components/RouteInstructions/RouteInstructions.jsx +++ b/packages/map-template/src/components/RouteInstructions/RouteInstructions.jsx @@ -3,7 +3,7 @@ import './RouteInstructions.scss'; import { useTranslation } from 'react-i18next'; import ArrowRight from '../../assets/arrow-right.svg?react'; import ArrowLeft from '../../assets/arrow-left.svg?react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import directionsResponseState from '../../atoms/directionsResponseState'; import activeStepState from '../../atoms/activeStep'; import RouteInstructionsStep from '../WebComponentWrappers/RouteInstructionsStep/RouteInstructionsStep'; @@ -52,7 +52,7 @@ function RouteInstructions({ steps, onNextStep, onPreviousStep, originLocation, const substepsOpen = useRecoilValue(substepsToggledState); - const [, setIsDestinationStep] = useRecoilState(isDestinationStepState); + const setIsDestinationStep = useSetRecoilState(isDestinationStepState); const isKioskContext = useIsKioskContext(); diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 30bb27901..d9dbe9333 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/packages/map-template/src/components/Search/Categories/Categories.jsx @@ -1,5 +1,5 @@ import { useEffect, useState, useRef } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import './Categories.scss'; import categoriesState from '../../../atoms/categoriesState'; import { snapPoints } from '../../../constants/snapPoints'; @@ -51,9 +51,9 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen, t const [selectedCategory, setSelectedCategory] = useRecoilState(selectedCategoryState); - const [, setSearchResults] = useRecoilState(searchResultsState); + const setSearchResults = useSetRecoilState(searchResultsState); - const [, setFilteredLocations] = useRecoilState(filteredLocationsState); + const setFilteredLocations = useSetRecoilState(filteredLocationsState); const scrollableContentSwipePrevent = usePreventSwipe(); diff --git a/packages/map-template/src/components/Search/Search.jsx b/packages/map-template/src/components/Search/Search.jsx index 69518acb9..5537b8e17 100644 --- a/packages/map-template/src/components/Search/Search.jsx +++ b/packages/map-template/src/components/Search/Search.jsx @@ -1,6 +1,6 @@ import './Search.scss'; import { useRef, useState, useEffect } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import appConfigState from '../../atoms/appConfigState'; import categoriesState from '../../atoms/categoriesState'; import currentVenueNameState from '../../atoms/currentVenueNameState'; @@ -89,11 +89,11 @@ function Search({ onSetSize, isOpen, onOpenChat }) { const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState); - const [, setFilteredLocations] = useRecoilState(filteredLocationsState); + const setFilteredLocations = useSetRecoilState(filteredLocationsState); - const [, setCurrentLocation] = useRecoilState(currentLocationState); + const setCurrentLocation = useSetRecoilState(currentLocationState); - const [, setIsLocationClicked] = useRecoilState(isLocationClickedState); + const setIsLocationClicked = useSetRecoilState(isLocationClickedState); const [currentVenueName, setCurrentVenueName] = useRecoilState(currentVenueNameState); @@ -111,7 +111,7 @@ function Search({ onSetSize, isOpen, onOpenChat }) { const isKioskContext = useIsKioskContext(); - const [, setShowLegendDialog] = useRecoilState(isLegendDialogVisibleState); + const setShowLegendDialog = useSetRecoilState(isLegendDialogVisibleState); const [showLegendButton, setShowLegendButton] = useState(false); diff --git a/packages/map-template/src/components/Sidebar/Sidebar.jsx b/packages/map-template/src/components/Sidebar/Sidebar.jsx index 76c59a53b..3224726a4 100644 --- a/packages/map-template/src/components/Sidebar/Sidebar.jsx +++ b/packages/map-template/src/components/Sidebar/Sidebar.jsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import currentLocationState from '../../atoms/currentLocationState'; import filteredLocationsByExternalIDState from '../../atoms/filteredLocationsByExternalIDState'; import Modal from './Modal/Modal'; @@ -43,7 +43,7 @@ Sidebar.propTypes = { function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, currentAppView, appViews, onRouteFinished }) { const [currentLocation, setCurrentLocation] = useRecoilState(currentLocationState); const [filteredLocationsByExternalIDs, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState); - const [, setLocationId] = useRecoilState(locationIdState); + const setLocationId = useSetRecoilState(locationIdState); const kioskLocation = useRecoilValue(kioskLocationState); // Use chat hooks for handling chat interactions diff --git a/packages/map-template/src/components/VenueSelector/VenueSelector.jsx b/packages/map-template/src/components/VenueSelector/VenueSelector.jsx index 5dca1cfab..3e4b4012c 100644 --- a/packages/map-template/src/components/VenueSelector/VenueSelector.jsx +++ b/packages/map-template/src/components/VenueSelector/VenueSelector.jsx @@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'; import { useTranslation } from 'react-i18next'; import { CSSTransition } from 'react-transition-group'; import './VenueSelector.scss'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { usePortalTarget } from '../../hooks/usePortalTarget'; import venuesInSolutionState from '../../atoms/venuesInSolutionState'; import BuildingIcon from '../../assets/building.svg?react'; @@ -34,11 +34,11 @@ function VenueSelector({ onOpen, onClose, active }) { const venueSelectorContentRef = useRef(null); const venuesInSolution = useRecoilValue(venuesInSolutionState); - const [, setVenueWasSelected] = useRecoilState(venueWasSelectedState); + const setVenueWasSelected = useSetRecoilState(venueWasSelectedState); const [currentVenueName, setCurrentVenueName] = useRecoilState(currentVenueNameState); - const [, setIsLocationClicked] = useRecoilState(isLocationClickedState); + const setIsLocationClicked = useSetRecoilState(isLocationClickedState); const portalTarget = usePortalTarget('.venue-selector-portal'); diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index 0ff30137d..4ccc948ea 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx @@ -5,7 +5,7 @@ import CloseIcon from '../../assets/close.svg?react'; import ClockIcon from '../../assets/clock.svg?react'; import WalkingIcon from '../../assets/walk.svg?react'; import SwitchIcon from '../../assets/switch.svg?react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import userPositionState from '../../atoms/userPositionState'; import directionsServiceState from '../../atoms/directionsServiceState'; import currentLocationState from '../../atoms/currentLocationState'; @@ -91,7 +91,7 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction const [activeSearchField, setActiveSearchField] = useState(); /** Indicate if a route has been found */ - const [, setHasFoundRoute] = useRecoilState(hasFoundRouteState); + const setHasFoundRoute = useSetRecoilState(hasFoundRouteState); /** Indicate if search results have been found */ const [hasSearchResults, setHasSearchResults] = useState(true); diff --git a/packages/map-template/src/components/WebComponentWrappers/RouteInstructionsStep/RouteInstructionsStep.jsx b/packages/map-template/src/components/WebComponentWrappers/RouteInstructionsStep/RouteInstructionsStep.jsx index 0789713fb..25ddbc448 100644 --- a/packages/map-template/src/components/WebComponentWrappers/RouteInstructionsStep/RouteInstructionsStep.jsx +++ b/packages/map-template/src/components/WebComponentWrappers/RouteInstructionsStep/RouteInstructionsStep.jsx @@ -1,6 +1,6 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import substepsToggledState from '../../../atoms/substepsToggledState'; import triggerSubstepsState from '../../../atoms/triggerSubstepsState'; import { useIsKioskContext } from '../../../hooks/useIsKioskContext'; @@ -25,7 +25,7 @@ const RouteInstructionsStep = forwardRef(function RouteInstructionsStepComponent const { t } = useTranslation(); const [substepsOpen, setSubstepsOpen] = useRecoilState(substepsToggledState); - const [, setTriggerSubsteps] = useRecoilState(triggerSubstepsState); + const setTriggerSubsteps = useSetRecoilState(triggerSubstepsState); const isKioskContext = useIsKioskContext(); diff --git a/packages/map-template/src/components/WebComponentWrappers/Search/Search.jsx b/packages/map-template/src/components/WebComponentWrappers/Search/Search.jsx index 75515cdf0..f570b6fd4 100644 --- a/packages/map-template/src/components/WebComponentWrappers/Search/Search.jsx +++ b/packages/map-template/src/components/WebComponentWrappers/Search/Search.jsx @@ -1,6 +1,6 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; import useNear from '../../../hooks/useNear'; -import { useRecoilValue, useRecoilState } from 'recoil'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import userPositionState from '../../../atoms/userPositionState'; import languageState from '../../../atoms/languageState'; import searchInputState from '../../../atoms/searchInputState'; @@ -32,7 +32,7 @@ const SearchField = forwardRef(function SearchFieldComponent(props, ref) { const userPosition = useRecoilValue(userPositionState); const language = useRecoilValue(languageState); - const [, setSearchInput] = useRecoilState(searchInputState) + const setSearchInput = useSetRecoilState(searchInputState) const mapboxPlacesSessionToken = sessionStorage.getItem('mapboxPlacesSessionToken'); diff --git a/packages/map-template/src/hooks/useChat.js b/packages/map-template/src/hooks/useChat.js index 5c4ff8bd8..3a12d5962 100644 --- a/packages/map-template/src/hooks/useChat.js +++ b/packages/map-template/src/hooks/useChat.js @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useSetRecoilState, useRecoilValue } from 'recoil'; import filteredLocationsState from '../atoms/filteredLocationsState'; import directionsServiceState from '../atoms/directionsServiceState'; import directionsResponseState from '../atoms/directionsResponseState'; @@ -24,7 +24,7 @@ import { useIsDesktop } from './useIsDesktop'; * @returns {function} handleChatSearchResults - Callback function to handle search results */ export const useChatLocations = () => { - const [, setFilteredLocations] = useRecoilState(filteredLocationsState); + const setFilteredLocations = useSetRecoilState(filteredLocationsState); const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState); const currentVenueName = useRecoilValue(currentVenueNameState); const kioskLocation = useRecoilValue(kioskLocationState); @@ -146,8 +146,8 @@ function getOriginType(origin) { */ export const useChatDirections = (pushAppView, appViews) => { const directionsService = useRecoilValue(directionsServiceState); - const [, setDirectionsResponse] = useRecoilState(directionsResponseState); - const [, setHasFoundRoute] = useRecoilState(hasFoundRouteState); + const setDirectionsResponse = useSetRecoilState(directionsResponseState); + const setHasFoundRoute = useSetRecoilState(hasFoundRouteState); const travelMode = useRecoilValue(travelModeState); const accessibilityOn = useRecoilValue(accessibilityOnState); const shuttleBusOn = useRecoilValue(shuttleBusOnState); diff --git a/packages/map-template/src/hooks/useCurrentVenue.js b/packages/map-template/src/hooks/useCurrentVenue.js index e4ef99f7d..9f3035e85 100644 --- a/packages/map-template/src/hooks/useCurrentVenue.js +++ b/packages/map-template/src/hooks/useCurrentVenue.js @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import venuesInSolutionState from '../atoms/venuesInSolutionState'; import currentVenueNameState from '../atoms/currentVenueNameState'; import mapsIndoorsInstanceState from '../atoms/mapsIndoorsInstanceState'; @@ -22,8 +22,8 @@ export const useCurrentVenue = () => { const venuesInSolution = useRecoilValue(venuesInSolutionState); const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState); const appConfig = useRecoilValue(appConfigState); - const [, setCategories] = useRecoilState(categoriesState); - const [, setSearchResults] = useRecoilState(searchResultsState); + const setCategories = useSetRecoilState(categoriesState); + const setSearchResults = useSetRecoilState(searchResultsState); const searchInput = useRecoilValue(searchInputState); const [initialVenueName, setInitialVenueName] = useRecoilState(initialVenueNameState); diff --git a/packages/map-template/src/hooks/useDirectionsInfo.js b/packages/map-template/src/hooks/useDirectionsInfo.js index 4b1d4eb28..87427101d 100644 --- a/packages/map-template/src/hooks/useDirectionsInfo.js +++ b/packages/map-template/src/hooks/useDirectionsInfo.js @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import getLocationPoint from '../helpers/GetLocationPoint'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import directionsResponseState from '../atoms/directionsResponseState'; import hasFoundRouteState from '../atoms/hasFoundRouteState'; import shuttleBusOnState from '../atoms/shuttleBusOnState'; @@ -13,7 +13,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic const [totalDistance, setTotalDistance] = useState() const [totalTime, setTotalTime] = useState(); const [hasFoundRoute, setHasFoundRoute] = useRecoilState(hasFoundRouteState); - const [, setDirectionsResponse] = useRecoilState(directionsResponseState); + const setDirectionsResponse = useSetRecoilState(directionsResponseState); const [areDirectionsReady, setAreDirectionReady] = useState(); const shuttleBusOn = useRecoilValue(shuttleBusOnState); diff --git a/packages/map-template/src/hooks/useReset.js b/packages/map-template/src/hooks/useReset.js index 88347832f..e791fdc77 100644 --- a/packages/map-template/src/hooks/useReset.js +++ b/packages/map-template/src/hooks/useReset.js @@ -1,4 +1,4 @@ -import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'; +import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'; import activeStepState from '../atoms/activeStep'; import currentLocationState from '../atoms/currentLocationState'; import directionsResponseState from '../atoms/directionsResponseState'; @@ -25,7 +25,7 @@ import userPositionState from '../atoms/userPositionState'; export function useReset() { const initialVenueName = useRecoilValue(initialVenueNameState); - const [, setCurrentVenueName] = useRecoilState(currentVenueNameState); + const setCurrentVenueName = useSetRecoilState(currentVenueNameState); const activeStep = useResetRecoilState(activeStepState); const currentLocation = useResetRecoilState(currentLocationState);