refactor: create MapContent component

[menachem95]

Description

refactor: I built the component

screenshots

[itsoriki]

Fantastic! Resolves #736

[itsoriki]

@menachem95 do you need any help? I just saw Noam's great suggestion to improve UX regarding the hook you created - do you need clarifications about it?

Btw, I wanna mention that on this Tuesday 8PM there will be a Q&A session so you can ask there if you prefer Maakaf discord

[NoamGaash]

Hi @menachem95 , could you please try npm run lint on your branch?

[menachem95]

Yeah, I think I'm going to need some guidance with that. And I plan to be in the session too

[NoamGaash]

feel free to consult everyone in the discord and slack groups, and please let us know how can we make the contribution experience smoother you're doing a great thing, thanks for putting your efforts to this pull request and apologies for the current status of the CI pipeline. normally, it's more verbose and tells exactly what's the problem with the code. I'll merge a small CI fix to your branch (use git pull to sync with it) and hopefully we'll get a better error message with what's going on there

[NoamGaash]

allright, seems there's a little circular dependency problem - two files are importing each other it can be a problem, because when building the project vite won't know which package should come first

[NoamGaash]

import { useEffect } from 'react'
import { LatLngTuple } from 'leaflet'
import { useMap } from 'react-leaflet'
import { position } from './MapWithLocationsAndPath'
import { MapProps } from './map-types'

export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) {
  const map = useMap()
  const top = Math.min(...positions.map((pos) => pos.loc[0]))
  const left = Math.min(...positions.map((pos) => pos.loc[1]))
  const bottom = Math.max(...positions.map((pos) => pos.loc[0]))
  const right = Math.max(...positions.map((pos) => pos.loc[1]))

  const center = [(top + bottom) / 2, (left + right) / 2] as LatLngTuple

  const zoom = center[0]
    ? map.getBoundsZoom([
        [top, left],
        [bottom, right],
      ])
    : undefined

  useEffect(() => {
    if (center[0] && center[1] && zoom) map.setView(center, zoom, { animate: true })
  }, [...center])
}

[NoamGaash]

Good job, thanks! @all-contributors add @menachem95 for code :clap:

[allcontributors[bot]]

@NoamGaash

I've put up a pull request to add @menachem95! :tada: