From 2f28323b81c1066bccfcba7b2a34a8f1abf10c4e Mon Sep 17 00:00:00 2001
From: Believethehype <tobias_baur@yahoo.com>
Date: Tue, 20 Feb 2024 10:29:21 +0100
Subject: [PATCH] add profile search to noogle

---
 ui/noogle/src/App.vue                         |   7 +-
 ui/noogle/src/app.css                         |   7 +
 ui/noogle/src/components/Home.vue             |  11 +-
 ui/noogle/src/components/Newnote.vue          |   3 +-
 .../src/components/ProfileResultTable.vue     | 133 ++++++++++++++++++
 ui/noogle/src/components/Search.vue           |  72 +++++++++-
 .../src/components/SearchResultTable.vue      |  22 ++-
 ui/noogle/src/store.js                        |   9 ++
 8 files changed, 243 insertions(+), 21 deletions(-)
 create mode 100644 ui/noogle/src/components/ProfileResultTable.vue

diff --git a/ui/noogle/src/App.vue b/ui/noogle/src/App.vue
index 410a37d..4ea3646 100644
--- a/ui/noogle/src/App.vue
+++ b/ui/noogle/src/App.vue
@@ -1,5 +1,8 @@
 <script setup>
 import ThreeColumnLayout from "./layouts/ThreeColumnLayout.vue";
+import ProfileResultsTable from "@/components/ProfileResultTable.vue";
+import router from "@/router/index.js";
+
 
 
 </script>
@@ -10,9 +13,11 @@ import ThreeColumnLayout from "./layouts/ThreeColumnLayout.vue";
 
   <main>
     <ThreeColumnLayout>
-      <template #aside>
+  <template #aside>
 
+    <ProfileResultsTable style="margin-top: 450px"/>
     </template>
+
     </ThreeColumnLayout>
 
 
diff --git a/ui/noogle/src/app.css b/ui/noogle/src/app.css
index 0a16447..5b65bde 100644
--- a/ui/noogle/src/app.css
+++ b/ui/noogle/src/app.css
@@ -28,6 +28,13 @@ a,
   transition: 0.4s;
   padding: 3px;
 }
