update 2 files and delete 2 files

src/App.js

@@ -179,7 +179,7 @@ function App() {
         </div> */}
 
         {/* <Digikala /> */}
-        {/* <TestComponentNew /> */}
+        <TestComponentNew />
       </div>
     </Provider>
   );

src/components/TestComponentNew/Grid.js

@@ -1,31 +0,0 @@
-import L from "leaflet";
-import { GridLayer, withLeaflet } from "react-leaflet";
-
-class Grid extends GridLayer {
-  createLeafletElement() {
-    const Grid = L.GridLayer.extend({
-      createTile: () => {
-        const tile = document.createElement("div");
-        tile.style.outline = "1px solid black";
-        return tile;
-      },
-    });
-    return new Grid({ tileSize: 100 });
-  }
-
-  componentDidMount() {
-    const { map } = this.props.leaflet;
-    if (this.props.showGrid) this.leafletElement.addTo(map);
-  }
-
-  updateLeafletElement(fromProps, toProps) {
-    const { map } = this.props.leaflet;
-    if (toProps.showGrid !== fromProps.showGrid) {
-      toProps.showGrid
-        ? this.leafletElement.addTo(map)
-        : this.leafletElement.removeFrom(map);
-    }
-  }
-}
-
-export default withLeaflet(Grid);

src/components/TestComponentNew/index.js

@@ -1,78 +1,7 @@
-import React, { useState, useRef, useMemo } from "react";
-import {
-  MapContainer,
-  TileLayer,
-  FeatureGroup,
-  Rectangle,
-  useMap,
-  LayerGroup,
-  ZoomControl,
-  ScaleControl,
-} from "react-leaflet";
-import "leaflet/dist/leaflet.css";
-import "leaflet-draw/dist/leaflet.draw.css";
-import { EditControl } from "react-leaflet-draw";
-import "leaflet-draw";
-import "./index.scss";
-import grid from "../../assets/images/grid.png";
-// import Grid from "./Grid";
-const outerBounds = [
-  [50.505, -29.09],
-  [52.505, 29.09],
-];
+import React from "react";
 
-const TestComponentNew = () => {
-  const leafEl = useRef(null);
-  const onCreated = (e) => {
-    const drawnItems = leafEl.current._layers;
-    console.log({ drawnItems });
-    // if (Object.keys(drawnItems).length > 1) {
-    //   Object.keys(drawnItems).forEach((layerid, index) => {
-    //     if (index > 0) return;
-    //     const layer = drawnItems[layerid];
-    //     leafEl.current.removeLayer(layer);
-    //   });
-    //   console.log(drawnItems);
-    // }
+const index = () => {
+  return <div>index</div>;
 };
 
-  return (
-    <MapContainer
-      center={[49.505, -2.09]}
-      zoom={24}
-      maxZoom={24}
-      maxNativeZoom={22}
-      style={{ height: "100vh" }}
-      zoomControl={false}
-      bounds={outerBounds}
-    >
-      <TileLayer
-        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
-        apikey="db5ae1f5778a448ca662554581f283c5"
-        maxZoom={24}
-        maxNativeZoom={22}
-        opacity={0.8}
-      />
-      <TileLayer
-        url={grid}
-        apikey="db5ae1f5778a448ca662554581f283c5"
-        maxZoom={24}
-        maxNativeZoom={24}
-        opacity={0.5}
-      />
-      <FeatureGroup ref={leafEl}>
-        <EditControl
-          position="topright"
-          onCreated={onCreated}
-          allowIntersection={false}
-        />
-      </FeatureGroup>
-      <LayerGroup></LayerGroup>
-      <ScaleControl position="topleft" />
-      <ZoomControl position="topleft" />
-    </MapContainer>
-  );
-};
-
-export default TestComponentNew;
+export default index;

src/components/TestComponentNew/index.scss

@@ -1,12 +0,0 @@
-.leaflet-container {
-  width: 100%;
-  height: 100vh;
-}
-.leaflet-control-scale-line:not(:first-child) {
-  display: none !important;
-}
-.leaflet-tile {
-  border: 1px solid gray;
-
-  box-sizing: content-box;
-}