components ReportForm.tsx

33.33% Statements 5/15

28.57% Branches 4/14

14.28% Functions 1/7

35.71% Lines 5/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

2x 2x 2x 2x 2x

import { useExecuteWithAltcha } from '../../infrastructure/altcha.service';
import { Box, Button, Card, LoadingOverlay, Stack, Textarea, TextInput } from '@mantine/core';
import { useState } from 'react';
import { useForm } from '@mantine/form';
import { useCreateReport } from '../../application/createReport';
 
 
export function ReportForm({ nickId, onClose }: { nickId: number; onClose?: () => void }) {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { senderEmail: '', reason: '', nickId: nickId },
 
    // functions will be used to validate values at corresponding key
    validate: {
      reason: (value) => (value.length < 10 ? 'Le message doit comporter au moins 10 caractères' : null),
      senderEmail: (value) => (null === value || /^\S+@\S+$/.test(value) ? null : 'Email invalide'),
      nickId: (value) => (null !== value ? null : 'Pseudo introuvable'),
    },
  });
  
  const [isSubmitted, setSubmitted] = useState(false);
  const executeWithAltcha = useExecuteWithAltcha();
  const { mutate: sendReport, isPending } = useCreateReport();
 
  return (
  
    <Card>
    <Box pos="relative">
      <LoadingOverlay visible={isPending || isSubmitted} zIndex={1000} color='pink' overlayProps={{ radius: "sm", blur: 2, opacity: 0.5 }} />
      <p>C'est sans doute inévitable que certains pseudos générés avec le niveau d'offense maximum soient un peu agressifs. N'hésitez à me signaler ceux qui dépassent vraiment les bornes&nbsp;!</p>
      <form onSubmit={form.onSubmit((values) => {
          setSubmitted(true);
          executeWithAltcha(() => {
            sendReport(values, {
              onSuccess: () => {
                form.reset();
                if (onClose) onClose();
              }
            });
            setSubmitted(false);
          })
        })}>
       <Stack gap={20}>
 
        <TextInput
          label="Votre email"
          required
          name="senderEmail"
          placeholder="Votre email"
          {...form.getInputProps('senderEmail')}
        />
 
        <Textarea
          label="Raison du signalement"
          required
          name="reason"
          placeholder="Votre message"
          {...form.getInputProps('reason')}
        />
 
        <input type="hidden" name="nickId" value={nickId} />
          
        <Box>
        <Button 
          type="submit" 
          disabled={isPending || isSubmitted}
        >Go</Button>
        </Box>
      </Stack>
      </form>
    </Box>
    </Card>
  );
}