aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/DraggableList/DraggableListItem.tsx @ f41a4cd3

import {
    Checkbox,
    FormControlLabel,
    IconButton,
    ListItem,
    ListItemAvatar,
    ListItemText,
} from '@mui/material'
import { Draggable } from 'react-beautiful-dnd'
import { MapPoint, PathVariant } from '../Map/pathUtils'
import { CatalogItemDto } from '../../../swagger/data-contracts'
import { useDispatch } from 'react-redux'
import { updateMapMarkerWithId } 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'

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 DraggableListItem = ({ 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,
                })
            )
        }

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

        return (
            <Draggable
                key={`${item.id}`}
                draggableId={`${item.id}`}
                index={idx}
            >
                {(provided, snapshot) => (
                    <ListItem
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        <ListItemAvatar>
                            <DragHandleIcon />
                        </ListItemAvatar>
                        <ListItemText
                            primary={item.catalogItem.name ?? 'Unknown name'}
                            secondary={getFormattedLocationOrEmpty(
                                item.catalogItem
                            )}
                        />
                        <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 DraggableListItem