aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Import/AddFromCoordinatesDialog.tsx @ f41a4cd3

import { DialogContent, DialogTitle, Grid, TextField } from '@mui/material'
import { FunctionComponent, useState } from 'react'
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
import * as yup from 'yup'
import { useDispatch } from 'react-redux'
import { mergeWithCurrentPath } from '../trackingToolSlice'
import { MapPointType, PathVariant } from '../Map/pathUtils'
import generateUuid from '../../../utils/id/uuidGenerator'
import { useFormik } from 'formik'
import ContextMenuDialogProps from './contextMenuDialogProps'

interface AddCatalogItemFromCoords {
    latitude: number
    longitude: number
    name: string
}

const AddFromCoordinatesDialog: FunctionComponent<ContextMenuDialogProps> = ({
    latLng,
    closeContextMenu,
}) => {
    const [open, setOpen] = useState(false)
    const dispatch = useDispatch()

    const formik = useFormik({
        initialValues: {
            latitude: latLng[0],
            longitude: latLng[1],
            name: '',
        } as AddCatalogItemFromCoords,
        validationSchema: yup.object().shape({
            latitude: yup.number().required('Latitude is required'),
            longitude: yup.number().required('Longitude is required'),
            name: yup.string().required('Name is required'),
        }),
        onSubmit: (values: AddCatalogItemFromCoords) => {
            dispatch(
                mergeWithCurrentPath([
                    {
                        id: generateUuid(),
                        idx: -1,
                        addToPath: false,
                        type: MapPointType.FromCoordinates,
                        catalogItem: {
                            name: values.name,
                            latitude: values.latitude,
                            longitude: values.longitude,
                        },
                    },
                ] as PathVariant)
            )
        },
    })

    return (
        <ButtonOpenableDialog
            buttonText="Create Location"
            buttonColor="primary"
            buttonVariant="text"
            onCloseCallback={closeContextMenu}
            maxWidth="xs"
            open={open}
            setOpen={setOpen}
            size="small"
        >
            <DialogTitle>Add New Location From Coordinates</DialogTitle>
            <DialogContent>
                <form onSubmit={formik.handleSubmit}>
                    <Grid container spacing={1} sx={{ mt: 1, mb: 1 }}>
                        <Grid item xs={12} md={6}>
                            <TextField
                                fullWidth
                                label="Latitude"
                                name="latitude"
                                type="number"
                                variant="outlined"
                                value={formik.values.latitude}
                                onChange={formik.handleChange}
                                error={
                                    Boolean(formik.errors.latitude) &&
                                    formik.touched.latitude
                                }
                                helperText={
                                    formik.errors.latitude &&
                                    formik.touched.latitude
                                }
                            />
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <TextField
                                fullWidth
                                label="Longitude"
                                name="longitude"
                                type="number"
                                variant="outlined"
                                value={formik.values.longitude}
                                onChange={formik.handleChange}
                                error={
                                    Boolean(formik.errors.longitude) &&
                                    formik.touched.longitude
                                }
                                helperText={
                                    formik.errors.longitude &&
                                    formik.touched.longitude
                                }
                            />
                        </Grid>
                    </Grid>
                    <TextField
                        fullWidth
                        label="Name"
                        name="name"
                        variant="outlined"
                        value={formik.values.name}
                        onChange={formik.handleChange}
                        error={
                            Boolean(formik.errors.name) && formik.touched.name
                        }
                        helperText={formik.errors.name && formik.touched.name}
                    />
                </form>
            </DialogContent>
        </ButtonOpenableDialog>
    )
}

export default AddFromCoordinatesDialog