feat: form validation

package.json

@@ -58,6 +58,9 @@
     "@popperjs/core": "^2.11.8",
     "ajv": "^8.12.0",
     "bootstrap": "^5.3.2",
-    "npm-check-updates": "^16.6.2"
+    "i18next": "^23.7.16",
+    "npm-check-updates": "^16.6.2",
+    "on-change": "^5.0.0",
+    "yup": "^1.3.3"
   }
 }

src/init.js

@@ -1,6 +1,45 @@
-// @ts-check
+import * as yup from 'yup';
+import view from './scripts/view.js';
+import strings from './utils/strings.js';
+import { normalizeUrl } from './scripts/utilities.js';
+import domElements from './utils/domElements.js';
+
+const schema = yup.string().required('this is a required field').url();
 
 export default () => {
-  const element = document.getElementById('body');
-  console.log(element);
+  const state = {
+    formState: strings.formStates.init,
+    feedList: [],
+    feedback: null,
+  };
+
+  const watchedState = view(state);
+
+  domElements.form.submit.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const normalizedValue = normalizeUrl(domElements.form.input.value);
+
+    if (state.feedList.includes(normalizedValue)) {
+      watchedState.formState = strings.formStates.invalid;
+      watchedState.feedback = strings.feedback.exists;
+    } else {
+      schema
+        .validate(normalizedValue)
+        .then(() => {
+          watchedState.formState = strings.formStates.sending;
+
+          watchedState.feedList.push(domElements.form.input?.value);
+          watchedState.feedback = strings.feedback.loaded;
+          watchedState.formState = strings.formStates.init;
+
+          domElements.form.input.value = '';
+          domElements.form.input?.focus();
+        })
+        .catch(() => {
+          watchedState.formState = strings.formStates.invalid;
+          watchedState.feedback = strings.feedback.invalidValidation;
+        });
+    }
+  });
 };

src/scripts/utilities.js

@@ -0,0 +1,5 @@
+const normalizeUrl = (url) => url.trim().toLowerCase();
+
+const normalizeError = (error) => error.toString().split(': ')[1];
+
+export { normalizeUrl, normalizeError };

src/scripts/view.js

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import onChange from 'on-change';
+import strings from '../utils/strings.js';
+import domElements from '../utils/domElements.js';
+
+const renderFormState = (value) => {
+  if (value === strings.formStates.sending) {
+    domElements.form.submit?.setAttribute('disabled', '');
+    domElements.form.input?.setAttribute('disabled', '');
+  } else {
+    domElements.form.submit?.removeAttribute('disabled');
+    domElements.form.input?.removeAttribute('disabled');
+  }
+
+  if (value === strings.formStates.invalid) {
+    domElements.form.input?.classList.add('is-invalid');
+  } else {
+    domElements.form.input?.classList.remove('is-invalid');
+  }
+};
+
+const renderFeedback = (value) => {
+  switch (value) {
+    case 'invalidValidation':
+      domElements.form.feedback.textContent = 'Ссылка должна быть валидным URL';
+      break;
+    case 'invalidRss':
+      domElements.form.feedback.textContent = 'Ресурс не содержит валидный RSS';
+      break;
+    case 'exists':
+      domElements.form.feedback.textContent = 'RSS уже существует';
+      break;
+    case 'loaded':
+      domElements.form.feedback.textContent = 'RSS успешно загружен';
+      break;
+    case null:
+      domElements.form.feedback.textContent = '';
+      break;
+    default:
+      throw new Error(value);
+  }
+
+  if (value === 'loaded') {
+    domElements.form.feedback.classList.replace('text-danger', 'text-success');
+  } else {
+    domElements.form.feedback.classList.replace('text-success', 'text-danger');
+  }
+};
+
+const renderFeedList = () => {};
+
+const render = () => (path, value) => {
+  switch (path) {
+    case 'formState':
+      renderFormState(value);
+      break;
+    case 'feedback':
+      renderFeedback(value);
+      break;
+    case 'feedList':
+      renderFeedList();
+      break;
+    default:
+      throw new Error(`Error: unresolved path: ${path}`);
+  }
+};
+
+export default (state) => onChange(state, render());

src/utils/domElements.js

@@ -0,0 +1,7 @@
+export default {
+  form: {
+    input: document.getElementById('url-input'),
+    submit: document.querySelector('button[type="submit"]'),
+    feedback: document.getElementById('form-feedback'),
+  },
+};

src/utils/strings.js

@@ -0,0 +1,14 @@
+export default {
+  formStates: {
+    init: 'init',
+    invalid: 'invalid',
+    sending: 'sending',
+    valid: 'valid',
+  },
+  feedback: {
+    invalidValidation: 'invalidValidation',
+    invalidRss: 'invalidRss',
+    exists: 'exists',
+    loaded: 'loaded',
+  },
+};

template.html

@@ -80,10 +80,10 @@ <h1 class="display-3 mb-0">RSS агрегатор</h1>
                 </div>
               </div>
             </form>
-            <p class="mt-2 mb-0 text-muted">
+            <p class="mt-2 mb-0 text-white-50">
               Пример: https://lorem-rss.hexlet.app/feed
             </p>
-            <p class="feedback m-0 position-absolute small text-danger"></p>
+            <p id="form-feedback" class="feedback m-0 position-absolute small text-danger"></p>
           </div>
         </div>
       </section>