<commit_before>import React, {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import { Link, useHistory } from 'react-router-dom'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import {useMapEvent} from "react-leaflet";
import '../static/css/Map.css'
import 'react-leaflet-markercluster/dist/styles.min.css' // sass

const MapView = ({
  photos,
  bounds,
  location,
  // zoom,
  maxZoom,
  hideAttribution,
}) => {
  let markers = []
  let tileUrl =
    'https://{s}.basemaps.cartocdn.com/spotify_dark/{z}/{x}/{y}{r}.png'
  let attribution = hideAttribution
    ? ''
    : '&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors'
  let tileLayer = <TileLayer attribution={attribution} url={tileUrl} />

  const [latState, setLatState] = useState(30)
  const [lngState, setLngState] = useState(0)
  const [zoomState, setZoomState] = useState(2)
  const [map, setMap] = useState(null);
  const history = useHistory()

  // Use to check the component comes back from next page or not and setStates.
  useEffect(() => {
    if (history.action === "POP"){
      setZoomState(parseInt(localStorage.getItem('mapZoom')))
      setLatState(localStorage.getItem('lat'))
      setLngState(localStorage.getItem('lng'))
    }
  }, [history]);

  // Use to handle map events and set new position and zoom value to map.
  const MapEvents = () => {
    const mapEvents = useMapEvent({
      zoomend: () => {
        localStorage.setItem('mapZoom', mapEvents.getZoom())
        localStorage.setItem('lat', mapEvents.getCenter().lat)
        localStorage.setItem('lng', mapEvents.getCenter().lng)
      },
  });
  const position = [latState? latState : mapEvents.getCenter().lat, lngState? lngState : mapEvents.getCenter().lng]
  const zoom = zoomState? zoomState : mapEvents.getZoom()
  if(map) map.setView(position, zoom);
  return null
  }
  
  if (photos) {
    markers = photos.map((photo, idx) =>
      photo.location ? (
        <Marker
          key={`marker-${photo.id}`}
          position={[photo.location[0], photo.location[1]]}<commit_msg>bug fix - set lat long when user dragging the map<commit_after>import React, {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import { Link, useHistory } from 'react-router-dom'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import {useMapEvent} from "react-leaflet";
import '../static/css/Map.css'
import 'react-leaflet-markercluster/dist/styles.min.css' // sass

const MapView = ({
  photos,
  bounds,
  location,
  // zoom,
  maxZoom,
  hideAttribution,
}) => {
  let markers = []
  let tileUrl =
    'https://{s}.basemaps.cartocdn.com/spotify_dark/{z}/{x}/{y}{r}.png'
  let attribution = hideAttribution
    ? ''
    : '&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors'
  let tileLayer = <TileLayer attribution={attribution} url={tileUrl} />

  const [latState, setLatState] = useState(30)
  const [lngState, setLngState] = useState(0)
  const [zoomState, setZoomState] = useState(2)
  const [map, setMap] = useState(null);
  const history = useHistory()

  // Use to check the component comes back from next page or not and setStates.
  useEffect(() => {
    if (history.action === "POP"){
      setZoomState(parseInt(localStorage.getItem('mapZoom')))
      setLatState(localStorage.getItem('lat'))
      setLngState(localStorage.getItem('lng'))
    }
  }, [history]);

  // Use to handle map events and set new position and zoom value to map.
  const MapEvents = () => {
    const mapEvents = useMapEvent({
      zoomend: () => {
        localStorage.setItem('mapZoom', mapEvents.getZoom())
        localStorage.setItem('lat', mapEvents.getCenter().lat)
        localStorage.setItem('lng', mapEvents.getCenter().lng)
      },
      dragend: () => {
        localStorage.setItem('lat', mapEvents.getCenter().lat)
        localStorage.setItem('lng', mapEvents.getCenter().lng)
      },
  });
  const position = [latState? latState : mapEvents.getCenter().lat, lngState? lngState : mapEvents.getCenter().lng]
  const zoom = zoomState? zoomState : mapEvents.getZoom()
  if(map) map.setView(position, zoom);
  return null
  }
  
  if (photos) {
    markers = photos.map((photo, idx) =>
      photo.location ? (
        <Marker
          key={`marker-${photo.id}`}
          position={[photo.location[0], photo.location[1]]}
{'fraction_non_alphanumeric': 0.15063961182179092, 'fraction_numerical': 0.002646669607410675, 'mean_word_length': 3.7190426638917793, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 20, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1436951', 'n_tokens_mistral': 1479, 'n_tokens_neox': 1472, 'n_words': 323}