Resolve "[MIN-321] form for reporting errors in minerva"

Closes #254 (closed)

src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx

@@ -26,18 +26,38 @@ export const ErrorReportModal: React.FC = () => {
   const message = getValue(errorData?.message);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [errorDataToSend, setValue] = React.useState(errorData);
+  const [errorDataToSend, setValue] = React.useState({
+    url,
+    browser,
+    comment,
+    login,
+    email,
+    javaStacktrace,
+    stacktrace,
+    version,
+    message,
+  });
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const { name, value } = e.target;
+    const { name, checked } = e.target;
+    let { value } = e.target;
     setValue(errorData2 => {
-      // eslint-disable-next-line no-console
-      console.log(name);
-      // eslint-disable-next-line no-console
-      console.log(value);
+      if (name === 'login') {
+        const loginValue = checked ? login : '';
+        const emailValue = checked ? email : '';
 
-      return errorData2;
+        return { ...errorData2, login: loginValue, email: emailValue };
+      }
+      if (name === 'url') {
+        value = checked ? url : '';
+      }
+      if (name === 'browser') {
+        value = checked ? browser : '';
+      }
+      if (name === 'version') {
+        value = checked ? version : '';
+      }
+      return { ...errorData2, [name]: value };
     });
   };
 
@@ -48,21 +68,31 @@ export const ErrorReportModal: React.FC = () => {
   return (
     <div className="w-[800px] border border-t-[#E1E0E6] bg-white">
       <form onSubmit={handleSubmit} className="p-4">
-        <p className="my-4 font-bold"> {message}</p>
+        <p className="my-4 font-bold"> {errorDataToSend.message}</p>
         <p className="my-4">
           If you agree to submit the following information to the minerva maintainers please uncheck
           all boxes that might contain sensitive data.
         </p>
-        <label className="mb-1 mt-4 block text-sm">
+        <label className="mb-1 mt-4 block text-sm" htmlFor="comment">
           <span className="font-semibold">Add comment</span> (max 1000 characters):
         </label>
-        <Input type="textarea" value={comment} className="mb-4 text-sm font-medium text-font-400" />
+        <Input
+          type="textarea"
+          name="comment"
+          id="comment"
+          onChange={handleChange}
+          value={errorDataToSend.comment}
+          className="mb-4 text-sm font-medium text-font-400"
+        />
         <div className="grid grid-cols-[15px_743px] gap-2">
           <label className="flex-1 text-sm font-semibold" htmlFor="url">
             <Input
               styleVariant="primaryWithoutFull"
+              id="url"
+              name="url"
               type="checkbox"
-              checked
+              onChange={handleChange}
+              checked={errorDataToSend.url !== ''}
               className="flex-1 align-bottom text-sm font-semibold"
             />
           </label>
@@ -72,8 +102,11 @@ export const ErrorReportModal: React.FC = () => {
           <label className="block text-sm font-semibold">
             <Input
               styleVariant="primaryWithoutFull"
+              id="browser"
+              name="browser"
               type="checkbox"
-              checked
+              onChange={handleChange}
+              checked={errorDataToSend.browser !== ''}
               className="flex-1 align-bottom text-sm font-semibold"
             />
           </label>
@@ -82,9 +115,12 @@ export const ErrorReportModal: React.FC = () => {
           </label>
           <label className="block text-sm font-semibold">
             <Input
+              id="login"
+              name="login"
               type="checkbox"
+              onChange={handleChange}
+              checked={errorDataToSend.login !== ''}
               styleVariant="primaryWithoutFull"
-              checked
               className="flex-1 align-bottom text-sm font-semibold"
             />
           </label>
@@ -94,8 +130,11 @@ export const ErrorReportModal: React.FC = () => {
           <label className="block text-sm font-semibold">
             <Input
               styleVariant="primaryWithoutFull"
+              id="version"
+              name="version"
               type="checkbox"
-              checked
+              onChange={handleChange}
+              checked={errorDataToSend.version !== ''}
               className="flex-1 align-bottom text-sm font-semibold"
             />
           </label>
@@ -106,11 +145,11 @@ export const ErrorReportModal: React.FC = () => {
 
         <div className="my-4 block max-h-20 overflow-auto border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
           Stacktrace:
-          <pre>{stacktrace}</pre>
+          <pre>{errorDataToSend.stacktrace}</pre>
         </div>
         <div className="my-4 block max-h-20 overflow-auto border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
           Backend stacktrace:
-          <pre>{javaStacktrace}</pre>
+          <pre>{errorDataToSend.javaStacktrace}</pre>
         </div>
 
         <Button type="submit" className="w-full justify-center text-base font-medium">