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

import {
  Button,
  Card,
  CardContent,
  Grid,
  Stack,
  Typography,
} from "@mui/material"
import { Fragment, useEffect, 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 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 = () => {
  // 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)
  const dispatch = useDispatch()

  useEffect(() => {
    if (!err) {
      return
    }
    const error = `${err}`
    dispatch(consumeError())
    dispatch(
      showNotification({
        message: error,
        severity: "error",
      })
    )
  }, [err, dispatch])

  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%" }}
          >
            <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