Stashing(client-side search): Remove unused client side search

renoirb · Oct 28, 2024 · 4a5a6ae · 4a5a6ae
1 parent b477661
commit 4a5a6ae
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 113 deletions.
diff --git a/lib/model/content/model.ts b/lib/model/content/model.ts
@@ -149,8 +149,8 @@ export const queryNuxtContent = async (
    * - http://localhost:3000/_content/blog?deep=true
    * - http://localhost:3000/_content/blog?deep=true&created_defined=asdf
    */
-  let ds = $content('blog', { deep: true })
-    .sortBy('created', 'desc')
+  const db = $content('blog', { deep: true })
+    .sortBy('createdAt', 'desc')
     .only([
       'createdAt',
       'excerpt',
@@ -163,11 +163,8 @@ export const queryNuxtContent = async (
       'title',
       'updatedAt',
     ])
-  if (q) {
-    ds = ds.search(q)
-  }
 
-  contents = await ds.fetch()
+  contents = await db.fetch()
   contents = contents.filter((a) =>
     findExcludingRedirectPredicate(a as INuxtContentResult),
   )

diff --git a/pages/blog.vue b/pages/blog.vue
@@ -7,21 +7,6 @@
         v-if="!!$route && $route.params && $route.matched"
         :route="$route"
       />
-      <!-- form
-        class="justify-self-end sm:w-full position-relative flex items-center justify-center"
-        @submit.prevent="submit"
-      >
-        <label for="search" class="sr-only">Search within blog:</label>
-        <input
-          id="search"
-          v-model="q"
-          type="search"
-          autocomplete="off"
-          name="q"
-          placeholder="e.g. linux"
-          class="focus:z-50 focus:shadow-outline w-full px-4 py-2 leading-normal border border-gray-300 rounded"
-        />
-      </form -->
     </div>
     <div
       v-if="
@@ -36,16 +21,14 @@
       <h1>{{ pageTitle }}</h1>
     </div>
     <div class="pages-blog--parent--bottom">
-      <nuxt-child :q="q" />
+      <nuxt-child />
     </div>
   </section>
 </template>
 
 <script lang="ts">
   import Vue from 'vue'
-  export interface Data {
-    q: string
-  }
+  export interface Data {}
   export interface Methods {}
   export interface Computed {
     pageTitle: string
@@ -55,44 +38,12 @@
     components: {
       'app-bread-crumb': () => import('@/components/AppBreadCrumb.vue'),
     },
-    data() {
-      return {
-        q: '',
-      }
-    },
     computed: {
       pageTitle(): string {
         let pageTitle = 'Blog'
-        const q = this.q
-        if (q !== '') {
-          pageTitle += `, search results for «${q}»`
-        }
         return pageTitle
       },
     },
-    watch: {
-      q: {
-        immediate: true,
-        handler(q) {
-          if (this.$router) {
-            this.$router
-              .replace({ query: q !== '' ? { q } : undefined })
-              .catch(() => {})
-          }
-        },
-      },
-    },
-    beforeMount() {
-      const { query = {} } = this.$route
-      const { q = '' } = query
-      this.q = typeof q === 'string' ? q : ''
-    },
-    methods: {
-      submit() {
-        // if you want to send any data into server before redirection then you can do it here
-        this.$router.push('/blog?q=' + this.q)
-      },
-    },
     head() {
       const title = this.pageTitle
       const out = {

diff --git a/pages/blog/_year/_month/index.vue b/pages/blog/_year/_month/index.vue
@@ -8,7 +8,6 @@
         <blog-list-model-by-year
           :show-year="false"
           :contents="contents"
-          :q="$route && $route.query && $route.query.q"
         />
       </div>
     </div>

diff --git a/pages/blog/_year/index.vue b/pages/blog/_year/index.vue
@@ -8,7 +8,6 @@
         <blog-list-model-by-year
           :show-year="false"
           :contents="contents"
-          :q="$route && $route.query && $route.query.q"
         />
       </div>
     </div>

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -5,7 +5,7 @@
         class="body"
         :data-count="contents.length"
       >
-        <blog-list-model-by-year :contents="contents" :q="q" />
+        <blog-list-model-by-year :contents="contents" />
       </div>
       <rb-notice-box v-if="contents.length > 40" variant="info" lang="en">
         <strong slot="header">Apologies for the long list</strong>
@@ -38,19 +38,11 @@
   }
   export interface Methods {}
   export interface Computed {}
-  export interface Props {
-    q: string
-  }
+  export interface Props {}
   export default Vue.extend<Data, Methods, Computed, Props>({
     components: {
       'blog-list-model-by-year': BlogListModelByYear,
     },
-    props: {
-      q: {
-        type: String,
-        default: '',
-      },
-    },
     async asyncData({ $content, route }) {
       let contents: INuxtContentIndexResult[] = []
       contents = await queryNuxtContent($content, route)
@@ -60,28 +52,6 @@
       }
     },
     /*
-    watch: {
-      q: {
-        immediate: true,
-        async handler(val, oldVal) {
-          let pageTitle = 'Blog'
-          if (!val) {
-            this.contents = [] as INuxtContentResult[]
-            return
-          }
-          if (val === oldVal) {
-            // No change, nothing to do
-            return
-          }
-          if (val !== '') {
-            pageTitle += `, search results for «${val}»`
-          }
-          const contents = await queryNuxtContent(this.$content, this.$route)
-          this.contents = contents
-          this.pageTitle = pageTitle
-        },
-      },
-    },
     async beforeMount() {
       const contents = await queryNuxtContent(this.$content, this.$route)
       // This is wrong. Improve. Plz

diff --git a/pages/blog/tag/_tag.vue b/pages/blog/tag/_tag.vue
@@ -24,7 +24,6 @@
       >
         <blog-list-model-by-year
           :contents="contents"
-          :q="$route && $route.query && $route.query.q"
         />
       </div>
     </div>

diff --git a/pages/projects/index.vue b/pages/projects/index.vue
@@ -70,7 +70,6 @@
     pageBlurb: string
     pageLocale: string
     pageTitle: string
-    q: string
   }
   export interface Methods {
     abbreviatize: IAbbreviatize
@@ -79,18 +78,9 @@
   export interface Props {}
   export default Vue.extend<Data, Methods, Computed, Props>({
     watchQuery: true,
-    async asyncData({ $content, route }) {
-      const q = route.query.q
-      let query = $content('projects', { deep: true }).sortBy(
-        'createdAt',
-        'desc',
-      )
-      if (q) {
-        query = query.search(q)
-        // OR query = query.search('title', q)
-      }
-      // const contents = await query.where({ index: { $ne: true } }).fetch()
-      const contents = await query.fetch()
+    async asyncData({ $content }) {
+      const db = $content('projects', { deep: true }).sortBy('createdAt', 'desc')
+      const contents = await db.fetch()
       const pageLocale = 'fr-CA'
       const pageTitle = `Projets`
       const pageBlurb = `Quelques projets personnels que je publie, classé par catégorie.`
@@ -100,16 +90,8 @@
         pageBlurb,
         pageLocale,
         pageTitle,
-        q,
       }
     },
-    watch: {
-      q() {
-        this.$router
-          .replace({ query: this.q ? { q: this.q } : undefined })
-          .catch(() => {})
-      },
-    },
     methods: {
       abbreviatize,
     },