add RECENT ANSWER

components/RecentAnswer.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import RenderRecentAnswers from '../components/RenderRecentAnswers'
+import asyncForEach from '../plugins/asyncForEach'
+import firebase from '../plugins/firebase'
+import 'firebase/firestore'
+
+const db = firebase.firestore()
+
+const RecentAnswer = () => {
+  const [answerData, setAnswerData] = React.useState<any>([])
+  React.useEffect(() => {
+    const getData = async () => {
+      const answerDataSet = []
+      const recentAnswers =
+        await db.collection('answers').orderBy('created', 'desc').limit(3).get()
+      await asyncForEach(recentAnswers.docs, async doc => {
+        const answer = doc.data()
+        const [userData, questionData] = await Promise.all([
+          db.collection('publicUsers').doc(answer.answerUserId).get(),
+          db.collection('questions').doc(answer.questionId).get()
+        ])
+        answerDataSet.push({
+          answer,
+          user: userData.data(),
+          question: questionData.data()
+        })
+      })
+      setAnswerData(answerDataSet)
+    }
+    getData()
+  }, [])
+
+  return (
+    <div>
+      <h3 className="font-medium text-gray-700 text-sm pb-4 border-b-2 border-gray-300">
+        RECENT ANSWERS
+      </h3>
+      <div className="mt-3 mb-5">
+        <RenderRecentAnswers answerData={answerData} />
+      </div>
+    </div>
+  )
+}
+
+export default RecentAnswer

components/RenderRecentAnswers.tsx

@@ -0,0 +1,56 @@
+import { NextPage } from 'next'
+import Link from 'next/link'
+import { Skeleton } from 'antd'
+
+const RenderRecentAnswers: NextPage<Props> = props => {
+  const { answerData } = props
+  if (answerData.length === 0) {
+    return <Skeleton avatar paragraph={{ rows: 2 }} />
+  }
+
+  return (
+    <>
+    {answerData.map((answerObj, index) => (
+      <div className="flex flex-wrap py-4 border-b border-gray-300" key={index}>
+        <Link href="/[username]" as={`/${answerObj.user.username}`}>
+          <a className="w-2/12">
+            <img src={answerObj.user.picture} className="w-10 h-10 rounded-full" alt={name} />
+          </a>
+        </Link>
+        <div className="w-9/12">
+          <Link href="/[username]" as={`/${answerObj.user.username}`}>
+            <a>
+              <span className="hover:underline font-semibold hover:no-underline">
+                {answerObj.user.customName}
+              </span>
+            </a>
+          </Link>
+          <Link href="/answers/[slug]/[id]" as={`/answers/${answerObj.question.slug}/${answerObj.answer.id}`}>
+            <a>
+            {answerObj.answer.content.length <= 90 ?
+              <p className="text-sm">{answerObj.answer.content.length}</p>
+              :
+              <p className="text-sm">{`${answerObj.answer.content.substr(0, 90)}…`}</p>
+            }
+            </a>
+          </Link>
+          <div className="text-xs mt-1">
+            <span>Question: </span>
+            <Link href="/questions/[slug]" as={`/questions/[slug]`}>
+              <a className="text-gray-800 hover:underline">
+                {answerObj.question.text}
+              </a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    ))}
+    </>
+  )
+}
+
+interface Props {
+  answerData: any
+}
+
+export default RenderRecentAnswers

pages/_app.tsx

@@ -18,6 +18,7 @@ import 'antd/lib/tag/style/index.css'
 import 'antd/lib/spin/style/index.css'
 import 'antd/lib/tooltip/style/index.css'
 import 'antd/lib/divider/style/index.css'
+import 'antd/lib/skeleton/style/index.css'
 import 'react-mde/lib/styles/css/react-mde-all.css'
 import '../css/tailwind.css'
 import '../css/main.css'

pages/index.tsx

@@ -6,6 +6,7 @@ import Hero from '../components/Hero'
 import FeaturedMaker from '../components/FeaturedMaker'
 import WelcomeBox from '../components/WelcomeBox'
 import QuestionWrapper from '../components/QuestionWrapper'
+import RecentAnswer from '../components/RecentAnswer'
 import asyncForEach from '../plugins/asyncForEach'
 import firebase from '../plugins/firebase'
 import 'firebase/firestore'
@@ -70,6 +71,7 @@ const Home: NextPage<Props> = props => {
           <aside className="w-full md:w-4/12 lg:w-4/12">
             <WelcomeBox class="border border-gray-300 rounded p-3 mb-5" />
             <FeaturedMaker class="rounded mb-5" />
+            <RecentAnswer />
             <div className="text-xs text-gray-600">
               <div className="mb-3">
                 <Link href="/">