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

import {
    Avatar,
    Checkbox,
    ListItem,
    ListItemAvatar,
    ListItemText,
} from '@mui/material'
import { Draggable } from 'react-beautiful-dnd'
import { MapPoint, PathVariant } from '../Map/pathUtils'
import LocationOnIcon from '@mui/icons-material/LocationOn'
import { CatalogItemDto } from '../../../swagger/data-contracts'
import { useDispatch } from 'react-redux'
import { updateMapMarker, updateMapMarkerWithId } from '../trackingToolSlice'
import { useMemo } from 'react'

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

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

    return `${catalogItem.latitude}°, ${catalogItem.longitude}°`
}

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 toggleHidden = () => {
            dispatch(
                updateMapMarkerWithId({
                    item: {
                        ...item,
                        active: !item?.active,
                    } 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}
                        sx={{
                            background: snapshot.isDragging
                                ? 'rgb(235,235,235)'
                                : 'inherit',
                        }}
                    >
                        <ListItemAvatar>
                            <Avatar>
                                <LocationOnIcon />
                            </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                            primary={item.catalogItem.name ?? 'Unknown name'}
                            secondary={getFormattedLocationOrEmpty(
                                item.catalogItem
                            )}
                        />
                        <Checkbox
                            checked={item.active}
                            onChange={toggleHidden}
                        />
                    </ListItem>
                )}
            </Draggable>
        )
    }, [item, idx, dispatch])
}

export default DraggableListItem