aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Map/MapPath.tsx @ 14588cb6

import { Fragment, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
import TextPath from 'react-leaflet-textpath'
import { updateMapPoint } from '../trackingToolSlice'
import MapMarker from './MapMarker'
import { LatLngTuple } from 'leaflet'
import { Popup, Tooltip } from 'react-leaflet'
import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../../Catalog/CatalogItemDetail'

type EdgeElement = any
const MapPath = () => {
    const dispatch = useDispatch()

    // Displayed path contains all map points
    const path = useSelector(
        (state: RootState) => state.trackingTool.displayedPath
    )
    // Color of the path
    const pathColor = '#346eeb'

    // List of all active map points
    const [displayableMapPoints, setDisplayableMapPoints] = useState<
        MapPoint[]
    >([])
    useEffect(() => {
        if (!path) {
            setDisplayableMapPoints([])
            return
        }

        // Set all displayable vertices
        setDisplayableMapPoints(
            path.filter((mapPoint) => isMapPointDisplayable(mapPoint))
        )
    }, [path])

    // List of all edges in the path
    const [edges, setEdges] = useState<EdgeElement[]>([])
    useEffect(() => {
        // Get all active map points
        const activeMapPoints = displayableMapPoints.filter(
            (item) => item.addToPath && !item.hidden
        )
        if (activeMapPoints.length < 2) {
            setEdges([])
            return
        }
        console.log('rerender')

        // Keep track of already built edges so we do not render excessive amount of them
        // We can use a simple hack where we concatenate id of both and check if it is already in the set
        const existingPaths = new Set<string>()
        const edges = []
        for (let i = 0; i < activeMapPoints.length - 1; i += 1) {
            const edgeId = `${activeMapPoints[i].id}${
                activeMapPoints[i + 1].id
            }`
            if (existingPaths.has(edgeId)) {
                continue
            }
            existingPaths.add(edgeId)
            const [start, end] = [
                activeMapPoints[i].catalogItem,
                activeMapPoints[i + 1].catalogItem,
            ]
            edges.push(
                <TextPath
                    key={edgeId}
                    positions={[
                        [start.latitude, start.longitude],
                        [end.latitude, end.longitude],
                    ]}
                    text="►"
                    attributes={{
                        'font-size': 17,
                        fill: pathColor,
                    }}
                    repeat
                    center
                    weight={0}
                />
            )
        }
        setEdges(edges)
    }, [dispatch, displayableMapPoints])

    // List of vertices to display
    const [vertices, setVertices] = useState<JSX.Element[]>([])
    useEffect(() => {
        // Iterate over all displayable map points and map them to MapMarker
        const uniqueMapPoints = new Set<string>()
        setVertices(
            displayableMapPoints
                .filter((mapPoint) => {
                    if (uniqueMapPoints.has(mapPoint.id)) {
                        return false
                    }
                    uniqueMapPoints.add(mapPoint.id)
                    return true
                })
                .map((item) => (
                    <MapMarker
                        key={item.id}
                        position={[
                            item.catalogItem.latitude as number,
                            item.catalogItem.longitude as number,
                        ]}
                        mapPoint={item}
                        updatePositionCallbackFn={(position: LatLngTuple) => {
                            dispatch(
                                updateMapPoint({
                                    ...item,
                                    catalogItem: {
                                        ...item.catalogItem,
                                        latitude: position[0],
                                        longitude: position[1],
                                    },
                                })
                            )
                        }}
                    >
                        <Fragment>
                            <Tooltip>
                                {/* <Typography> */}
                                {item.catalogItem.name ?? ''}
                                {/* </Typography> */}
                            </Tooltip>
                            <Popup>
                                <Fragment>
                                    <Stack direction="column" sx={{ m: 0 }}>
                                        <Typography
                                            variant="h6"
                                            fontWeight="bold"
                                            fontSize={16}
                                        >
                                            {formatHtmlStringToReactDom(
                                                item.catalogItem.name as string
                                            )}
                                        </Typography>
                                        <FormControlLabel
                                            control={
                                                <Checkbox
                                                    checked={item.addToPath}
                                                    onChange={() => {
                                                        dispatch(
                                                            updateMapPoint({
                                                                ...item,
                                                                addToPath:
                                                                    !item.addToPath,
                                                            })
                                                        )
                                                    }}
                                                />
                                            }
                                            labelPlacement="end"
                                            label="Active"
                                        />
                                        <CatalogItemDetailDialog
                                            itemId={item.catalogItem.id ?? ''}
                                        />
                                    </Stack>
                                </Fragment>
                            </Popup>
                        </Fragment>
                    </MapMarker>
                ))
        )
    }, [dispatch, displayableMapPoints])

    return (
        <Fragment>
            {vertices}
            {edges}
        </Fragment>
    )
}

export default MapPath