resolved locate me icon issue when unauth simulation is exited and ro…

…ute box border issue (#277) Co-authored-by: Ahmad Azizi <[email protected]>
aws-geospatial · Nov 7, 2024 · e9b60df · e9b60df
1 parent 3f3dfce
commit e9b60df
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx b/src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx
@@ -84,6 +84,7 @@ interface IProps {
 	isExpandRouteOptionsMobile: boolean;
 	setExpandRouteOptionsMobile: (b: boolean) => void;
 	setSearchBoxValue: Dispatch<SetStateAction<string>>;
+	setShowUnauthSimulationBounds: (b: boolean) => void;
 }
 
 const ResponsiveBottomSheet: FC<IProps> = ({
@@ -124,7 +125,8 @@ const ResponsiveBottomSheet: FC<IProps> = ({
 	setShowRouteBox,
 	isExpandRouteOptionsMobile,
 	setExpandRouteOptionsMobile,
-	setSearchBoxValue
+	setSearchBoxValue,
+	setShowUnauthSimulationBounds
 }) => {
 	const { isDesktop, isMobile, isTablet, isMax556, isDesktopBrowser } = useDeviceMediaQuery();
 	const { unauthNotifications, isAddingGeofence } = useGeofence();
@@ -542,17 +544,21 @@ const ResponsiveBottomSheet: FC<IProps> = ({
 	const footerHeight = useCallback((maxHeight: number) => calculatePixelValue(maxHeight, 50), [calculatePixelValue]);
 
 	const onCloseHandler = useCallback(() => {
+		setShowUnauthSimulationBounds(false);
 		setShowStartUnauthSimulation(false);
 		from === MenuItemEnum.GEOFENCE ? setShowUnauthGeofenceBox(false) : setShowUnauthTrackerBox(false);
 		setConfirmCloseSimulation(false);
 		resetToExplore();
+		geolocateControlRef.current?.trigger();
 	}, [
-		from,
-		resetToExplore,
-		setConfirmCloseSimulation,
+		setShowUnauthSimulationBounds,
 		setShowStartUnauthSimulation,
+		from,
 		setShowUnauthGeofenceBox,
-		setShowUnauthTrackerBox
+		setShowUnauthTrackerBox,
+		setConfirmCloseSimulation,
+		resetToExplore,
+		geolocateControlRef
 	]);
 
 	const ExitSimulation = () => (

diff --git a/src/atomicui/organisms/RouteBox/RouteBox.tsx b/src/atomicui/organisms/RouteBox/RouteBox.tsx
@@ -356,9 +356,8 @@ const RouteBox: FC<RouteBoxProps> = ({
 
 	const handleSearch = useCallback(
 		async (value: string, exact = false, type: InputType, action: string, isQueryId = false) => {
-			setIsSearching(true);
-
 			if (value.length >= 3) {
+				setIsSearching(true);
 				const { lng: longitude, lat: latitude } = mapRef.current?.getCenter() as LngLat;
 
 				if (timeoutIdRef.current) {
@@ -380,9 +379,9 @@ const RouteBox: FC<RouteBoxProps> = ({
 						false,
 						isQueryId
 					);
+					setIsSearching(false);
 				}, 200);
 			}
-			setIsSearching(false);
 		},
 		[mapRef, search, suggestions]
 	);
@@ -549,7 +548,11 @@ const RouteBox: FC<RouteBoxProps> = ({
 		() => (
 			<View
 				className={
-					inputFocused.from || inputFocused.to || !!routeData
+					((inputFocused.from || inputFocused.to) && !isCurrentLocationSelected) ||
+					!!suggestions.from?.length ||
+					!!suggestions.to?.length ||
+					isSearching ||
+					!!routeData
 						? "route-options-container"
 						: "route-options-container bottom-border-radius"
 				}
@@ -569,7 +572,18 @@ const RouteBox: FC<RouteBoxProps> = ({
 				{expandRouteOptions && <MoreOptionsUI />}
 			</View>
 		),
-		[inputFocused.from, inputFocused.to, routeData, expandRouteOptions, onClickRouteOptions, t, MoreOptionsUI]
+		[
+			inputFocused,
+			isCurrentLocationSelected,
+			suggestions.from?.length,
+			suggestions.to?.length,
+			isSearching,
+			routeData,
+			expandRouteOptions,
+			onClickRouteOptions,
+			t,
+			MoreOptionsUI
+		]
 	);
 
 	const onSelectCurrentLocation = (type: InputType) => {
@@ -1057,17 +1071,16 @@ const RouteBox: FC<RouteBoxProps> = ({
 									<Text>{t("route_box__current_location.text")}</Text>
 								</View>
 							)}
-
 						{!!suggestions.from?.length
 							? renderSuggestions(suggestions.from, InputType.FROM)
-							: !isSearching &&
+							: isSearching &&
 							  value.from?.length > 2 &&
 							  value.from !== t("route_box__my_location.text") &&
 							  !placeData.from &&
 							  inputFocused.from && <NotFoundCard />}
 						{!!suggestions.to?.length
 							? renderSuggestions(suggestions.to, InputType.TO)
-							: !isSearching &&
+							: isSearching &&
 							  value.to?.length > 2 &&
 							  value.to !== t("route_box__my_location.text") &&
 							  !placeData.to &&

diff --git a/src/atomicui/pages/DemoPage/DemoPage.tsx b/src/atomicui/pages/DemoPage/DemoPage.tsx
@@ -537,6 +537,7 @@ const DemoPage: FC = () => {
 							setSearchBoxValue={setSearchBoxValue}
 							onOpenFeedbackModal={() => setShow(s => ({ ...s, openFeedbackModal: true }))}
 							geolocateControlRef={geolocateControlRef}
+							setShowUnauthSimulationBounds={b => setShow(s => ({ ...s, unauthSimulationBounds: b }))}
 						/>
 					)}
 					{isDesktop && (
@@ -621,10 +622,6 @@ const DemoPage: FC = () => {
 						unauthGeofenceBox: false,
 						unauthTrackerBox: false
 					}));
-					// setTimeout(() => {
-					// 	handleGrabMapChange(tempMapStyle as GrabMapEnum);
-					// 	window.location.reload();
-					// }, 0);
 				}}
 				cancelationText={t("start_unauth_simulation__stay_in_simulation.text")}
 			/>