made the basic article view

Author: YogPanjarale

Diff for: frontend/pages/api/blog/[slug].ts

@@ -1,28 +1,34 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import admin from '../../../src/firebase/admin';
+import { Content } from '../../blog/[slug]';
 type Data = {
   slug: string,
   content?: any,
   error?: string
 }
 
-export default async (req: NextApiRequest, res: NextApiResponse<Data>) => {
+const api = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
   const firestore = admin.firestore();
   const slug = req.query.slug as string;
   try {
 
-    const doc = await firestore.collection('blogs').where("slug", "==", slug).get();
+    const blog = await getBlog(slug)
+    res.status(200).json({ slug: slug, content: blog })
+  } catch (error) {
+    res.status(404).json(
+      { error: error.message == "Cannot read property 'data' of undefined" ? "blog not found" : error.message, slug: slug });
+  }
+}
+export default api;
+export const getBlog = async (slug:string):Promise<Content> =>{
+  const firestore = admin.firestore();
+  const doc = await firestore.collection('blogs').where("slug", "==", slug).get();
     const blog = doc.docs[0].data();
     if (blog.user) {
       blog.user = (await firestore.collection('users').doc(blog.user).get()).data();
     }
     if (blog.time) {
-      blog.time = new Date(blog.time._seconds * 1000);
+      blog.time = new Date(blog.time._seconds * 1000).toString();
     }
-    console.log(blog)
-    res.status(200).json({ slug: slug, content: blog })
-  } catch (error) {
-    res.status(404).json(
-      { error: error.message == "Cannot read property 'data' of undefined" ? "blog not found" : error.message, slug: slug });
-  }
+  return blog as Content;
 }

Diff for: frontend/pages/blog/[slug].tsx

@@ -0,0 +1,73 @@
+import { getBlog } from "../api/blog/[slug]";
+
+export interface Root {
+	slug: string;
+	content: Content;
+}
+
+export interface Content {
+	time: string;
+	content: string;
+	slug: string;
+	user: User;
+}
+
+export interface User {
+	profile: string;
+	name: string;
+}
+
+const Blog = ({ content, found }: { content?: Content; found: boolean }) => {
+	console.log(content);
+	if (found) {
+		return (
+			<figure className="md:flex flex-col bg-gray-100 rounded-xl p-8">
+				<div className="pt-6 text-left space-y-4">
+					<blockquote>
+						<p className="text-lg font-semibold">
+							“{content.content}”
+						</p>
+					</blockquote>
+
+					<figcaption className="font-medium flex flex-row justify-start">
+						<img
+							className="w-12 h-12 rounded-full mx-1"
+							src={content.user.profile}
+							alt={content.user.name}
+							width="64"
+							height="96"
+						/>
+						<div>
+							<div className="text-cyan-600">
+								{content.user.name}
+							</div>
+							<div className="text-gray-500">
+								{new Date(content.time).toDateString()}
+							</div>
+						</div>
+					</figcaption>
+				</div>
+			</figure>
+		);
+	}
+	return (
+		<div className="flex justify-center align-middle">
+			Aritcle Not Found
+		</div>
+	);
+};
+export async function getServerSideProps(context) {
+	const slug = context.params.slug;
+	try {
+		const blog = await getBlog(slug);
+		return {
+			props: {
+				found: true,
+				content: blog,
+			}, // will be passed to the page component as props
+		};
+	} catch (error) {
+		return { props: { found: false } };
+	}
+}
+export default Blog;