Merge branch 'it18013610' into 'master'

Stackoverflow answer ui created

See merge request !7

client/components/automated-answer-container/automated-answer-container.module.css

@@ -26,7 +26,7 @@
 }
 
 .wrapper {
-  background-color: var(--black-800);
+  background-color: var(--black-900);
   color: var(--white);
   border-radius: 5px;
   margin: 2rem 1rem 2rem 1rem;

client/components/automated-answer-container/index.js

 import React, { useEffect, useState } from 'react'
+import { publicFetch } from '../../util/fetcher'
+import AutomatedAnswer from '../automated-answer'
 import NoAutomatedAnswer from '../automated-answer/no-automated-answer'
 import { Spinner } from '../icons'
 
@@ -6,12 +8,46 @@ import styles from './automated-answer-container.module.css'
 
 const AutomatedAnswerContainer = ({ question_id }) => {
   const [loading, setLoading] = useState(true)
+  const [answer, setAnswer] = useState()
+  const [error, setError] = useState({
+    status: '',
+    action: '',
+    button: '',
+    message: ''
+  })
+
   useEffect(() => {
-    setTimeout(() => {
+    const fetchAutomatedAnswer = async () => {
+      try {
+        const response = await publicFetch.get(`automatedanswer/${question_id}`)
+        if (response.status == 200) setAnswer(response.data)
+        else setServerError({ response })
+      } catch (error) {
+        setServerError(error)
+      }
       setLoading(false)
-    }, 4000)
-    console.log(question_id)
+    }
+    fetchAutomatedAnswer()
   }, [question_id])
+
+  const setServerError = (error) => {
+    if (error.response.status == 404) {
+      setError({
+        status: '404',
+        action: 'create',
+        button: 'Generate One',
+        message: 'No automated answer found for this question'
+      })
+    } else {
+      setError({
+        status: '500',
+        action: 'tryagain',
+        button: 'Try again',
+        message: 'Server error, Please try again'
+      })
+    }
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -22,8 +58,10 @@ const AutomatedAnswerContainer = ({ question_id }) => {
       <div className={styles.wrapper}>
         {loading ? (
           <Spinner className={styles.spinner} />
+        ) : answer != null ? (
+          <AutomatedAnswer automatedAnswer={answer.automatedanswer} />
         ) : (
-          <NoAutomatedAnswer question_id={question_id} />
+          <NoAutomatedAnswer question_id={question_id} error={error} />
         )}
       </div>
     </div>

client/components/automated-answer/index.js

 import React from 'react'
+import StackOverflowAnswer from '../stof-answer'
 
 const AutomatedAnswer = ({ automatedAnswer }) => {
+  console.log(automatedAnswer)
   return (
-    <div>
-      <h1>Actual automated answer</h1>
-    </div>
+    <>
+      {automatedAnswer.stackoverflow != null ? (
+        <StackOverflowAnswer stof={automatedAnswer.stackoverflow} />
+      ) : (
+        <h1>No Stack overflow</h1>
+      )}
+    </>
   )
 }
 

client/components/automated-answer/no-automated-answer/index.js

 import React from 'react'
 import styles from './no-automated-answer.module.css'
-const NoAutomatedAnswer = ({ question_id }) => {
+const NoAutomatedAnswer = ({ question_id, error }) => {
+  const { status, action, button, message } = error
   return (
     <div className={styles.no_automated_answer}>
-      <h1 className={styles.title}>
-        No Automated answer found for this question
-      </h1>
-      <button className={styles.generate_btn}>Generate one</button>
+      <h1 className={styles.title}>{message}</h1>
+      <button className={styles.generate_btn}>{button}</button>
     </div>
   )
 }

client/components/stof-answer/index.js

+import React from 'react'
+import styles from './stof-answer.module.css'
+
+const StackOverflowAnswer = ({ stof }) => {
+  const createMarkup = () => {
+    return { __html: stof.content }
+  }
+  return (
+    <>
+      <h1 className={styles.h}>Answer from Stackoverflow - {stof.status}</h1>
+      <div className={styles.wrapper}>
+        <div dangerouslySetInnerHTML={createMarkup()}></div>
+      </div>
+    </>
+  )
+}
+
+export default StackOverflowAnswer

client/components/stof-answer/stof-answer.module.css

+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
+.wrapper {
+  margin-top: 0.5em;
+  background-color: #2d2d2d;
+  padding: 0.8em;
+  border-radius: 10px;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.h {
+  font-size: 1.3em !important;
+}

client/pages/_app.js

@@ -15,6 +15,7 @@ import '../styles/variables.css'
 import '../styles/nprogress.css'
 import 'react-tagsinput/react-tagsinput.css'
 import '../styles/app.css'
+import '../styles/automatedanswer.css'
 
 Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())

client/styles/automatedanswer.css

+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap');
+
+.s-prose {
+  line-height: 1.5em;
+  word-break: break-word;
+  font-size: 15px;
+
+  a {
+    text-decoration: underline;
+    color: var(--blue-300);
+  }
+
+  a:hover {
+    color: var(--blue-600);
+  }
+  p {
+    margin-bottom: 1em;
+  }
+
+  hr {
+    border: 0;
+    color: var(--black-100);
+    background-color: var(--black-100);
+    height: 1px;
+    margin-bottom: 1em;
+  }
+
+  ul,
+  ol {
+    margin-left: 30px;
+    list-style-type: disc;
+  }
+
+  code {
+    font-size: 13px;
+    font-family: 'Roboto Mono', monospace !important;
+  }
+
+  li {
+    margin-bottom: 0.6em;
+
+    ul {
+      margin-top: 0.6em;
+    }
+  }
+}
+
+.s-prose *:not(.s-code-block) > code {
+  padding: 2px 4px;
+  color: var(--white);
+  background-color: var(--black-600);
+  border-radius: 3px;
+}
+
+sup,
+sub {
+  font-size: 80%;
+  line-height: 1;
+}
+
+sup {
+  vertical-align: super;
+}
+
+sub {
+  vertical-align: sub;
+}