Lisiting and displaying all the categories and taglists inside blog page

Author: pramit-marattha

client/components/blog/Card/Card.js

@@ -5,6 +5,9 @@ import moment from 'moment';
 import { API } from '../../../config';
 import LabelIcon from '@material-ui/icons/Label';
 import CategoryIcon from '@material-ui/icons/Category';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import MoreIcon from '@material-ui/icons/More';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 const Card =({blog})=>{
 
@@ -33,10 +36,10 @@ const Card =({blog})=>{
     }; 
 
     return (
-    <div className="lead pb-4">
+    <div className="lead pb-4" style={{boxShadow:"inset 0 0 2000px rgba(255, 255, 255, .5)",filter:"blur(0.1px)",borderRadius:"5px"}}>
     <header>
         <Link href={`/blogs/${blog.slug}`}>
-            <a><h3 className="display-5 pt-3 pb-4 font-weight-bold">{blog.title}</h3></a>
+            <a><h3 className="display-5 pt-4 pb-2 font-weight-bold pl-5">{blog.title}</h3></a>
         </Link>
     </header>
         <section>
@@ -52,7 +55,7 @@ const Card =({blog})=>{
                 <section>
                     <div className="pb-3">{renderHTML(blog.excerpt)}</div>
                     <Link href={`/blogs/${blog.slug}`}>
-                        <a className="btn btn-info  pt-2">Read more</a>
+                        <a className="btn btn-info  pt-2">Read more <MoreIcon/></a>
                     </Link>
                 </section>
             </div>

client/pages/blogs/index.js

@@ -5,18 +5,40 @@ import React,{ useState,useEffect } from 'react';
 import { listBlogsWithCategoriesAndTaglists } from '../../actions/blog';
 import { API } from '../../config';
 import Card from "../../components/blog/Card";
+import LabelIcon from '@material-ui/icons/Label';
+import CategoryIcon from '@material-ui/icons/Category';
 
 
 const Blogs = ({blogs,categories,taglists,size}) => {
     const listAndDisplayAllBlogs = ()=>{
         return blogs.map((blog,index)=>(
             <article key={index}>
                 <Card blog={blog}/>
-                <hr style={{backgroundColor:"white",height:"2px",width:"100%"}}/>
+                <hr style={{backgroundColor:"white",height:"2px",width:"100%",filter:"blur(3px)"}}/>
             </article>
         ))
     }
 
+    const listAndDisplayAllTheCategories =() =>{
+        return categories.map((cat,index)=>{
+                return (
+                <Link href={`/categories/${cat.slug}`} key={index}>
+                <a className="btn btn-sm btn-success mr-1 ml-1 mt-3">{cat.name}</a>
+                </Link>
+                )
+        })
+    };
+
+    const listAndDisplayAllTheTaglists =() =>{
+        return taglists.map((tagg,index)=>{
+                return (
+                    <Link key={index} href={`/taglists/${tagg.slug}`}>
+                    <a className="btn btn-sm btn-info mr-1 ml-1 mt-3 mb-4">{tagg.name}</a>
+                </Link>
+                )
+        })
+    };
+
     return (
         <>
         <Layout>
@@ -27,7 +49,13 @@ const Blogs = ({blogs,categories,taglists,size}) => {
                             <h1 className="display-4 font-weight-bold text-center">Tech Blogs</h1>
                         </div>
                         <section>
-                            <p>show categories and tags</p>
+                            <div className="pb-5 text-center">
+                            <CategoryIcon style={{color:"limegreen"}}/>{listAndDisplayAllTheCategories()}
+                                <br/>
+                                <LabelIcon style={{color:"teal"}}/>{listAndDisplayAllTheTaglists()} 
+                                {/* {JSON.stringify(taglists)} */}
+                                {/* {JSON.stringify(categories)} */}
+                            </div>
                         </section>
                     </header>
                 </div>

server/controllers/blog.js

@@ -160,9 +160,9 @@ exports.bloglistsallCategoriesTags =(req,res)=>{
                         error: errorHandler(err)
                     })
                 }
-                tags = tagg
+                taglists = tagg
                 // return all the categories ,tags and the blogs
-                res.json({blogs,categories,tags,size: blogs.length});
+                res.json({blogs,categories,taglists,size: blogs.length});
             })
         })
     })