refactor: components splitting

Author: andreishket

vis/js/templates/Geomap/ZoomControls/config.ts

@@ -0,0 +1,5 @@
+import { Config } from "./types";
+
+export const CONFIG: Config = {
+  position: "bottomright",
+};

vis/js/templates/Geomap/ZoomControls/index.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { ZoomControl } from "react-leaflet";
+import { useSelector } from "react-redux";
+
+import { CONFIG } from "./config";
+import { checkIsWithZoomControl } from "./selectors";
+
+export const ZoomControls: FC = () => {
+  const isWithZoomControl = useSelector(checkIsWithZoomControl);
+
+  if (!isWithZoomControl) {
+    return null;
+  }
+
+  return <ZoomControl {...CONFIG} />;
+};

vis/js/templates/Geomap/ZoomControls/selectors.ts

@@ -0,0 +1,5 @@
+import { State } from "@/js/types";
+
+export const checkIsWithZoomControl = (state: State) => {
+  return state.geomapSettings.featuresConfiguration.isWithZoomControl;
+};

vis/js/templates/Geomap/ZoomControls/types.ts

@@ -0,0 +1,3 @@
+import { Control } from "leaflet";
+
+export type Config = Control.ZoomOptions;

vis/js/templates/Geomap/config.ts

@@ -1,21 +1,16 @@
 import { Config } from "./types";
 
 export const CONFIG: Config = {
-  MAP: {
-    center: [45.1, 4.1],
-    zoom: 4,
-    maxZoom: 17,
-    minZoom: 2,
-    maxBounds: [
-      [-85, -180],
-      [85, 180],
-    ],
-    maxBoundsViscosity: 1.0,
-    worldCopyJump: true,
-    keyboard: false,
-    zoomControl: false,
-  },
-  ZOOM_CONTROL: {
-    position: "bottomright",
-  },
+  center: [45.1, 4.1],
+  zoom: 4,
+  maxZoom: 17,
+  minZoom: 2,
+  maxBounds: [
+    [-85, -180],
+    [85, 180],
+  ],
+  maxBoundsViscosity: 1.0,
+  worldCopyJump: true,
+  keyboard: false,
+  zoomControl: false,
 };

vis/js/templates/Geomap/index.tsx

@@ -1,27 +1,20 @@
 import "leaflet/dist/leaflet.css";
 
 import { FC } from "react";
-import { MapContainer, ZoomControl } from "react-leaflet";
-import { useSelector } from "react-redux";
+import { MapContainer } from "react-leaflet";
 
 import { CONFIG } from "./config";
 import { HeightContainer } from "./HeightContainer";
 import { Layer } from "./Layer";
 import { Pins } from "./Pins";
-import { getGeomapFeaturesSettings } from "./selectors";
+import { ZoomControls } from "./ZoomControls";
 
-const { MAP, ZOOM_CONTROL } = CONFIG;
-
-export const Geomap: FC = () => {
-  const { isWithZoomControl } = useSelector(getGeomapFeaturesSettings);
-
-  return (
-    <HeightContainer>
-      <MapContainer {...MAP} className="geomap_container">
-        {isWithZoomControl && <ZoomControl {...ZOOM_CONTROL} />}
-        <Layer />
-        <Pins />
-      </MapContainer>
-    </HeightContainer>
-  );
-};
+export const Geomap: FC = () => (
+  <HeightContainer>
+    <MapContainer {...CONFIG} className="geomap_container">
+      <ZoomControls />
+      <Layer />
+      <Pins />
+    </MapContainer>
+  </HeightContainer>
+);

vis/js/templates/Geomap/selectors.ts

@@ -1,6 +1,6 @@
-import { Control, MapOptions } from "leaflet";
+import { MapOptions } from "leaflet";
 
-type MapConfig = Required<
+export type Config = Required<
   Pick<
     MapOptions,
     | "center"
@@ -14,10 +14,3 @@ type MapConfig = Required<
     | "zoomControl"
   >
 >;
-
-type ZoomControlConfig = Control.ZoomOptions;
-
-export interface Config {
-  MAP: MapConfig;
-  ZOOM_CONTROL: ZoomControlConfig;
-}