diff --git a/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx b/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx index 7c293771f088dede0043013f4ba8848be31f5cf8..0263bfd6f9401d6d19d46c63f0ddda73e83268ff 100644 --- a/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx +++ b/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">