aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/MapPointDraggableList/MapPointDraggableListItem.tsx @ c0b66eaf

import {
    IconButton,
    ListItem,
    ListItemAvatar,
    ListItemText,
    Typography,
} from '@mui/material'
import { Draggable } from 'react-beautiful-dnd'
import { getMapPointSemanticColor as getMapPointSemanticColor, MapPoint, MapPointType, PathVariant } from '../trackingToolUtils'
import { CatalogItemDto } from '../../../swagger/data-contracts'
import { useDispatch } from 'react-redux'
import { removeMapMarker, updateMapMarker } from '../trackingToolSlice'
import { useMemo } from 'react'
import DragHandleIcon from '@mui/icons-material/DragHandle'
import VisibilityIcon from '@mui/icons-material/Visibility'
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
import AddRoadIcon from '@mui/icons-material/AddRoad'
import RemoveRoadIcon from '@mui/icons-material/RemoveRoad'
import DeleteForeverIcon from '@mui/icons-material/DeleteForever'

export type DraggableListItemProps = {
    list: PathVariant
    idx: number
}

const getFormattedLocationOrEmpty = (catalogItem: CatalogItemDto) => {
    if (!catalogItem || !catalogItem.latitude || !catalogItem.longitude) {
        return 'Location unavailable'
    }

    return `${catalogItem.latitude.toFixed(
        3
    )}°, ${catalogItem.longitude.toFixed(3)}°`
}

const MapPointDraggableListItem = ({ list, idx }: DraggableListItemProps) => {
    const item = list[idx]
    const dispatch = useDispatch()

    // useMemo to prevent unnecessary re-renders which will make the list jumpy
    return useMemo(() => {
        const toggleAddToPath = () => {
            dispatch(
                // updateMapMarkerWithId({
                //     item: {
                //         ...item,
                //         addToPath: !item?.addToPath,
                //     } as MapPoint,
                //     id: item.id,
                // })
                updateMapMarker({
                    ...item,
                    addToPath: !item?.addToPath,
                    idx,
                })
            )
        }

        const toggleHidden = () => {
            dispatch(
                // updateMapMarkerWithId({
                //     item: {
                //         ...item,
                //         hidden: !item?.hidden,
                //     } as MapPoint,
                //     id: item.id,
                // })
                updateMapMarker({
                    ...item,
                    hidden: !item?.hidden,
                    idx,
                })
            )
        }

        const deleteItem = () => {
            dispatch(
                removeMapMarker({
                    ...item,
                    idx,
                })
            )
        }

        return (
            item && (
                <Draggable
                    key={`${item.id}`}
                    draggableId={`${item.id}`}
                    index={idx}
                >
                    {(provided, snapshot) => (
                        <ListItem
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                        >
                            <ListItemAvatar>
                                <DragHandleIcon />
                            </ListItemAvatar>
                            <ListItemText
                                primary={
                                    <Typography
                                        style={{ color: getMapPointSemanticColor(item) }}
                                    >
                                        {item.catalogItem.name ??
                                            'Unknown name'}
                                    </Typography>
                                }
                                secondary={getFormattedLocationOrEmpty(
                                    item.catalogItem
                                )}
                            />
                            {item.type !== MapPointType.LocalCatalog && (
                                <IconButton sx={{ mr: 1 }} onClick={deleteItem}>
                                    <DeleteForeverIcon />
                                </IconButton>
                            )}
                            <IconButton sx={{ mr: 1 }} onClick={toggleHidden}>
                                {item.hidden ? (
                                    <VisibilityOffIcon />
                                ) : (
                                    <VisibilityIcon />
                                )}
                            </IconButton>
                            <IconButton
                                sx={{ mr: 1 }}
                                onClick={toggleAddToPath}
                            >
                                {item.addToPath ? (
                                    <AddRoadIcon />
                                ) : (
                                    <RemoveRoadIcon />
                                )}
                            </IconButton>
                            {/* <FormControlLabel
                            control={
                                <Checkbox
                                    checked={item.addToPath}
                                    onChange={toggleAddToPath}
                                />
                            }
                            label="Add to path"
                        /> */}
                        </ListItem>
                    )}
                </Draggable>
            )
        )
    }, [item, idx, dispatch])
}

export default MapPointDraggableListItem