From 955d9293df1621e172d3fca225c487f0b833a404 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 15 Jan 2025 07:43:56 +0300
Subject: [PATCH] add dirictives

---
 src/components/PostForm.vue     |  1 +
 src/dirictives/VFocus.js        |  6 ++++++
 src/dirictives/VIntersection.js | 20 ++++++++++++++++++++
 src/dirictives/index.js         |  7 +++++++
 src/main.js                     |  6 ++++++
 src/pages/PostsPage.vue         | 28 +++++++++-------------------
 6 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 src/dirictives/VFocus.js
 create mode 100644 src/dirictives/VIntersection.js
 create mode 100644 src/dirictives/index.js

diff --git a/src/components/PostForm.vue b/src/components/PostForm.vue
index 49b81cb..e20780f 100644
--- a/src/components/PostForm.vue
+++ b/src/components/PostForm.vue
@@ -2,6 +2,7 @@
   <form @submit.prevent="submit">
     <h4>Создание поста</h4>
     <my-input
+        v-focus
         v-model="formState.title"
         class="input"
         type="text"
diff --git a/src/dirictives/VFocus.js b/src/dirictives/VFocus.js
new file mode 100644
index 0000000..e120d8f
--- /dev/null
+++ b/src/dirictives/VFocus.js
@@ -0,0 +1,6 @@
+export default {
+  name: 'focus',
+  mounted(el) {
+    el.focus()
+  }
+}
diff --git a/src/dirictives/VIntersection.js b/src/dirictives/VIntersection.js
new file mode 100644
index 0000000..d50b6e4
--- /dev/null
+++ b/src/dirictives/VIntersection.js
@@ -0,0 +1,20 @@
+export default {
+  name: 'intersection',
+  mounted(el, binding) {
+    const { loadMorePost } = binding.value;
+
+    const options = {
+      rootMargin: "0px",
+      threshold: 1.0,
+    };
+
+    const callback = (entries) => {
+      if (entries[0].isIntersecting) {
+        loadMorePost();
+      }
+    };
+    const observer = new IntersectionObserver(callback, options);
+
+    observer.observe(el)
+  }
+}
diff --git a/src/dirictives/index.js b/src/dirictives/index.js
new file mode 100644
index 0000000..0f7518c
--- /dev/null
+++ b/src/dirictives/index.js
@@ -0,0 +1,7 @@
+import VFocus from '@/dirictives/VFocus';
+import VIntersection from '@/dirictives/VIntersection';
+
+export default [
+  VFocus,
+  VIntersection
+]
diff --git a/src/main.js b/src/main.js
index d25289b..d386362 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App';
 
 import components from '@/components/ui';
+import dirictives from '@/dirictives';
 import router from '@/router/router';
 
 const app = createApp(App);
@@ -10,6 +11,11 @@ components.forEach(component => {
   app.component(component.name, component)
 })
 
+dirictives.forEach(dirictive => {
+  app.directive(dirictive.name, dirictive)
+})
+
+
 app
   .use(router)
   .mount('#app')
diff --git a/src/pages/PostsPage.vue b/src/pages/PostsPage.vue
index c953ae8..20efecb 100644
--- a/src/pages/PostsPage.vue
+++ b/src/pages/PostsPage.vue
@@ -2,7 +2,7 @@
   <div>
     <h1>Страница постов</h1>
 
-    <my-input v-model="searchQuery" placeholder="Поиск" class="search"/>
+    <my-input v-focus v-model="searchQuery" placeholder="Поиск" class="search"/>
 
     <div class="app__btns">
       <my-button @click="showCreateDialog" class="createBtn">
@@ -18,7 +18,7 @@
 
     <div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
     <post-list v-else :posts="sortedAndSearchedPosts" @removePost="removePost" class="postList"/>
-    <div ref="observer" class="observer"></div>
+    <div v-intersection="getIntersectionData()" ref="observer" class="observer"></div>
 <!--    <my-pagination-->
 <!--      :currentPage="page"-->
 <!--      :totalPages="totalPages"-->
@@ -95,6 +95,13 @@ export default {
         alert(e.message);
       }
     },
+    getIntersectionData() {
+      return {
+        loadMorePost: this.loadMorePost,
+        page: this.page,
+        totalPages: this.totalPages,
+      }
+    }
     // changePage(newPage) {
     //   this.page = newPage;
     // }
@@ -103,23 +110,6 @@ export default {
     this.isPostLoading = true;
     await this.fetchPosts()
     this.isPostLoading = false
-
-
-    console.log();
-
-    const options = {
-      rootMargin: "0px",
-      threshold: 1.0,
-    };
-
-    const callback = (entries) => {
-      if (entries[0].isIntersecting && this.page < this.totalPages) {
-        this.loadMorePost();
-      }
-    };
-    const observer = new IntersectionObserver(callback, options);
-
-    observer.observe(this.$refs.observer)
   },
   computed: {
     sortedPost() {