add similar section to posts

api/resolvers/search.js

@@ -18,7 +18,7 @@ const STOP_WORDS = ['a', 'an', 'and', 'are', 'as', 'at', 'be', 'but',
 
 export default {
   Query: {
-    related: async (parent, { title, id, cursor, limit }, { me, models, search }) => {
+    related: async (parent, { title, id, cursor, limit, minMatch }, { me, models, search }) => {
       const decodedCursor = decodeCursor(cursor)
       if (!title || title.trim().split(/\s+/).length < 1) {
         if (id) {
@@ -45,7 +45,7 @@ export default {
         body: {
           query: {
             bool: {
-              should: [
+              must: [
                 {
                   more_like_this: {
                     fields: ['title'],
@@ -54,14 +54,14 @@ export default {
                     min_doc_freq: 1,
                     min_word_length: 2,
                     max_query_terms: 25,
-                    minimum_should_match: '20%',
+                    minimum_should_match: minMatch || '20%',
                     stop_words: STOP_WORDS
                   }
                 }
               ],
               must_not: [{ exists: { field: 'parentId' } }, ...mustNot],
               filter: {
-                range: { wvotes: { gte: 0.2 } }
+                range: { wvotes: { gte: minMatch ? 0 : 0.2 } }
               }
             }
           },

api/typeDefs/item.js

@@ -8,7 +8,7 @@ export default gql`
     comments(id: ID!, sort: String): [Item!]!
     pageTitleAndUnshorted(url: String!): TitleUnshorted
     dupes(url: String!): [Item!]
-    related(cursor: String, title: String, id: ID, limit: Int): Items
+    related(cursor: String, title: String, id: ID, minMatch: String, limit: Int): Items
     allItems(cursor: String): Items
     search(q: String, sub: String, cursor: String, what: String, sort: String, when: String): Items
     auctionPosition(sub: String, id: ID, bid: Int!): Int!

components/discussion-form.js

@@ -1,12 +1,15 @@
 import { Form, Input, MarkdownInput, SubmitButton } from '../components/form'
 import { useRouter } from 'next/router'
 import * as Yup from 'yup'
-import { gql, useApolloClient, useMutation } from '@apollo/client'
+import { gql, useApolloClient, useLazyQuery, useMutation } from '@apollo/client'
 import TextareaAutosize from 'react-textarea-autosize'
 import Countdown from './countdown'
 import AdvPostForm, { AdvPostInitial, AdvPostSchema } from './adv-post-form'
 import { MAX_TITLE_LENGTH } from '../lib/constants'
 import FeeButton, { EditFeeButton } from './fee-button'
+import { ITEM_FIELDS } from '../fragments/items'
+import AccordianItem from './accordian-item'
+import Item from './item'
 
 export function DiscussionForm ({
   item, editThreshold, titleLabel = 'title',
@@ -25,6 +28,18 @@ export function DiscussionForm ({
       }`
   )
 
+  const [getRelated, { data: relatedData }] = useLazyQuery(gql`
+  ${ITEM_FIELDS}
+  query related($title: String!) {
+    related(title: $title, minMatch: "75%", limit: 3) {
+      items {
+        ...ItemFields
+      }
+    }
+  }`, {
+    fetchPolicy: 'network-only'
+  })
+
   const DiscussionSchema = Yup.object({
     title: Yup.string().required('required').trim()
       .max(MAX_TITLE_LENGTH,
@@ -32,6 +47,8 @@ export function DiscussionForm ({
     ...AdvPostSchema(client)
   })
 
+  const related = relatedData?.related?.items || []
+
   // const cost = linkOrImg ? 10 : me?.freePosts ? 0 : 1
 
   return (
@@ -65,6 +82,13 @@ export function DiscussionForm ({
         required
         autoFocus
         clear
+        onChange={async (formik, e) => {
+          if (e.target.value) {
+            getRelated({
+              variables: { title: e.target.value }
+            })
+          }
+        }}
       />
       <MarkdownInput
         topLevel
@@ -88,6 +112,18 @@ export function DiscussionForm ({
               ChildButton={SubmitButton} variant='secondary'
             />}
       </div>
+      <div className={`mt-3 ${related.length > 0 ? '' : 'invisible'}`}>
+        <AccordianItem
+          header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>similar</div>}
+          body={
+            <div>
+              {related.map((item, i) => (
+                <Item item={item} key={item.id} />
+              ))}
+            </div>
+              }
+        />
+      </div>
     </Form>
   )
 }

components/link-form.js

@@ -33,6 +33,32 @@ export function LinkForm ({ item, editThreshold }) {
   }`, {
     fetchPolicy: 'network-only'
   })
+  const [getRelated, { data: relatedData }] = useLazyQuery(gql`
+  ${ITEM_FIELDS}
+  query related($title: String!) {
+    related(title: $title, minMatch: "75%", limit: 3) {
+      items {
+        ...ItemFields
+      }
+    }
+  }`, {
+    fetchPolicy: 'network-only'
+  })
+
+  const related = []
+  for (const item of relatedData?.related?.items || []) {
+    let found = false
+    for (const ditem of dupesData?.dupes || []) {
+      if (ditem.id === item.id) {
+        found = true
+        break
+      }
+    }
+
+    if (!found) {
+      related.push(item)
+    }
+  }
 
   const [upsertLink] = useMutation(
     gql`
@@ -80,6 +106,13 @@ export function LinkForm ({ item, editThreshold }) {
         overrideValue={data?.pageTitleAndUnshorted?.title}
         required
         clear
+        onChange={async (formik, e) => {
+          if (e.target.value) {
+            getRelated({
+              variables: { title: e.target.value }
+            })
+          }
+        }}
       />
       <Input
         label='url'
@@ -129,7 +162,18 @@ export function LinkForm ({ item, editThreshold }) {
               }
           />
         </div>}
-
+      <div className={`mt-3 ${related.length > 0 ? '' : 'invisible'}`}>
+        <AccordianItem
+          header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>similar</div>}
+          body={
+            <div>
+              {related.map((item, i) => (
+                <Item item={item} key={item.id} />
+              ))}
+            </div>
+              }
+        />
+      </div>
     </Form>
   )
 }