hunt-blacklist-frontend/app/components/reportDialog.tsx

import {
    Button,
    Checkbox,
    Dialog,
    DialogContent,
    DialogTitle,
    Divider,
    FormControlLabel,
    TextField
} from "@mui/material";
import {useState} from "react";
import TitleHeader from "~/components/itemDialog/titleHeader";
import {BlacklistReport} from "~/classes/blacklistReport";
import {sendReport} from '~/api';

export default function ReportDialog({ open, handleClose }: { open: boolean, handleClose: Function }){

    const [link, setLink] = useState('');
    const [nickname, setNickname] = useState('');
    const [comment, setComment] = useState('');
    const [afk, setAfk] = useState(false);
    const [cheater, setCheater] = useState(false);
    const [griefer, setGriefer] = useState(false);
    const [toxic, setToxic] = useState(false);
    const [useless, setUseless] = useState(false);
    const [smurf, setSmurf] = useState(false);
    const [loading, setLoading] = useState(false);

    const clearValues = () => {
        setLink('');
        setNickname('');
        setComment('');
        setAfk(false);
        setCheater(false);
        setGriefer(false);
        setToxic(false);
        setUseless(false);
        setSmurf(false);
    };

    const handleSend = async () => {
        setLoading(true);

        let cleanLink = link.trim().toLowerCase();

        if (cleanLink.endsWith('/')) {
            cleanLink = cleanLink.slice(0, -1);
        }

        setLink(cleanLink);
        let blacklistReport = new BlacklistReport(
            cleanLink,
            nickname,
            comment,
            afk,
            cheater,
            griefer,
            toxic,
            useless,
            smurf
        );

        await sendReport(blacklistReport).then((result: boolean) => {
            setLoading(false);
            clearValues();
            handleClose();
        });
    };

    return (
        <>
            <Dialog
                open={open}
                onClose={() => handleClose()}
            >
                <DialogTitle>
                    <TitleHeader name={'Creating Hunt: Showdown player report'} handleClose={handleClose}/>
                </DialogTitle>
                <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
                <DialogContent>
                    <TextField
                        id="steam-link-field"
                        label="Steam profile link"
                        variant="outlined"
                        value={link}
                        onChange={(e) => setLink(e.target.value)}
                        fullWidth
                        sx={{marginBottom: '20px'}}
                    />
                    <TextField
                        id="steam-nickname-field"
                        label="Steam profile nickname"
                        variant="outlined"
                        value={nickname}
                        onChange={(e) => setNickname(e.target.value)}
                        fullWidth
                        sx={{marginBottom: '20px'}}
                    />
                    <TextField
                        id="steam-comment-field"
                        label="Your comment"
                        variant="outlined"
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                        fullWidth
                        multiline
                        minRows={4}
                        sx={{marginBottom: '20px', color: '#E0E3E7'}}
                    />
                    <div style={{display: 'flex', flexDirection: 'column'}}>
                        <FormControlLabel
                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
                            checked={afk}
                            onChange={(e) => setAfk((e.target as HTMLInputElement).checked)}
                            label="AFK"
                        />
                        <FormControlLabel
                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
                            checked={cheater}
                            onChange={(e) => setCheater((e.target as HTMLInputElement).checked)}
                            label="Cheater"
                        />
                        <FormControlLabel
                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
                            checked={griefer}
                            onChange={(e) => setGriefer((e.target as HTMLInputElement).checked)}
                            label="Griefer"
                        />
                        <FormControlLabel
                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
                            checked={toxic}
                            onChange={(e) => setToxic((e.target as HTMLInputElement).checked)}
                            label="Toxic"
                        />
                        <FormControlLabel
                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
                            checked={useless}
                            onChange={(e) => setUseless((e.target as HTMLInputElement).checked)}
                            label="Useless"
                        />
                        <FormControlLabel
                            control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
                            checked={smurf}
                            onChange={(e) => setSmurf((e.target as HTMLInputElement).checked)}
                            label="Smurf"
                        />
                    </div>
                    <div className="report-dialog-actions" style={{}}>
                        <Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>
                        <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    )
}