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

import {
    Avatar,
    Checkbox,
    ListItem,
    ListItemAvatar,
    ListItemText,
} from '@mui/material'
import makeStyles from '@mui/material/styles/makeStyles'
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 { Fragment, useEffect, useState } from 'react'

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

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

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

const DraggableListItem = ({ list, index }: DraggableListItemProps) => {
    const item = list[index]
    const dispatch = useDispatch()
    const toggleHidden = () => {
        dispatch(
            updateMapMarkerWithId({
                item: {
                    ...item,
                    active: !item?.active,
                } as MapPoint,
                id: item.id,
            })
        )
    }

    return (
        <Draggable key={`${item.id}`} draggableId={`${item.id}`} index={index}>
            {(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>
    )
}

export default DraggableListItem