🔍 Display all result if no searchKeyword (#1639)

* 🔍 Display all result if no searchKeyword * 🎨 Use debounce for setting searchKeyword
likecoin · Jun 21, 2024 · ea8f991 · ea8f991
1 parent 9f02d34
commit ea8f991
Showing 1 changed file with 19 additions and 26 deletions.
diff --git a/src/pages/gutenberg/free-audio-books.vue b/src/pages/gutenberg/free-audio-books.vue
@@ -68,10 +68,11 @@
       >
         <IconSearch />
         <input
-          v-model="searchKeyword"
+          :value="searchKeyword"
           class="w-full bg-transparent border-0 focus-visible:outline-none"
           type="text"
           :placeholder="$t('gutenberg_search_placeholder')"
+          @input="debouncedUpdateSearchKeyword"
           @change="handleInputChange"
         />
       </div>
@@ -238,9 +239,10 @@
 
 <script>
 import csvParser from 'csv-parser';
+import debounce from 'lodash.debounce';
+
 import { fetchGutenbergCsv } from '~/util/api';
 import { logTrackerEvent } from '~/util/EventLogger';
-import { APP_LIKE_CO_URL_BASE, EXTERNAL_HOST } from '~/constant';
 
 const DISPLAY_NUMBER = 100;
 
@@ -263,13 +265,6 @@ export default {
   },
   head() {
     const scripts = [];
-    if (this.generatedJSONLD) {
-      scripts.push({
-        hid: 'schema',
-        type: 'application/ld+json',
-        json: this.generatedJSONLD,
-      });
-    }
     return {
       title: this.$t('gutenbergFreeAudioBooksPage_og_title'),
       meta: [
@@ -314,25 +309,17 @@ export default {
     displayData() {
       return this.filteredData.slice(0, this.currentDisplayNumber);
     },
-    generatedJSONLD() {
-      return {
-        '@context': 'https://schema.org',
-        '@type': 'DataFeed',
-        dataFeedElement: this.parsedData.map(row => ({
-          '@context': 'http://www.schema.org',
-          '@type': 'Book',
-          '@id': `${EXTERNAL_HOST}/nft/class/${row.classId}`,
-          name: row.classTitle,
-          author: row.author,
-          url: `${EXTERNAL_HOST}/nft/class/${row.classId}`,
-          identifier: row.classId,
-        })),
-      };
-    },
   },
   watch: {
-    searchKeyword() {
-      this.currentDisplayNumber = DISPLAY_NUMBER;
+    searchKeyword: {
+      handler(value) {
+        if (!value) {
+          this.currentDisplayNumber = this.parsedData.length;
+        } else {
+          this.currentDisplayNumber = DISPLAY_NUMBER;
+        }
+      },
+      immediate: true,
     },
   },
   methods: {
@@ -364,6 +351,12 @@ export default {
     handleInputChange(value) {
       logTrackerEvent(this, 'Gutenberg', 'inputChange', value.target.value, 1);
     },
+    debouncedUpdateSearchKeyword: debounce(
+      function debouncedUpdateSearchKeyword(event) {
+        this.searchKeyword = event.target.value;
+      },
+      300
+    ),
   },
 };