wisemapping-frontend/packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx

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<boolean>(false)
    const [model, setModel] = React.useState<ShareModel>(defaultModel)
    const [error, setError] = React.useState<ErrorInfo>()

    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<HTMLInputElement>): 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<HTMLButtonElement, MouseEvent>): void => {
        event.stopPropagation()
        addMutation.mutate(model)
    }

    const handleOnDeleteClick = (
        event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
        email: string
    ): void => {
        event.stopPropagation()
        deleteMutation.mutate(email)
    }

    const { isLoading, data: permissions = [] } = useQuery<unknown, ErrorInfo, Permission[]>(
        `perm-${mapId}`,
        () => {
            return client.fetchMapPermissions(mapId)
        }
    )

    const formatName = (perm: Permission): string => {
        return perm.name ? `${perm.name}<${perm.email}>` : perm.email
    }

    return (
        <div>
            <BaseDialog
                onClose={handleOnClose}
                title={intl.formatMessage({
                    id: 'share.delete-title',
                    defaultMessage: 'Share with people',
                })}
                description={intl.formatMessage({
                    id: 'share.delete-description',
                    defaultMessage:
                        'Invite people to collaborate with you in the creation of your midnmap. They will be notified by email. ',
                })}
                PaperProps={{ classes: { root: classes.paper } }}
                error={error}
            >
                <div className={classes.actionContainer}>
                    <TextField
                        id="emails"
                        name="emails"
                        required={true}
                        style={{ width: '300px' }}
                        size="small"
                        type="email"
                        variant="outlined"
                        placeholder="Add collaborator email"
                        label="Emails"
                        onChange={handleOnChange}
                        value={model.emails}
                    />

                    <Select
                        variant="outlined"
                        onChange={handleOnChange}
                        value={model.role}
                        name="role"
                        style={{ margin: '0px 10px' }}
                    >
                        <MenuItem value="editor">
                            <FormattedMessage id="share.can-edit" defaultMessage="Can edit" />
                        </MenuItem>
                        <MenuItem value="viewer">
                            <FormattedMessage id="share.can-view" defaultMessage="Can view" />
                        </MenuItem>
                    </Select>

                    <FormControlLabel
                        value="start"
                        onChange={(event, value) => {
                            setShowMessage(value)
                        }}
                        style={{ fontSize: '5px' }}
                        control={<Checkbox color="primary" />}
                        label={
                            <Typography variant="subtitle2">
                                <FormattedMessage
                                    id="share.add-message"
                                    defaultMessage="Add message"
                                />
                            </Typography>
                        }
                        labelPlacement="end"
                    />

                    <Button
                        color="primary"
                        type="button"
                        variant="contained"
                        disableElevation={true}
                        onClick={handleOnAddClick}
                    >
                        <FormattedMessage id="share.add-button" defaultMessage="Add" />
                    </Button>

                    {showMessage && (
                        <TextField
                            multiline
                            rows={3}
                            rowsMax={3}
                            className={classes.textArea}
                            variant="filled"
                            name="message"
                            onChange={handleOnChange}
                            value={model.message}
                            label={intl.formatMessage({
                                id: 'share.message',
                                defaultMessage: 'Message',
                            })}
                        />
                    )}
                </div>

                {!isLoading && (
                    <Paper elevation={1} className={classes.listPaper} variant="outlined">
                        <List>
                            {permissions &&
                                permissions.map((permission) => {
                                    return (
                                        <ListItem
                                            key={permission.email}
                                            role={undefined}
                                            dense
                                            button
                                        >
                                            <ListItemText
                                                id={permission.email}
                                                primary={formatName(permission)}
                                            />

                                            <RoleIcon role={permission.role} />
                                            <ListItemSecondaryAction>
                                                <Tooltip
                                                    title={
                                                        <FormattedMessage
                                                            id="share.delete"
                                                            defaultMessage="Delete collaborator"
                                                        />
                                                    }
                                                >
                                                    <IconButton
                                                        edge="end"
                                                        disabled={permission.role == 'owner'}
                                                        onClick={(e) =>
                                                            handleOnDeleteClick(e, permission.email)
                                                        }
                                                    >
                                                        <DeleteIcon />
                                                    </IconButton>
                                                </Tooltip>
                                            </ListItemSecondaryAction>
                                        </ListItem>
                                    )
                                })}
                        </List>
                    </Paper>
                )}
            </BaseDialog>
        </div>
    )
}

export default ShareDialog