new user interfaces configured

client/.gitignore

 .vercel
 node_modules
-.next
+.next
\ No newline at end of file
+.vscode
\ No newline at end of file

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

@@ -32,4 +32,12 @@
   margin: 2rem 1rem 2rem 1rem;
   padding: 1em 1em;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  max-width: 90vw;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    margin: 0 !important;
+    max-width: 97vw;
+  }
 }

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

@@ -28,7 +28,6 @@ const AutomatedAnswerContainer = ({ question_id }) => {
     try {
       const response = await publicFetch.get(`automatedanswer/${question_id}`)
       if (response.status == 200) {
-        console.log('RESPONSE IS HERE AND IT IS')
         const { isLoading, isComplete } = response.data.automatedanswer
         if (isLoading && !isComplete) {
           setIsAnswertGenerating(true)
@@ -47,8 +46,6 @@ const AutomatedAnswerContainer = ({ question_id }) => {
   }
 
   useInterval(async () => {
-    console.log('Checking')
-
     await fetchAutomatedAnswer()
   }, polled)
 

client/components/automated-answer/index.js

 import React from 'react'
 import BlogsWrapper from '../blogs-wrapper/BlogsWrapper'
+import ExternalResourcesWrapper from '../external-resources/ExternalResourcesWrapper'
 import StackOverflowAnswer from '../stof-answer'
 import YoutubeVideoWrapper from '../youtube-videos/YoutubeVideoWrapper'
 
 const AutomatedAnswer = ({ automatedAnswer }) => {
-  console.log(automatedAnswer)
   return (
     <>
       {automatedAnswer.stackoverflow != null ? (
@@ -20,17 +20,19 @@ const AutomatedAnswer = ({ automatedAnswer }) => {
         <h1>No youtubes found for this question</h1>
       )}
 
+      <BlogsWrapper
+        source="Dev.to"
+        articles={automatedAnswer.dev_articles}
+        resources={automatedAnswer.dev_resources}
+      />
+
       <BlogsWrapper
         source="Medium"
         articles={automatedAnswer.medium_articles}
         resources={automatedAnswer.medium_resources}
       />
 
-      <BlogsWrapper
-        source="Dev.to"
-        articles={automatedAnswer.dev_articles}
-        resources={automatedAnswer.dev_resources}
-      />
+      <ExternalResourcesWrapper automated_answer={automatedAnswer} />
     </>
   )
 }

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

@@ -18,7 +18,6 @@ const NoAutomatedAnswer = ({
   const requestAutomatedAnswer = async () => {
     try {
       const response = await authAxios.post('automatedanswer', req_body)
-      console.log(response)
       if (response.status == 201) {
         setIsAnswerGenerating(true)
         bindIsGenerating(true)

client/components/blog-article/BlogArticle.jsx

@@ -5,7 +5,6 @@ import Prism from 'prismjs'
 
 const BlogArticle = ({ article, source }) => {
   useEffect(() => {
-    console.log(source)
     if (source === 'Medium') {
       var childs = document.getElementById('description').children
       var i = 0

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/external-resources/ExternalResources.jsx

+import React from 'react'
+import styles from './ExternalResources.module.css'
+
+const ExternalResources = ({ source, links }) => {
+  return (
+    <div className={styles.external_resources_container}>
+      <div className={styles.external_resources_header}>
+        <h3 className={styles.external_resource_header_title}>{source}</h3>
+      </div>
+      <ul className={styles.external_resources_links}>
+        {links.map((link, index) => {
+          return (
+            <li className={styles.external_resources_item} key={index}>
+              <a
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.external_resources_link}
+              >
+                {decodeURIComponent(link.slice(0, 100))}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default ExternalResources

client/components/external-resources/ExternalResources.module.css

+.external_resources_title {
+  font-size: 1.7em;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.external_resources_wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 3em 0;
+}
+
+/* set columns to one in mobile and tablet screens using media query */
+@media (max-width: 768px) {
+  .external_resources_links {
+    columns: 1 !important;
+    -webkit-columns: 1 !important;
+    -moz-columns: 1 !important;
+  }
+}
+
+.external_resources_container {
+  max-width: 100%;
+  margin-bottom: 1em;
+  background: #2d2d2d;
+  border-radius: 10px;
+  padding: 10px 10px;
+}
+
+.external_resource_header_title {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-transform: capitalize;
+}
+.external_resources_links {
+  columns: 2;
+  -webkit-columns: 2;
+  -moz-columns: 2;
+}
+
+.external_resources_item {
+  background: #0c0d0e;
+  color: white;
+  border-radius: 5px;
+  padding: 5px;
+  min-height: 4em;
+  margin-bottom: 5px;
+  overflow-wrap: break-word;
+}

client/components/external-resources/ExternalResourcesWrapper.jsx

+import React from 'react'
+import ExternalResources from './ExternalResources'
+import styles from './ExternalResources.module.css'
+
+const ExternalResourcesWrapper = ({ automated_answer }) => {
+  const current_sources = ['medium', 'dev', 'github']
+  const getResourcesFromSource = (source) => {
+    switch (source) {
+      case 'medium':
+        return automated_answer.medium_resources || []
+      case 'dev':
+        return automated_answer.dev_resources || []
+      case 'github':
+        return automated_answer.github_links || []
+      default:
+        return []
+    }
+  }
+  return (
+    <div className={styles.external_resources_wrapper}>
+      <div className={styles.external_resources_title_container}>
+        <h3 className={styles.external_resources_title}>External Resources</h3>
+      </div>
+      {current_sources.map((source, index) => {
+        let links = getResourcesFromSource(source)
+        if (links.length > 0) {
+          return <ExternalResources key={index} source={source} links={links} />
+        }
+      })}
+    </div>
+  )
+}
+
+export default ExternalResourcesWrapper

client/components/resource-preview/ResourcePreview.jsx

@@ -4,7 +4,11 @@ import ShowHide from '../show-hide/ShowHide'
 
 const ResourcePreview = ({ articles, source, show, setShow }) => {
   const [thumbnail, setThumbnail] = useState('')
+
   const getThumbnail = () => {
+    let thumbnails_list = [
+      'https://www.mtu.edu/cs/images/trees-dark-blue-icons-6x6-card1200.jpg'
+    ]
     articles.forEach((element) => {
       if (
         !(
@@ -15,18 +19,41 @@ const ResourcePreview = ({ articles, source, show, setShow }) => {
           !element.thumbnail
         )
       ) {
-        setThumbnail(element.thumbnail)
-        return
+        thumbnails_list.push(element.thumbnail)
+        // setThumbnail(element.thumbnail)
+        // return
+      } else {
+        console.log('IM NULL')
+        console.log(element.thumbnail)
       }
     })
+    if (thumbnails_list.length >= 2) {
+      thumbnails_list.shift()
+    }
+    return thumbnails_list
+  }
+
+  const setThumbnailFromList = (thumbnails) => {
+    setThumbnail(thumbnails[Math.floor(Math.random() * thumbnails.length)])
   }
 
   useEffect(() => {
-    getThumbnail()
+    let list = getThumbnail()
+    if (list.length > 1) {
+      let thumbnail_interval = setInterval(() => {
+        setThumbnailFromList(list)
+      }, 5000)
+      return () => {
+        clearInterval(thumbnail_interval)
+      }
+    } else {
+      setThumbnail(list[0])
+    }
   }, [])
 
   const onError = (e) => {
     console.log('ON ERROR')
+    console.log(thumbnail)
     e.target.src =
       'https://www.mtu.edu/cs/images/trees-dark-blue-icons-6x6-card1200.jpg'
   }

client/components/telegram-bot-container/TelegramBot.jsx

-import React from 'react'
+import React, { useContext, useState } from 'react'
+import { AuthContext } from '../../store/auth'
+import Button from '../button'
 import { TelegramLogo, CopyIcon } from '../icons'
 import Styles from './TelegramBot.module.css'
 
 const TelegramBot = () => {
-  const [isCopiedTag, setIsCopiedTag] = React.useState({
+  const [isCopiedTag, setIsCopiedTag] = useState({
     isCopied: false,
     isError: false,
     message: ''
   })
-
+  const { isAuthenticated, authState } = useContext(AuthContext)
+  const isAuth = isAuthenticated()
   const { isCopied, isError, message } = isCopiedTag
+  const { isTelegramConnected } = isAuth ? authState.userInfo : ''
   const onClick = () => {
     navigator.clipboard.writeText('probexpertbot').then(
       () => {
@@ -36,16 +40,31 @@ const TelegramBot = () => {
       <a href="https://t.me/probexpertbot" target="_blank">
         <TelegramLogo className={Styles.telegram_bot_logo} />
       </a>
-      <div className={Styles.telegram_bot_tag}>
-        <span>@probexpertbot</span>{' '}
-        <CopyIcon className={Styles.telegram_bot_tag_icon} onClick={onClick} />
-      </div>
-      {isCopied ? (
-        <div className={Styles.telegram_bot_tag_copied}>{message}</div>
-      ) : (
-        isError && (
-          <div className={Styles.telegram_bot_tag_error}>{message}</div>
+      {isAuth ? (
+        !isTelegramConnected ? (
+          <Button href="/telegram/connect" primary full>
+            Connect Telegram with ProbExpert
+          </Button>
+        ) : (
+          <>
+            <div className={Styles.telegram_bot_tag}>
+              <span>@probexpertbot</span>{' '}
+              <CopyIcon
+                className={Styles.telegram_bot_tag_icon}
+                onClick={onClick}
+              />
+            </div>
+            {isCopied ? (
+              <div className={Styles.telegram_bot_tag_copied}>{message}</div>
+            ) : (
+              isError && (
+                <div className={Styles.telegram_bot_tag_error}>{message}</div>
+              )
+            )}
+          </>
         )
+      ) : (
+        <div>Sign in to use the telegram bot</div>
       )}
     </div>
   )

client/components/user-card/avatar-card/index.js

-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import Link from 'next/link'
 import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict'
-
+import { AuthContext } from '../../../store/auth'
 import { publicFetch } from '../../../util/fetcher'
 
 import { Spinner } from '../../icons'
 
 import styles from './avatar-card.module.css'
+import TelegramStatus from '../../telegram/telegram-status/TelegramStatus'
 
 const UserAvatar = ({ username }) => {
   const [userInfo, setUserInfo] = useState(null)
+  const { authState } = useContext(AuthContext)
+  const me = authState.userInfo?.username
+  const isTelegramConnected = authState.userInfo?.isTelegramConnected
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -56,6 +60,9 @@ const UserAvatar = ({ username }) => {
             </p>
           </div>
         )}
+        {me === username && (
+          <TelegramStatus isTelegramConnected={isTelegramConnected} />
+        )}
       </div>
     </div>
   )

client/pages/questions/[slug].js

@@ -22,8 +22,16 @@ const QuestionDetail = ({ questionId, title }) => {
 
   useEffect(() => {
     const fetchQuestion = async () => {
-      const { data } = await publicFetch.get(`/question/${questionId}`)
-      setQuestion(data)
+      try {
+        const response = await publicFetch.get(`/question/${questionId}`)
+        console.log(response)
+        setQuestion(response.data)
+      } catch (error) {
+        console.log(error.response)
+        if (error.response.status === 404) {
+          window.location.href = '/'
+        }
+      }
     }
 
     fetchQuestion()

client/pages/telegram/connect.js

 import React from 'react'
 import Head from 'next/head'
 import Layout from '../../components/layout'
-import DetailPageContainer from '../../components/detail-page-container'
 import PageTitle from '../../components/page-title'
 import TelegramWrapper from '../../components/telegram/telegram-wrapper/TelegramWrapper'
 

client/styles/app.css

@@ -96,3 +96,7 @@ a {
   margin-top: 10px;
   text-align: center;
 }
+.css-1qhb1kr-TimelineContentDetailsWrapper{
+ overflow-y: hidden !important; 
+ overflow-x: hidden !important;
+}
\ No newline at end of file

client/styles/dev.css

@@ -55,7 +55,7 @@
 }
 :root {
   --base: #090909;
-  --base-inverted: #fff;
+  --base-inverted: #2d2d2d;
   --base-100: var(--base);
   --base-90: #242424;
   --base-80: #3d3d3d;
@@ -107,10 +107,10 @@
   --body-color: var(--base-100);
   --body-color-inverted: var(--base-inverted);
   --card-bg: var(--base-inverted);
-  --card-color: var(--base-100);
-  --card-color-secondary: var(--base-70);
-  --card-color-tertiary: var(--base-60);
-  --card-secondary-bg: var(--base-0);
+  --card-color: var(--base-0);
+  --card-color-secondary: var(--base-0);
+  --card-color-tertiary: var(--base-0);
+  --card-secondary-bg: var(--base-80);
   --card-secondary-color: var(--base-90);
   --card-headline-color: var(--base-100);
   --card-border: var(--base-a10);

client/util/fetcher.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 const baseURL =
   process.env.NODE_ENV === 'development'
-    ? 'http://localhost:5000/api'
+    ? 'http://localhost:8080/api'
     : `https://${process.env.SITE_NAME}/api`
 
 const publicFetch = axios.create({