From 8f292147c930fe333cbff4dac5a0aa7186a31de9 Mon Sep 17 00:00:00 2001
From: Tempe Techie <95053628+tempe-techie@users.noreply.github.com>
Date: Tue, 5 Mar 2024 12:55:18 +0100
Subject: [PATCH] search posts feature (only in the general context for now)

---
 components/search/SearchPosts.vue   | 112 ++++++++++++++++++++++++++++
 components/sidebars/SidebarLeft.vue |  11 ++-
 nuxt.config.ts                      |   1 +
 pages/search-posts.vue              |  37 +++++++++
 4 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 components/search/SearchPosts.vue
 create mode 100644 pages/search-posts.vue

diff --git a/components/search/SearchPosts.vue b/components/search/SearchPosts.vue
new file mode 100644
index 00000000..a83268c7
--- /dev/null
+++ b/components/search/SearchPosts.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div class="input-group mb-3">
+      <input 
+        type="text" 
+        class="form-control text-center" 
+        placeholder="enter a search term" 
+        v-model="queryTerm"
+        v-on:keyup.enter="search"
+      >
+    </div>
+
+    <div class="text-center">
+      <button class="btn btn-primary mt-2 mb-4" :disabled="!queryTerm || waitingLoadPosts" @click="search">
+        Search
+      </button>
+    </div>
+    
+    <div v-if="orbisPosts">
+      <ChatPost  
+        v-for="post in orbisPosts" 
+        :key="post.stream_id"
+        :post="post"
+        :orbisContext="selectedContext" />
+    </div>
+
+    <div class="d-flex justify-content-center mt-5 mb-4" v-if="searched && queryTerm && orbisPosts.length === 0 && !waitingLoadPosts">
+      <p>No posts. Try a different query.</p>
+    </div>
+
+    <div class="d-flex justify-content-center mb-3" v-if="waitingLoadPosts">
+      <span class="spinner-border spinner-border-lg" role="status" aria-hidden="true"></span>
+    </div>
+    
+    <div class="d-grid gap-2 col-6 mx-auto mb-5" v-if="showLoadMore">
+      <button class="btn btn-primary" type="button" @click="search">Load more posts</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatPost from "~/components/chat/ChatPost.vue";
+import { useToast } from "vue-toastification/dist/index.mjs";
+
+export default {
+  name: "SearchPosts",
+
+  data() {
+    return {
+      orbisPosts: [],
+      pageCounter: 0,
+      queryTerm: null,
+      searched: false,
+      selectedContext: this.$config.chatChannels.general,
+      showLoadMore: false,
+      waitingLoadPosts: false
+    }
+  },
+
+  components: {
+    ChatPost
+  },
+
+  methods: {
+    async search() {
+      this.waitingLoadPosts = true;
+
+      let {data, error} = await this.$orbis.getPosts(
+        {context: this.selectedContext, term: this.queryTerm}, 
+        this.pageCounter, 
+        this.$config.getPostsLimit, // posts limit
+        false // ascending=true, descending=false
+      );
+
+      if (error) {
+        this.toast("Error fetching posts from the Orbis/Ceramic node.", {type: "error"});
+        console.log(error);
+      }
+
+      if (data.length < this.$config.getPostsLimit) {
+        this.showLoadMore = false; // hide Load More Posts button if there's less than getPostsLimit number of posts received
+      } else if (data.length === this.$config.getPostsLimit) {
+        this.showLoadMore = true; // show Load More Posts button if data length was full (getPostsLimit number of posts)
+      }
+
+      this.orbisPosts.push(...data);
+
+      this.pageCounter++;
+
+      this.waitingLoadPosts = false;
+      this.searched = true;
+    }
+  },
+
+  setup() {
+    const toast = useToast();
+
+    return { toast }
+  },
+
+  watch: {
+    // if queryTerm changes, clear the orbisPosts array
+    queryTerm(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.orbisPosts = [];
+        this.pageCounter = 0;
+        this.searched = false;
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/sidebars/SidebarLeft.vue b/components/sidebars/SidebarLeft.vue
index d9ad7429..88cab8ab 100644
--- a/components/sidebars/SidebarLeft.vue
+++ b/components/sidebars/SidebarLeft.vue
@@ -130,7 +130,14 @@
           <!-- Send tokens -->
           <li class="nav-item p-1" @click="closeLeftSidebar" v-if="$config.showFeatures.sendTokens">
             <NuxtLink class="nav-link" :class="$route.path.startsWith('/send-tokens') ? 'active' : ''" aria-current="page" to="/send-tokens">
-              <i class="bi bi-send"></i> Send tokens
+              <i class="bi bi-send"></i> Send Tokens
+            </NuxtLink>
+          </li>
+
+          <!-- Search Posts -->
+          <li class="nav-item p-1" @click="closeLeftSidebar" v-if="$config.showFeatures.searchPosts">
+            <NuxtLink class="nav-link" :class="$route.path.startsWith('/search-posts') ? 'active' : ''" aria-current="page" to="/search-posts">
+              <i class="bi bi-search"></i> Search Posts
             </NuxtLink>
           </li>
 
@@ -172,7 +179,7 @@
           <!-- Find User -->
           <li class="nav-item p-1" @click="closeLeftSidebar">
             <NuxtLink class="nav-link" :class="$route.path.startsWith('/find-user') ? 'active' : ''" aria-current="page" to="/find-user">
-              <i class="bi bi-search"></i> Find User
+              <i class="bi bi-binoculars"></i> Find User
             </NuxtLink>
           </li>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1d48e646..a50edaff 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -121,6 +121,7 @@ export default defineNuxtConfig({
         "newsletter": false, 
         "nftLaunchpad": true, 
         "randomMintedPosts": true, 
+        "searchPosts": true, 
         "swap": true, 
         "stake": false, 
         "sendTokens": true, 
diff --git a/pages/search-posts.vue b/pages/search-posts.vue
new file mode 100644
index 00000000..f862544f
--- /dev/null
+++ b/pages/search-posts.vue
@@ -0,0 +1,37 @@
+<template>
+  <Head>
+    <Title>Search posts | {{ $config.projectMetadataTitle }}</Title>
+    <Meta property="og:title" :content="'Search posts | ' + $config.projectMetadataTitle" />
+  </Head>
+
+  <div class="scroll-500">
+    <div class="card border">
+      <div class="card-body mb-3">
+        <p class="fs-3">
+          <i class="bi bi-arrow-left-circle cursor-pointer" @click="$router.back()"></i>
+        </p>
+
+        <h3 class="mt-3">Search posts</h3>
+        
+        <div class="d-flex justify-content-center mt-5">
+          <div class="col-12 col-lg-8">
+            <SearchPosts />
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchPosts from '~/components/search/SearchPosts.vue';
+
+export default {
+  name: 'SearchPostsPage',
+
+  components: {
+    SearchPosts,
+  }
+}
+</script>
\ No newline at end of file