From 4414de99de833342e233e970614877f5380a434a Mon Sep 17 00:00:00 2001
From: Matthew Kalinin <matthew44@mappable.world>
Date: Tue, 13 Aug 2024 11:30:03 +0300
Subject: [PATCH] Show Error when searching for an error

---
 .../MMapWaypointInput/index.ts                |  3 ++
 src/controls/MMapRouteControl/index.ts        | 37 ++++++++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
index c12f530..301ffc1 100644
--- a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
+++ b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
@@ -36,6 +36,7 @@ export type MMapWaypointInputProps = {
     suggest?: (args: CustomSuggest) => Promise<SuggestResponse> | SuggestResponse;
     onSelectWaypoint?: (args: SelectWaypointArgs | null) => void;
     onMouseMoveOnMap?: (coordinates: LngLat, lastCall: boolean) => void;
+    onError?: () => void;
 };
 
 const defaultProps = Object.freeze({geolocationTextInput: 'My location'});
@@ -289,6 +290,8 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             // eslint-disable-next-line no-console
             console.error(error);
             this._updateIndicatorStatus('empty');
+            this._inputEl.value = '';
+            this._props.onError?.();
         }
     }
 
diff --git a/src/controls/MMapRouteControl/index.ts b/src/controls/MMapRouteControl/index.ts
index ceb420e..0b142c1 100644
--- a/src/controls/MMapRouteControl/index.ts
+++ b/src/controls/MMapRouteControl/index.ts
@@ -192,6 +192,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
     }
 
     protected _onUpdate(diffProps: Partial<MMapRouteControlProps>): void {
+        if (diffProps.search !== undefined) {
+            this._waypointInputFromElement.update({search: diffProps.search});
+            this._waypointInputToElement.update({search: diffProps.search});
+        }
+        if (diffProps.suggest !== undefined) {
+            this._waypointInputFromElement.update({suggest: diffProps.suggest});
+            this._waypointInputToElement.update({suggest: diffProps.suggest});
+        }
         if (diffProps.waypoints !== undefined) {
             this._waypointInputFromElement.update({waypoint: diffProps.waypoints[0]});
             this._waypointInputToElement.update({waypoint: diffProps.waypoints[1]});
@@ -226,14 +234,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
 
     private _createWaypointInput(type: MMapWaypointInputProps['type'], waypoint?: LngLat): MMapWaypointInput {
         const waypointIndex = type === 'from' ? 0 : 1;
-        const {geolocationTextInput, onMouseMoveOnMap} = this._props;
+        const {geolocationTextInput, onMouseMoveOnMap, waypointsPlaceholders, search, suggest} = this._props;
         return new MMapWaypointInput({
             type,
-            inputPlaceholder: this._props.waypointsPlaceholders[waypointIndex],
+            inputPlaceholder: waypointsPlaceholders[waypointIndex],
             waypoint,
-            geolocationTextInput: geolocationTextInput,
-            search: this._props.search,
-            suggest: this._props.suggest,
+            geolocationTextInput,
+            search,
+            suggest,
             onSelectWaypoint: (result) => {
                 if (result === null) {
                     this._waypoints[waypointIndex] = null;
@@ -247,6 +255,11 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
             },
             onMouseMoveOnMap: (coordinates, lastCall) => {
                 onMouseMoveOnMap?.(coordinates, waypointIndex, lastCall);
+            },
+            onError: () => {
+                this._showServerError(() => {
+                    this._rootElement.removeChild(this._routeInfoElement);
+                });
             }
         });
     }
@@ -307,28 +320,34 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
 
         this._routeInfoElement.classList.remove('mappable--route-control_info__error');
         this._routeInfoElement.replaceChildren(createLoadingSpinner());
-        this._rootElement.appendChild(this._routeInfoElement);
 
         try {
             const response = (await this._props.route?.({params, map: this.root})) ?? (await mappable.route(params));
             const route = response[0].toRoute();
             if (route.geometry.coordinates.length !== 0) {
                 this._props.onRouteResult?.(response[0], this._routeMode);
+                this._rootElement.appendChild(this._routeInfoElement);
                 this._routeInfoElement.replaceChildren(...this._getRouteDetails(response[0]));
             } else {
                 this._props.onBuildRouteError?.();
+                this._rootElement.appendChild(this._routeInfoElement);
                 this._routeInfoElement.classList.add('mappable--route-control_info__error');
                 this._routeInfoElement.replaceChildren(...createRouteNoBuildError());
             }
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error(error);
-            this._props.onBuildRouteError?.();
-            this._routeInfoElement.classList.add('mappable--route-control_info__error');
-            this._routeInfoElement.replaceChildren(...createRouteServerError(() => this._route()));
+            this._showServerError(() => this._route());
         }
     }, 200);
 
+    private _showServerError(onButtonClick: () => void) {
+        this._props.onBuildRouteError?.();
+        this._rootElement.appendChild(this._routeInfoElement);
+        this._routeInfoElement.classList.add('mappable--route-control_info__error');
+        this._routeInfoElement.replaceChildren(...createRouteServerError(onButtonClick));
+    }
+
     private _getRouteDetails(response: BaseRouteResponse): HTMLElement[] {
         if (!response.toSteps) {
             return [];