aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/TrackingTool.tsx @ 11fca75a

import {
    Button,
    Card,
    CardContent,
    Grid,
    Stack,
    Typography,
} from "@mui/material"
import { Fragment, useEffect, useRef, useState } from "react"
import { MapContainer, TileLayer, useMap } from "react-leaflet"
import mapConfig from "../../config/mapConfig"
import TextPath from "react-leaflet-textpath"
import PlaintextUpload from "./PlaintextUpload"
import FileUpload from "./FileUpload"
import L, { Map } from "leaflet"
import DeleteIcon from "@mui/icons-material/Delete"
import { PathDto } from "../../swagger/data-contracts"
import { formatHtmlStringToReactDom } from "../../utils/formatting/HtmlUtils"
import MapPath from "./MapPath"
import EditIcon from "@mui/icons-material/Edit"
import { useDispatch, useSelector } from "react-redux"
import { RootState } from "../redux/store"
import { clear, consumeErr as consumeError } from "./trackingToolSlice"
import { showNotification } from "../Notification/notificationSlice"
import ClearIcon from "@mui/icons-material/Clear"

// Page with tracking tool
const TrackingTool = () => {
    const dispatch = useDispatch()

    // Path response from the API
    const pathDto = useSelector(
        (state: RootState) => state.trackingTool.pathDto
    )
    const pathVariants = useSelector(
        (state: RootState) => state.trackingTool.pathVariants
    )
    const mapCenter = useSelector(
        (state: RootState) => state.trackingTool.mapCenter
    )

    // Consume any error
    const err = useSelector((state: RootState) => state.trackingTool.lastError)
    useEffect(() => {
        if (!err) {
            return
        }
        const error = `${err}`
        dispatch(consumeError())
        dispatch(
            showNotification({
                message: error,
                severity: "error",
            })
        )
    }, [err, dispatch])

    const mapRef = useRef<Map | undefined>(undefined)
    useEffect(() => {
        if (!mapRef || !mapRef.current) {
            console.log("No map ref")
            return
        }

        const map = mapRef.current
        map.setView(mapCenter, mapConfig.defaultZoom, {
            animate: true,
        })
    }, [mapCenter, mapRef])

    return (
        <Fragment>
            <Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
                Tracking Tool
            </Typography>

            <Grid container>
                <Grid item xs={12}>
                    {pathDto && pathDto?.foundCatalogItems?.length === 0 && (
                        <Typography
                            variant="body1"
                            sx={{ mb: 2 }}
                            fontWeight="500"
                            align="center"
                            color="error.main"
                        >
                            Looks like no path / catalog items match this query.
                        </Typography>
                    )}
                    {!pathDto && (
                        <Stack
                            direction="row"
                            alignItems="flex-start"
                            spacing={2}
                            sx={{ mt: 1 }}
                        >
                            <Typography
                                variant="h5"
                                sx={{ mb: 2 }}
                                fontWeight="500"
                            >
                                Upload:
                            </Typography>
                            <PlaintextUpload />
                            <FileUpload />
                        </Stack>
                    )}

                    {pathDto && (
                        <Stack alignItems="flex-end">
                            <Button
                                startIcon={<ClearIcon />}
                                sx={{ mb: 1 }}
                                variant="contained"
                                onClick={() => dispatch(clear())}
                            >
                                Clear Map
                            </Button>
                        </Stack>
                    )}
                </Grid>

                <Grid
                    item
                    xs={12}
                    md={12}
                    style={{
                        minHeight: "60vh",
                        maxHeight: "100vh",
                        width: "100%",
                    }}
                >
                    <MapContainer
                        center={[mapCenter[0], mapCenter[1]]}
                        zoom={mapConfig.defaultZoom}
                        style={{ height: "100%", minHeight: "100%" }}
                        whenCreated={(map) => { mapRef.current = map }}
                    >
                        <TileLayer
                            attribution={mapConfig.attribution}
                            url={mapConfig.url}
                        />
                        {pathVariants?.map((pathVariant, idx) => (
                            <MapPath idx={idx} />
                        ))}
                    </MapContainer>
                    {pathDto && (
                        <Fragment>
                            <Card variant="outlined" sx={{ mt: 2 }}>
                                <CardContent>
                                    <Stack direction="column">
                                        <Typography
                                            variant="h5"
                                            sx={{ mb: 1 }}
                                            fontWeight="600"
                                        >
                                            Processed Text
                                        </Typography>
                                        <Typography variant="body2">
                                            {formatHtmlStringToReactDom(
                                                pathDto.text ?? ""
                                            )}
                                        </Typography>
                                    </Stack>
                                </CardContent>
                            </Card>
                        </Fragment>
                    )}
                </Grid>
            </Grid>
        </Fragment>
    )
}

export default TrackingTool