similar question finding model connected with the ui

client/components/blog-article/BlogArticle.module.css

@@ -87,7 +87,7 @@
   pre {
     padding: 20px;
     background-color: var(black);
-
+    font-size: 16px;
     font-family: 'Roboto Mono', monospace !important;
     max-width: 780px;
   }

client/components/no-resource/NoResource.jsx

@@ -5,8 +5,10 @@ const NoResource = ({ source, message }) => {
   return (
     <div className={Styles.noresource}>
       <h1>
-        No resources found from <b>{source}</b> for this question. Please refer
-        the extra resouces section to find more info.
+        {message
+          ? message
+          : `No resources found from ${source} for this question. Please refer
+          the extra resouces section to find more info.`}
       </h1>
     </div>
   )

client/components/similar-question-suggestions/index.js

@@ -4,55 +4,57 @@ import { Title } from '../styled-text-spans/index'
 import styles from './similar-question-suggestions.module.css'
 import useDebounce from '../../hooks/useDebounce'
 import { Spinner } from '../icons'
+import Axios from 'axios'
+import NoResource from '../no-resource/NoResource'
 
 const SimilarQuestionSuggestions = ({ title, description, tags }) => {
   const [isLoading, setIsLoading] = useState(true)
-
-  const [similarQuestions, setSimilarQuestions] = useState([
-    {
-      url: 'https://dasunx.com',
-      title: 'How to center a div element vertically',
-      author: {
-        username: 'dasunx',
-        profilePhoto:
-          'https://secure.gravatar.com/avatar/608a987a8401796f68c4d11f?s=90&d=monsterid'
-      },
-      views: 240,
-      comments: 12
-    },
-    {
-      url: 'https://dasunx.com',
-      title:
-        "I can center it horizontally, but the thing is I don't know how to center it vertically.I can center it horizontally, but the thing is I don't know how to center it vertically.",
-      author: {
-        username: 'dasunx',
-        profilePhoto:
-          'https://secure.gravatar.com/avatar/608a987a8401796f68c4d11f?s=90&d=monsterid'
-      },
-      views: 20,
-      comments: 1
-    },
-    {
-      url: 'https://dasunx.com',
-      title: 'Test question 3',
-      author: {
-        username: 'dasunx',
-        profilePhoto:
-          'https://secure.gravatar.com/avatar/608a987a8401796f68c4d11f?s=90&d=monsterid'
-      },
-      views: 40,
-      comments: 6
+  const [similarQuestions, setSimilarQuestions] = useState([])
+  const [error, setError] = useState({
+    isError: false,
+    message: ''
+  })
+  const getSimilarQuestions = async () => {
+    console.log('getSimilarQuestions')
+    const data = { question: title }
+    const headers = {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*'
+    }
+    try {
+      const response = await Axios.post(
+        'https://localhost:3002/',
+        data,
+        headers
+      )
+      if (response.status === 200) {
+        setSimilarQuestions(response.data)
+      } else {
+        setError({
+          isError: true,
+          message:
+            'Something went wrong while searching similar questions. Please try again'
+        })
+      }
+    } catch (err) {
+      console.log(err)
+      setError({
+        isError: true,
+        message:
+          'Similar question finding is not supported in this environment yet. Hopefully it will be available soon.'
+      })
     }
-  ])
+    setIsLoading(false)
+  }
 
   useDebounce(
-    () => {
-      setIsLoading(false)
+    async () => {
+      await getSimilarQuestions()
     },
     1000,
     [title]
   )
-
+  const { isError, message } = error
   return (
     <div className={styles.container}>
       <h1>
@@ -61,10 +63,14 @@ const SimilarQuestionSuggestions = ({ title, description, tags }) => {
       </h1>
       {isLoading ? (
         <Spinner className={styles.spinner} />
-      ) : (
+      ) : isError ? (
+        <NoResource message={message} />
+      ) : similarQuestions.length > 0 ? (
         similarQuestions.map((question, index) => {
-          return <SimilarQuestion question={question} key={index} />
+          return <SimilarQuestion question_prop={question} key={index} />
         })
+      ) : (
+        <NoResource message="No similar questions found for this question. Submit your question to get an answer generated in few seconds" />
       )}
     </div>
   )

client/components/similar-question-suggestions/similar-question/index.js

@@ -3,28 +3,25 @@ import React from 'react'
 import { Bold, Title } from '../../styled-text-spans/index'
 import styles from './similar-question.module.css'
 
-const SimilarQuestion = ({ question }) => {
-  const { title, author, url, views, comments } = question
+const SimilarQuestion = ({ question_prop }) => {
+  const { id, question, description } = question_prop
   return (
-    <Link
-      href="/questions/[slug]"
-      as={`/questions/6087be20b0c06a179059dfa8-how-to-center-a-div-element-vertically`}
-    >
+    <Link href="/questions/[slug]" as={`/questions/${id}-${question}`}>
       <div className={styles.similarquestion}>
-        <Link href="/users/[user]" as={`/users/${author.username}`}>
+        <Link href="/users/[user]" as={`/users/dasun97`}>
           <div className={styles.userwrapper}>
             <img
               className={styles.profilephoto}
-              src={author.profilePhoto}
-              alt={author.username}
+              src="https://www.practiceportuguese.com/wp-content/uploads/2020/06/asking-questions.jpg"
+              alt="dasun97"
             />
-            <Bold text={`@${author.username}`} />
+            <Bold text={`@dasun97`} />
           </div>
         </Link>
         <div className={styles.questionwrapper}>
-          <Title title={title} />
+          <Title title={question} />
           <div>
-            <Bold text={views} /> Views and <Bold text={comments} />
+            <Bold text={123} /> Views and <Bold text={2} />
             Comments
           </div>
         </div>

client/components/similar-question-suggestions/similar-question/similar-question.module.css

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: row;
   border-radius: 5px;
+  cursor: pointer;
 }
 .userwrapper {
   display: flex;