[Hexlet#276]. update js script, update tests, add override handleMeth…

…odArgumentNotValid method
kitdim · Jun 29, 2024 · 059a72c · 059a72c
1 parent 2b27f7e
commit 059a72c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 27 deletions.
diff --git a/src/main/java/io/hexlet/typoreporter/handler/domain/ApiError.java b/src/main/java/io/hexlet/typoreporter/handler/domain/ApiError.java
@@ -14,14 +14,12 @@ public class ApiError {
     private final List<String> errors;
 
     public ApiError(HttpStatus status, String message, List<String> errors) {
-        super();
         this.status = status;
         this.message = message;
         this.errors = errors;
     }
 
     public ApiError(HttpStatus status, String message, String error) {
-        super();
         this.status = status;
         this.message = message;
         errors = Collections.singletonList(error);

diff --git a/src/widget/index.js b/src/widget/index.js
@@ -192,14 +192,35 @@ const generateModal = (state) => {
   };
 };
 
-const resetModalState = (state) => {
-  state.modalShown = false;
-  state.data.reporterComment = '';
-  state.data.textBeforeTypo = '';
-  state.data.textTypo = '';
-  state.data.textAfterTypo = '';
+const resetModalState = (state, errors = new Map()) => {
+  if(errors.size === 0) {
+    state.modalShown = false;
+    state.data.reporterComment = '';
+    state.data.textBeforeTypo = '';
+    state.data.textTypo = '';
+    state.data.textAfterTypo = '';
+  } else {
+    for (let label of errors.keys()) {
+      console.log(label);
+      if (label === 'reporterName') {
+        renderInvalidFeedback('hexlet-correction-modal_ReportTypo-name', errors.get(label));
+      } else {
+        renderInvalidFeedback('hexlet-correction-modal_ReportTypo-comment', errors.get(label));
+      }
+    }
+  }
 };
 
+const renderInvalidFeedback = (elementId, message) => {
+  const targetElement = document.getElementById(elementId);
+  const divElement = document.createElement('div');
+  divElement.className = 'invalid-feedback';
+  divElement.textContent = message;
+  divElement.style.display = 'block';
+
+  targetElement.insertAdjacentElement('afterend', divElement);
+}
+
 const renderModal = (elements, state) => {
   if (state.modalShown) {
     elements.modalEl.style.display = 'block';
@@ -216,7 +237,16 @@ const renderModal = (elements, state) => {
   elements.commentEl.value = '';
 };
 
+const removeInvalidElements = () => {
+  const invalidElements = document.querySelectorAll('.invalid-feedback');
+
+  invalidElements.forEach(element => {
+    element.remove();
+  });
+}
+
 const sendData = (elements, state) => async (event) => {
+  removeInvalidElements();
   event.preventDefault();
   const { value } = elements.inputName;
   state.data.reporterName = value === '' ? 'Anonymous' : value;
@@ -231,19 +261,18 @@ const sendData = (elements, state) => async (event) => {
       body: JSON.stringify(state.data),
     });
     let data = await response.json();
-    if (isSuccessPost(response)) {
+    if (response.status === 201) {
       resetModalState(state);
     } else {
       const errors = getErrors(data);
-      alert(errors);
+      resetModalState(state, errors);
     }
   } catch (error) {
-        let errorText =
-            'Error in plugin integration.\n' +
-            'Check the settings (https://fixit.hexlet.io/workspace/{workspaceID}/integration).';
-        alert(errorText)
-        resetModalState(state);
-        throw new Error('Произошла ошибка:', error);
+    const errorText =
+        'Error in plugin integration.\n' +
+        'Check the settings (https://fixit.hexlet.io/workspace/{workspaceID}/integration).';
+    renderInvalidFeedback('hexlet-correction-modal_ReportTypo-header', errorText);
+    throw new Error('Произошла ошибка:', error);
   }
 };
 
@@ -278,17 +307,15 @@ const isSelectionLeftToRight = (selection) => {
   return range.collapsed;
 }
 
-const isSuccessPost = (response) => {
-  return response.status === 201;
-}
-
 const getErrors = (data) => {
-  let text = 'There are the following errors in the submission form:\n';
-  Object.keys(data.errors).forEach(key => {
-    let message = data.errors[key];
-    text += `${message} \n`;
-  });
-  return text;
+  const errors = new Map();
+
+  for (const [key, message] of Object.entries(data.errors)) {
+    const [label, errorMessage] = message.split(": ");
+    errors.set(label, errorMessage);
+  }
+
+  return errors;
 }
 
 const handleTypoReporter = (options) => {
@@ -309,7 +336,7 @@ const handleTypoReporter = (options) => {
       reporterComment: '',
       textBeforeTypo: '',
       textTypo: '',
-      textAfterTypo: '',
+      textAfterTypo: ''
     },
   };