+
+.white {
+  @apply  text-white;
+  text-decoration: none;
+  transition: 0.4s;
+  padding: 3px;
+}
 .menu {
 color: white;
     @apply btn bg-transparent border-transparent tracking-wide;
diff --git a/ui/noogle/src/components/Home.vue b/ui/noogle/src/components/Home.vue
index 5e9434d..9a21737 100644
--- a/ui/noogle/src/components/Home.vue
+++ b/ui/noogle/src/components/Home.vue
@@ -2,25 +2,30 @@
 import Search from "@/components/Search.vue";
 import ResultsTable from "@/components/SearchResultTable.vue";
 import Donate from "@/components/Donate.vue";
+import ProfileResultsTable from "@/components/ProfileResultTable.vue";
 
 export default {
   name: "Home",
-  components: {Donate, ResultsTable, Search}
+  components: {ProfileResultsTable, Donate, ResultsTable, Search}
+
+
 }
 
 </script>
 
 <template>
-
-
   <div class="center">
     <br>
     <Search/>
     <br>
+
     <ResultsTable/>
   </div>
+
 </template>
 
+
+
 <style scoped>
 
 .center {
diff --git a/ui/noogle/src/components/Newnote.vue b/ui/noogle/src/components/Newnote.vue
index 18a8943..9efe8c8 100644
--- a/ui/noogle/src/components/Newnote.vue
+++ b/ui/noogle/src/components/Newnote.vue
@@ -29,7 +29,6 @@ async function schedule(time) {
   contenttags.push(Tag.parse(["i", stringifyiedevent, "text"]))
   contenttags.push(Tag.parse(["param", "relays", "wss://now.lol"]))
   let client = store.state.client
-  client.nip04_encrypt()
   //nip04_encrypt() contenttags.toString()
 
   let tags_t = []
@@ -60,7 +59,7 @@ async function schedule(time) {
           <slot name="footer">
             <div>
               <button @click.stop="emit('modal-close')">Submit</button>
-              <button @click.stop="schedule(Date.now())">Schedule</button>
+             <!-- <button @click.stop="schedule(Date.now())">Schedule</button> -->
             </div>
           </slot>
         </div>
diff --git a/ui/noogle/src/components/ProfileResultTable.vue b/ui/noogle/src/components/ProfileResultTable.vue
new file mode 100644
index 0000000..5dd53be
--- /dev/null
+++ b/ui/noogle/src/components/ProfileResultTable.vue
@@ -0,0 +1,133 @@
+<template>
+  <EasyDataTable style="margin-top: 450px"
+ class="customize-table" header-text-direction="left" hide-rows-per-page="true"  rows-per-page="10" v-if="store.state.profile_results.length != 0 && router.currentRoute.value.path == '/'" table-class-name="customize-table"
+    :headers="headers"
+    :items="store.state.profile_results" >
+   <template #item-content="{ author, authorurl, avatar}">
+   <div class="playeauthor-wrapper" >
+
+     <img class="avatar" v-if="avatar" :src="avatar" alt="Avatar" onerror="this.src='https://noogle.lol/favicon.ico'" />
+     <img class="avatar" v-else src="@/assets/nostr-purple.svg" />
+
+         <a class="white" :href="authorurl" target="_blank">{{ author }}</a>
+
+
+
+        </div>
+
+   <!--   <p>{{content}}</p> -->
+     </template>
+    <!--<template #expand="item">
+      <div style="padding: 15px; text-align: left;" >
+          <a class="menu" :href="item.links.uri" target="_blank">Nostr Client</a>
+          <a class="menu" :href="item.links.njump" target="_blank">NJump</a>
+          <a class="menu" :href="item.links.highlighter" target="_blank">Highlighter</a>
+          <a class="menu":href="item.links.nostrudel" target="_blank">Nostrudel</a>
+      </div>
+    </template> -->
+
+
+      </EasyDataTable>
+
+
+</template>
+
+<script lang="ts" setup>
+
+
+import type {Header, Item, SortType} from "vue3-easy-data-table";
+import store from '../store';
+import router from "../router";
+
+
+const headers: Header[] = [
+  { text: "Relevant Profiles:", value: "content", fixed:true},
+ // { text: "Time", value: "indicator.time", sortable: true, },
+];
+
+
+
+
+</script>
+
+<style scoped>
+.operation-wrapper .operation-icon {
+  width: 20px;
+  cursor: pointer;
+}
+.playeauthor-wrapper {
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+.menusmall {
+  @apply btn text-gray-600 bg-transparent border-transparent tracking-wide;
+
+
+  }
+
+.vue3-easy-data-table__footer.previous-page__click-button{
+  height:100px
+}
+
+.time {
+  padding: 6px;
+  display: flex;
+  font-size: 1em;
+  align-items: center;
+  justify-items: center;
+}
+.avatar {
+  margin-right: 10px;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+  box-shadow: inset 0 4px 4px 0 rgb(0 0 0 / 10%);
+}
+.customize-table {
+  width:auto;
+  --easy-table-border: 3px solid #000000;
+  --easy-table-row-border: 0px;
+
+  --easy-table-header-font-size: 14px;
+  --easy-table-header-height: 20px;
+  --easy-table-header-font-color: bg-accent;
+  --easy-table-header-background-color: bg-base;
+
+  --easy-table-header-item-padding: 10px 15px;
+
+  --easy-table-body-even-row-font-color: bg-accenet;
+  --easy-table-body-even-row-background-color: bg-base;
+
+  --easy-table-body-row-font-color: bg-accents;
+  --easy-table-body-row-background-color: bg-base;
+  --easy-table-body-row-height: 20px;
+  --easy-table-body-row-font-size: 14px;
+
+  --easy-table-body-row-hover-font-color: bg-accent;
+  --easy-table-body-row-hover-background-color: bg-base;
+
+  --easy-table-body-item-padding: 10px 15px;
+
+  --easy-table-footer-background-color: bg-base;
+  --easy-table-footer-font-color: bg-accent;
+  --easy-table-footer-font-size: 14px;
+  --easy-table-footer-padding: 10px 10px;
+  --easy-table-footer-height: 20px;
+
+  --easy-table-rows-per-page-selector-width: 60px;
+  --easy-table-rows-per-page-selector-option-padding: 10px;
+  --easy-table-rows-per-page-selector-z-index: 1;
+
+ --easy-table-scrollbar-track-color: bg-base;
+  --easy-table-scrollbar-color: bg-base;
+  --easy-table-scrollbar-thumb-color: bg-base;
+  --easy-table-scrollbar-corner-color: bg-base;
+
+  --easy-table-loading-mask-background-color: #2d3a4f;
+}
+</style>
\ No newline at end of file
diff --git a/ui/noogle/src/components/Search.vue b/ui/noogle/src/components/Search.vue
index 01ef1e0..d250133 100644
--- a/ui/noogle/src/components/Search.vue
+++ b/ui/noogle/src/components/Search.vue
@@ -30,6 +30,7 @@ import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
 
 let items = []
+let profiles = []
 let dvms =[]
 let listener = false
 let searching = false
@@ -58,6 +59,12 @@ onMounted(async () => {
 })
 
 
+
+
+
+
+
+
    // console.log(urlParams.has('search')); // true
    // console.log(urlParams.get('search')); // "MyParam"
 
@@ -84,8 +91,10 @@ async function send_search_request(msg) {
           return
      }
         items = []
+        profiles = []
         dvms =[]
         store.commit('set_search_results', items)
+        store.commit('set_search_results_profiles', profiles)
         let client = store.state.client
 
         let users = [];
@@ -118,6 +127,7 @@ async function send_search_request(msg) {
 
         let content = "NIP 90 Search request"
         let kind = 5302
+        let kind_profiles = 5303
         let tags = [
               ["i", msg, "text"],
               ["param", "max_results", "150"],
@@ -128,6 +138,7 @@ async function send_search_request(msg) {
 
         let res;
         let requestid;
+        let requestid_profile;
         if (localStorage.getItem('nostr-key-method') === 'android-signer') {
           let draft = {
             content: content,
@@ -149,7 +160,10 @@ async function send_search_request(msg) {
             tags_t.push(Tag.parse(tag))
           }
           let evt = new EventBuilder(kind, content, tags_t)
+          let evt_profiles = new EventBuilder(kind_profiles, "Profile Search request",  [Tag.parse(["i", msg, "text"]),  Tag.parse(["param", "max_results", "500"])])
           try{
+             let res1 = await client.sendEventBuilder(evt_profiles)
+             requestid_profile = res1.toHex()
              res = await client.sendEventBuilder(evt)
              requestid = res.toHex()
           }
@@ -160,6 +174,7 @@ async function send_search_request(msg) {
 
         console.log("STORE: " +store.state.requestidSearch)
         store.commit('set_current_request_id_search', requestid)
+       store.commit('set_current_request_profile_id_search', requestid_profile)
         console.log("STORE AFTER: " + store.state.requestidSearch)
 
         //miniToastr.showMessage("Sent Request to DVMs", "Awaiting results", VueNotifications.types.warn)
@@ -212,7 +227,7 @@ async function  listen() {
     let pubkey = store.state.pubkey
     let originale = [store.state.requestidSearch]
 
-    const filter = new Filter().kinds([7000, 6302]).pubkey(pubkey).since(Timestamp.now());
+    const filter = new Filter().kinds([7000, 6302, 6303]).pubkey(pubkey).since(Timestamp.now());
     await client.subscribe([filter]);
 
     const handle = {
@@ -231,7 +246,7 @@ async function  listen() {
                 if (event.tags[tag].asVec()[0] === "e") {
                   //console.log("SEARCH ETAG: " + event.tags[tag].asVec()[1])
                  // console.log("SEARCH LISTEN TO : " + store.state.requestidSearch)
-                  if (event.tags[tag].asVec()[1] === store.state.requestidSearch) {
+                  if (event.tags[tag].asVec()[1] === store.state.requestidSearch || event.tags[tag].asVec()[1] === store.state.requestidSearchProfile) {
                     resonsetorequest = true
                   }
                 }
@@ -312,6 +327,7 @@ async function  listen() {
                   console.log("6302:", event.content);
 
                   //miniToastr.showMessage("DVM: " + dvmname, "Received Results", VueNotifications.types.success)
+                  try{
                   let event_etags = JSON.parse(event.content)
                   if (event_etags.length > 0) {
                     for (let etag of event_etags) {
@@ -368,6 +384,58 @@ async function  listen() {
                   store.commit('set_active_search_dvms', dvms)
                   console.log("Events from" + event.author.toHex())
                   store.commit('set_search_results', items)
+                     }
+                catch{
+
+                }
+                }
+
+
+                else if (event.kind === 6303) {
+                  let entries = []
+                  console.log("6303:", event.content);
+
+                  //miniToastr.showMessage("DVM: " + dvmname, "Received Results", VueNotifications.types.success)
+                  let event_ptags = JSON.parse(event.content)
+                  let authors = []
+                  if (event_ptags.length > 0) {
+                    for (let ptag of event_ptags) {
+                        authors.push(PublicKey.parse(ptag[1]))
+                    }
+
+                    if (authors.length > 0) {
+                      let infos = await get_user_infos(authors)
+
+                      for (const profile of infos) {
+                        console.log(profile["author"])
+                        //let p = profiles.find(record => record.author === profile.author)
+
+                        //‚let bech32id = PublicKey.parse(profile["profile"][]).toBech32()  profile.author.toBech32()
+                       // let picture = profile === undefined ? "../assets/nostr-purple.svg" : profile["profile"]["picture"]
+                       // let name = profile === undefined ? bech32id : profile["profile"]["name"]
+                        if (profiles.findIndex(e => e.id === profile["author"]) === -1 && profile["profile"]["name"] !== "" ) {
+                          profiles.push({
+                            id: profile["author"],
+                            content: profile["profile"],
+                            author: profile["profile"]["name"],
+                            authorurl: "https://njump.me/" +PublicKey.parse(profile["author"]).toBech32(),
+                            avatar: profile["profile"]["picture"]
+                          })
+                        }
+
+
+                      }
+                    }
+                  }
+
+
+                  const index = dvms.indexOf((dvms.find(i => i.id === event.author.toHex())));
+                  if (index > -1) {
+                    dvms.splice(index, 1);
+                  }
+
+                  store.commit('set_active_search_dvms', dvms)
+                  store.commit('set_search_results_profiles', profiles)
                 }
               }
             })
diff --git a/ui/noogle/src/components/SearchResultTable.vue b/ui/noogle/src/components/SearchResultTable.vue
index e5b9130..34b1330 100644
--- a/ui/noogle/src/components/SearchResultTable.vue
+++ b/ui/noogle/src/components/SearchResultTable.vue
@@ -1,12 +1,12 @@
 <template>
-  <EasyDataTable class="customize-table"  header-text-direction="left"  v-if="store.state.results.length != 0" table-class-name="customize-table"
+  <EasyDataTable  class="customize-table"  header-text-direction="left"  v-if="store.state.results.length != 0" table-class-name="customize-table"
     :headers="headers"
     :items="store.state.results" :sort-by="sortBy"
      :sort-type="sortType">
    <template #item-content="{ content, author, authorurl, avatar, indicator, links}">
    <div class="playeauthor-wrapper">
 
-     <img class="avatar" v-if="avatar" :src="avatar" alt="Avatar" />
+     <img class="avatar" v-if="avatar" :src="avatar" alt="Avatar" onerror="this.src='https://noogle.lol/favicon.ico'" />
      <img class="avatar" v-else src="@/assets/nostr-purple.svg" />
 
          <a class="purple" :href="authorurl" target="_blank">{{ author }}</a>
@@ -36,6 +36,8 @@
 
 
       </EasyDataTable>
+
+
 </template>
 
 <script lang="ts" setup>
@@ -95,7 +97,7 @@ const headers: Header[] = [
 }
 .customize-table {
   width: auto;
-  --easy-table-border: 1px solid #000000;
+  --easy-table-border: 2px solid #000000;
   --easy-table-row-border: 1px solid #000000;
 
   --easy-table-header-font-size: 14px;
@@ -128,16 +130,10 @@ const headers: Header[] = [
   --easy-table-rows-per-page-selector-option-padding: 10px;
   --easy-table-rows-per-page-selector-z-index: 1;
 
-
-
-
-
-
-
-  --easy-table-scrollbar-track-color: #2d3a4f;
-  --easy-table-scrollbar-color: #2d3a4f;
-  --easy-table-scrollbar-thumb-color: #4c5d7a;;
-  --easy-table-scrollbar-corner-color: #2d3a4f;
+  --easy-table-scrollbar-track-color: bg-base;
+  --easy-table-scrollbar-color: bg-base;
+  --easy-table-scrollbar-thumb-color: bg-base;
+  --easy-table-scrollbar-corner-color: bg-base;
 
   --easy-table-loading-mask-background-color: #2d3a4f;
 }
diff --git a/ui/noogle/src/store.js b/ui/noogle/src/store.js
index 87ecb56..acaba66 100644
--- a/ui/noogle/src/store.js
+++ b/ui/noogle/src/store.js
@@ -10,6 +10,7 @@ const store = createStore({
       dbclient: Client,
       pubkey: PublicKey,
       requestidSearch: String,
+      requestidSearchProfile: String,
       requestidImage: String,
       hasEventListener: false,
       imagehasEventListener: false,
@@ -17,6 +18,7 @@ const store = createStore({
       nip89dvms: [],
       activesearchdvms: [],
       results:  [],
+      profile_results: [],
       relays: [
           "wss://relay.damus.io",
         "wss://nos.lol",
@@ -58,10 +60,17 @@ const store = createStore({
     set_current_request_id_search(state, requestid){
       state.requestidSearch = String(requestid)
     },
+    set_current_request_profile_id_search(state, requestid){
+      state.requestidSearchProfile = String(requestid)
+    },
     set_active_search_dvms(state, dvms) {
       state.activesearchdvms.length = 0
       state.activesearchdvms.push.apply(state.activesearchdvms, dvms)
     },
+    set_search_results_profiles(state, items){
+      state.profile_results.length = 0
+      state.profile_results.push.apply(state.profile_results, items)
+    },
     set_current_request_id_image(state, requestid){
        state.requestidImage = requestid
     },