aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/MapPath.tsx @ 7aa6893d

import { Fragment, FunctionComponent, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../redux/store'
import { PathVariant, MapPoint, isMapPointDisplayable } from './pathUtils'
import TextPath from 'react-leaflet-textpath'
import { setPrimaryIdx, updateMapMarker } 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'

export interface MapPathProps {
    idx: number // index of the path in the list
}

type EdgeElement = any

// Blue
export const primaryPathColor = '#346eeb'

// Grey
export const secondaryPathColor = '#878e9c'

const MapPath: FunctionComponent<MapPathProps> = ({ idx }) => {
    const dispatch = useDispatch()

    // Get list of all paths from the store
    // And extract path from them
    const paths = useSelector(
        (state: RootState) => state.trackingTool.pathVariants
    )
    const [path, setPath] = useState<PathVariant>([])
    useEffect(() => {
        // Either set the path if it exists or set it to an empty array
        setPath(paths && paths.length > idx ? paths[idx] : [])
    }, [idx, paths])

    // Primary path index to set the correct color
    const primaryPathIdx = useSelector(
        (state: RootState) => state.trackingTool.primaryPathIdx
    )

    // List of all active map points
    const [displayableMapPoints, setDisplayableMapPoints] = useState<
        MapPoint[]
    >([])
    useEffect(() => {
        // 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.active
        )
        if (activeMapPoints.length < 2) {
            setEdges([])
            return
        }

        // Build edges
        const edges = []
        for (let i = 0; i < activeMapPoints.length - 1; i += 1) {
            const [start, end] = [
                activeMapPoints[i].catalogItem,
                activeMapPoints[i + 1].catalogItem,
            ]
            edges.push(
                <TextPath
                    // Somehow this refuses to work so let it rerender everything ...
                    key={`${start.id}-${end.id}:${start.latitude},${start.longitude}-${end.latitude},${end.longitude}`}
                    positions={[
                        [start.latitude, start.longitude],
                        [end.latitude, end.longitude],
                    ]}
                    text="►"
                    // text=" > > > > "
                    attributes={{
                        'font-size': 19,
                        // Set to primaryPathColor if primary index in the tracking tool is equal to this index
                        fill:
                            primaryPathIdx === idx
                                ? primaryPathColor
                                : secondaryPathColor,
                    }}
                    onClick={() => dispatch(setPrimaryIdx(idx))}
                    repeat
                    center
                    weight={0}
                />
            )
        }
        setEdges(edges)
    }, [dispatch, displayableMapPoints, idx, primaryPathIdx])

    // List of vertices to display
    const [vertices, setVertices] = useState<JSX.Element[]>([])
    useEffect(() => {
        // Iterate over all displayable map points and map them to MapMarker
        setVertices(
            displayableMapPoints.map((item) => (
                <MapMarker
                    key={`${item.catalogItem.latitude}${item.catalogItem.longitude}`}
                    position={[
                        item.catalogItem.latitude as number,
                        item.catalogItem.longitude as number,
                    ]}
                    updatePositionCallbackFn={(position: LatLngTuple) => {
                        dispatch(
                            updateMapMarker({
                                idx,
                                item: {
                                    idx: item.idx,
                                    active: item.active,
                                    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.active}
                                                onChange={() => {
                                                    dispatch(
                                                        updateMapMarker({
                                                            idx,
                                                            item: {
                                                                ...item,
                                                                active: !item.active,
                                                            },
                                                        })
                                                    )
                                                }}
                                            />
                                        }
                                        labelPlacement="end"
                                        label="Active"
                                    />
                                    <CatalogItemDetailDialog
                                        itemId={item.catalogItem.id ?? ''}
                                    />
                                </Stack>
                            </Fragment>
                        </Popup>
                    </Fragment>
                </MapMarker>
            ))
        )
    }, [dispatch, displayableMapPoints, idx])

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

export default MapPath