add yup validation logic

Author: olgarozmetova

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "semi": false
+}

eslint.config.js

@@ -10,5 +10,13 @@ export default defineConfig([
     plugins: { js },
     extends: ['js/recommended'],
   },
-  { files: ['**/*.{js,mjs,cjs}'], languageOptions: { globals: globals.node } },
+  {
+    files: ['**/*.{js,mjs,cjs}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
 ])

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexlet/code",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "description": "RSS reader",
   "homepage": "https://github.com/olgarozmetova/frontend-project-11#readme",
@@ -31,6 +31,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.8"
+    "bootstrap": "^5.3.8",
+    "on-change": "^6.0.1",
+    "yup": "^1.7.1"
   }
 }

package.json

@@ -1 +1,46 @@
 import './style.css'
+import { buildSchema } from './validation.js'
+import { initView } from './view.js'
+
+const state = {
+  feeds: [],
+  form: {
+    status: 'filling',
+    error: null,
+  },
+}
+
+const elements = {
+  form: document.querySelector('.rss-form'),
+  input: document.querySelector('#url-input'),
+  feedback: document.querySelector('.feedback'),
+}
+
+const watched = initView(state, elements)
+
+elements.form.addEventListener('submit', (e) => {
+  e.preventDefault()
+
+  const formData = new FormData(e.target)
+  const url = formData.get('url').trim()
+
+  const data = { url }
+  const schema = buildSchema(watched.feeds)
+
+  watched.form.status = 'filling'
+  watched.form.error = null
+
+  schema
+    .validate(data)
+    .then(({ url }) => {
+      // successful
+      watched.feeds.push(url)
+      watched.form.status = 'success'
+      watched.form.error = null
+    })
+    .catch((err) => {
+      // errors
+      watched.form.status = 'invalid'
+      watched.form.error = err.message
+    })
+})

src/main.js

@@ -0,0 +1,6 @@
+import * as yup from 'yup'
+
+export const buildSchema = urls =>
+  yup.object().shape({
+    url: yup.string().trim().required().url().notOneOf(urls),
+  })

src/validation.js

@@ -0,0 +1,31 @@
+import onChange from 'on-change'
+
+export const initView = (state, elements) => {
+  const watched = onChange(state, (path, value) => {
+    const { input, feedback, form } = elements
+
+    if (path === 'form.error') {
+      if (value) {
+        input.classList.add('is-invalid')
+        feedback.classList.remove('text-success')
+        feedback.classList.add('text-danger')
+        feedback.textContent = 'Ссылка должна быть валидным URL'
+      }
+      else {
+        input.classList.remove('is-invalid')
+        feedback.textContent = ''
+      }
+    }
+
+    if (path === 'form.status' && value === 'success') {
+      feedback.classList.remove('text-danger')
+      feedback.classList.add('text-success')
+      feedback.textContent = 'RSS успешно загружен'
+
+      form.reset()
+      input.focus()
+    }
+  })
+
+  return watched
+}