displaying single specific blogs

Author: pramit-marattha

client/actions/blog.js

@@ -31,4 +31,13 @@ export const listBlogsWithCategoriesAndTaglists = (skip,limit) => {
     }).then(response => {
             return response.json();
         }).catch(error => console.log(error));
-};
+};
+
+
+export const singleBlog = slug =>{
+    return fetch(`${API}/api/blog/${slug}`,{
+        method: 'GET'
+    }).then(response=>{
+        return response.json()
+    }).catch(err => console.log(err))
+}

client/components/blog/Card/Card.js

@@ -39,7 +39,7 @@ const Card =({blog})=>{
     <div className="lead pb-4" style={{boxShadow:"inset 0 0 2000px rgba(255, 255, 255, .5)",filter:"blur(0.1px)",borderRadius:"17px"}}>
     <header>
         <Link href={`/blogs/${blog.slug}`}>
-            <a><h3 className="display-5 pt-4 pb-2 font-weight-bold pl-5">{blog.title}</h3></a>
+            <a target="_blank"><h3 className="display-5 pt-4 pb-2 font-weight-bold pl-5">{blog.title}</h3></a>
         </Link>
     </header>
         <section>
@@ -54,7 +54,7 @@ const Card =({blog})=>{
             <div className="col-md-8">
                 <section>
                     <div className="pb-3">{renderHTML(blog.excerpt)}</div>
-                    <Link href={`/blogs/${blog.slug}`}><a className="btn btn-info  pt-2">Read more<MoreIcon/></a></Link>
+                    <Link href={`/blogs/${blog.slug}`}><a className="btn btn-info  pt-2" target="_blank">Read more<MoreIcon/></a></Link>
                 </section>
             </div>
         </div>

client/pages/blogs/[slug].js

@@ -0,0 +1,41 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import {withRouter} from "next/router";
+import Layout from '../../components/Layout';
+import React,{ useState,useEffect } from 'react';
+import { singleBlog } from '../../actions/blog';
+import LabelIcon from '@material-ui/icons/Label';
+import CategoryIcon from '@material-ui/icons/Category';
+import {API,DOMAIN,APP_NAME} from '../../config';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+
+const SingleBlog = ({blog,router})=>{
+    return (
+        <>
+        <Layout>
+            <main>
+                <article>
+                    <div className="container-fluid">
+                        <section>
+                            {JSON.stringify(blog)}
+                        </section>
+                    </div>
+                </article>
+            </main>
+        </Layout>
+        </>
+    )
+}
+
+SingleBlog.getInitialProps=({query})=>{
+    return singleBlog(query.slug).then(data=>{
+        if (data.error){
+            console.log(data.error)
+        } else {
+            return {blog:data}
+        }
+    })
+}
+
+export default withRouter(SingleBlog);

server/controllers/blog.js

@@ -171,7 +171,7 @@ exports.bloglistsallCategoriesTags =(req,res)=>{
 
 exports.read =(req,res)=>{
     const slug = req.params.slug.toLowerCase();
-    Blogs.findOne({slug}).populate("categories","_id name slug").populate("taglists","_id name slug").populate("postedBy","_id name username").select("_id title body slug mtitle mdesc categories taglists postedBy createdAt updatedAt").exec((err,data)=>{
+    Blog.findOne({slug}).populate("categories","_id name slug").populate("taglists","_id name slug").populate("postedBy","_id name username").select("_id title body slug mtitle mdesc categories taglists postedBy createdAt updatedAt").exec((err,data)=>{
         if (err){
             return res.json({
                 error: errorHandler(err)