refactor: update components structure

Author: andreishket

…mplates/Geomap/ControlTabOrder/index.tsx …apMapBehaviors/ControlTabOrder/index.tsxvis/js/templates/Geomap/ControlTabOrder/index.tsx renamed to vis/js/templates/Geomap/GeomapMapBehaviors/ControlTabOrder/index.tsx vis/js/templates/Geomap/ControlTabOrder/index.tsx renamed to vis/js/templates/Geomap/GeomapMapBehaviors/ControlTabOrder/index.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+
 import { useKeyboardZoom } from "./useKeyboardZoom";
 
 export const KeyboardZoomController: FC = () => {

…/Geomap/KeyboardZoomController/index.tsx …haviors/KeyboardZoomController/index.tsxvis/js/templates/Geomap/KeyboardZoomController/index.tsx renamed to vis/js/templates/Geomap/GeomapMapBehaviors/KeyboardZoomController/index.tsx vis/js/templates/Geomap/KeyboardZoomController/index.tsx renamed to vis/js/templates/Geomap/GeomapMapBehaviors/KeyboardZoomController/index.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+
+import { ControlTabOrder } from "./ControlTabOrder";
+import { KeyboardZoomController } from "./KeyboardZoomController";
+import { SelectionResetHandler } from "./SelectionResetHandler";
+
+/**
+ * Why this component is needed?
+ *
+ * This component is used to handle the map behaviors.
+ * For example, when the user clicks on the map, the selection is reset OR
+ * when the user zooms in or out using the keyboard, the map is zoomed in or out.
+ */
+export const GeomapMapBehaviors: FC = () => (
+  <>
+    <ControlTabOrder />
+    <SelectionResetHandler />
+    <KeyboardZoomController />
+  </>
+);

…eyboardZoomController/useKeyboardZoom.ts …eyboardZoomController/useKeyboardZoom.tsvis/js/templates/Geomap/KeyboardZoomController/useKeyboardZoom.ts renamed to vis/js/templates/Geomap/GeomapMapBehaviors/KeyboardZoomController/useKeyboardZoom.ts vis/js/templates/Geomap/KeyboardZoomController/useKeyboardZoom.ts renamed to vis/js/templates/Geomap/GeomapMapBehaviors/KeyboardZoomController/useKeyboardZoom.ts

@@ -4,21 +4,17 @@ import { FC } from "react";
 import { MapContainer } from "react-leaflet";
 
 import { CONFIG } from "./config";
-import { ControlTabOrder } from "./ControlTabOrder";
+import { GeomapMapBehaviors } from "./GeomapMapBehaviors";
 import { HeightContainer } from "./HeightContainer";
-import { KeyboardZoomController } from "./KeyboardZoomController";
 import { Layer } from "./Layer";
 import { Pins } from "./Pins";
-import { SelectionResetHandler } from "./SelectionResetHandler";
 import { ZoomControls } from "./ZoomControls";
 
 export const Geomap: FC = () => (
   <HeightContainer>
     <MapContainer {...CONFIG} className="geomap_container">
-      <ControlTabOrder />
-      <SelectionResetHandler />
+      <GeomapMapBehaviors />
       <ZoomControls />
-      <KeyboardZoomController />
       <Layer />
       <Pins />
     </MapContainer>