import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' import { useMutation, useQuery, useQueryClient } from 'react-query' import { useSelector } from 'react-redux' import Client, { ErrorInfo, Permission } from '../../../../classes/client' import { activeInstance } from '../../../../redux/clientSlice' import { SimpleDialogProps } from '..' import BaseDialog from '../base-dialog' import List from '@material-ui/core/List' import ListItem from '@material-ui/core/ListItem' import ListItemText from '@material-ui/core/ListItemText' import IconButton from '@material-ui/core/IconButton' import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction' import DeleteIcon from '@material-ui/icons/Delete' import Paper from '@material-ui/core/Paper' import Select from '@material-ui/core/Select' import MenuItem from '@material-ui/core/MenuItem' import Button from '@material-ui/core/Button' import TextField from '@material-ui/core/TextField' import FormControlLabel from '@material-ui/core/FormControlLabel' import Checkbox from '@material-ui/core/Checkbox' import Typography from '@material-ui/core/Typography' import { useStyles } from './style' import RoleIcon from '../../role-icon' import Tooltip from '@material-ui/core/Tooltip' type ShareModel = { emails: string role: 'editor' | 'viewer' message: string } const defaultModel: ShareModel = { emails: '', role: 'editor', message: '' } const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const intl = useIntl() const client: Client = useSelector(activeInstance) const queryClient = useQueryClient() const classes = useStyles() const [showMessage, setShowMessage] = React.useState(false) const [model, setModel] = React.useState(defaultModel) const [error, setError] = React.useState() const deleteMutation = useMutation( (email: string) => { return client.deleteMapPermission(mapId, email) }, { onSuccess: () => { queryClient.invalidateQueries(`perm-${mapId}`) setModel(defaultModel) }, onError: (error: ErrorInfo) => { setError(error) }, } ) const addMutation = useMutation( (model: ShareModel) => { const emails = model.emails.split("'") const permissions = emails.map((email) => { return { email: email, role: model.role } }) return client.addMapPermissions(mapId, model.message, permissions) }, { onSuccess: () => { queryClient.invalidateQueries(`perm-${mapId}`) setModel(defaultModel) }, onError: (error: ErrorInfo) => { setError(error) }, } ) const handleOnClose = (): void => { onClose() } const handleOnChange = (event: React.ChangeEvent): void => { event.preventDefault() const name = event.target.name const value = event.target.value setModel({ ...model, [name as keyof ShareModel]: value }) } const handleOnAddClick = (event: React.MouseEvent): void => { event.stopPropagation() addMutation.mutate(model) } const handleOnDeleteClick = ( event: React.MouseEvent, email: string ): void => { event.stopPropagation() deleteMutation.mutate(email) } const { isLoading, data: permissions = [] } = useQuery( `perm-${mapId}`, () => { return client.fetchMapPermissions(mapId) } ) const formatName = (perm: Permission): string => { return perm.name ? `${perm.name}<${perm.email}>` : perm.email } return (
{ setShowMessage(value) }} style={{ fontSize: '5px' }} control={} label={ } labelPlacement="end" /> {showMessage && ( )}
{!isLoading && ( {permissions && permissions.map((permission) => { return ( } > handleOnDeleteClick(e, permission.email) } > ) })} )}
) } export default ShareDialog