Fix Home page

client/src/App/App.js

@@ -21,6 +21,7 @@ import {
   NOT_FOUND,
   PRODUCTS,
   CART,
+  BLOG,
 } from '../utils/router.constant';
 
 import {
@@ -36,6 +37,7 @@ import {
   Signup,
   NotFound,
   ComingSoon,
+  Blog,
 } from '../pages';
 
 const App = () => (
@@ -50,6 +52,9 @@ const App = () => (
           <Route path={BLOGS}>
             <Blogs />
           </Route>
+          <Route path={BLOG}>
+            <Blog />
+          </Route>
           <Route path={CONTACTS}>
             <Contacts />
           </Route>

client/src/component/BlogCard/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
-import { string } from 'prop-types';
+import { string, number } from 'prop-types';
 import useStyles from './style';
 
-function BlogsCard({ title, image, desc }) {
+function BlogsCard({ id, title, image, desc }) {
   const classes = useStyles();
   const fakeImage =
     'https://www.matrix.com/~/media/images/hair-color-gallery/hair-color-looks/highlights/brown-highlights/brown-highlights-1.jpg';
@@ -22,7 +22,7 @@ function BlogsCard({ title, image, desc }) {
         <Typography className={classes.desc} variant="body1">
           {desc}
         </Typography>
-        <Link className={classes.readMore} to="/blogs">
+        <Link className={classes.readMore} to={`/blogs/${id}`}>
           Read more
         </Link>
       </div>
@@ -31,6 +31,7 @@ function BlogsCard({ title, image, desc }) {
 }
 
 BlogsCard.propTypes = {
+  id: number.isRequired,
   image: string.isRequired,
   title: string,
   desc: string,

client/src/pages/Home/index.js

@@ -14,7 +14,7 @@ import {
   Header,
 } from '../../component';
 
-import { BLOGS, BOOK } from '../../utils/router.constant';
+import { BLOGS, BOOK, PRODUCTS } from '../../utils/router.constant';
 
 import useStyles from './style';
 
@@ -60,6 +60,7 @@ const Home = () => {
             <ButtonComponent
               variant="contained"
               className={`${classes.button} ${classes.buyNowBtn}`}
+              onClick={() => history.push(PRODUCTS)}
             >
               BuyProduct
             </ButtonComponent>
@@ -96,6 +97,7 @@ const Home = () => {
           {blogs.map((blog) => (
             <BlogsCard
               key={blog.id}
+              id={blog.id}
               title={blog.name}
               desc={
                 !isMobile

client/src/pages/SpecificBlog/index.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import { useParams } from 'react-router-dom';
+import Axios from 'axios';
+
+import Card from '@material-ui/core/Card';
+import Typography from '@material-ui/core/Typography';
+import useStyles from './style';
+
+function Blog() {
+  const classes = useStyles();
+  const [blog, setBlog] = useState({});
+  const [, setErrorMsg] = useState('');
+  const fakeImage =
+    'https://www.matrix.com/~/media/images/hair-color-gallery/hair-color-looks/highlights/brown-highlights/brown-highlights-1.jpg';
+
+  const { blogId } = useParams();
+  useEffect(() => {
+    (async () => {
+      try {
+        const { data } = await Axios.get(`api/v1/blog/${blogId}`);
+        setBlog(data.data);
+      } catch (error) {
+        setErrorMsg(error.response.data);
+      }
+    })();
+  }, [blogId]);
+
+  return (
+    <Card className={classes.root}>
+      <img
+        className={classes.image}
+        src={blog.image || fakeImage}
+        alt="service"
+      />
+
+      <div className={classes.right}>
+        <Typography className={classes.title} variant="h5" color="primary">
+          {blog.title}
+        </Typography>
+        <Typography className={classes.desc} variant="body2">
+          {blog.content}
+        </Typography>
+      </div>
+    </Card>
+  );
+}
+
+export default Blog;

client/src/pages/index.js

@@ -10,6 +10,7 @@ import Signin from './Signin';
 import Signup from './Signup';
 import NotFound from './NotFound';
 import ComingSoon from './ComingSoon';
+import Blog from './SpecificBlog';
 
 export {
   Blogs,
@@ -24,4 +25,5 @@ export {
   Signup,
   NotFound,
   ComingSoon,
+  Blog,
 };

client/src/utils/router.constant.js

@@ -11,3 +11,4 @@ export const CART = '/cart';
 export const DASHBOARD = '/dashboard';
 export const DASHBOARD_APPOINTMENT = '/appointment';
 export const NOT_FOUND = '/404';
+export const BLOG = '/blogs:id';

server/controller/common/getBlogByBlogId.js

@@ -0,0 +1,21 @@
+const getOneBlog = require('../../database/queries');
+// const boomify = require('../../utilis/boomify');
+
+const getBlogByBlogId = async (req, res, next) => {
+  try {
+    const { id } = req.params;
+    console.log(getOneBlog(1));
+    // const { rows } = await getOneBlog(id);
+    // if (!rows) {
+    //   throw boomify(404, 'Blog does not exist');
+    // }
+    res.json({
+      status: 200,
+      data: 'rows',
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = getBlogByBlogId;

server/controller/common/index.js

@@ -4,6 +4,7 @@ const contactusHandler = require('./contactus');
 const signin = require('./signin');
 const signUp = require('./signUp');
 const getBookingsByDate = require('./getBookingsByDate');
+const getBlogByBlogId = require('./getBlogByBlogId');
 
 module.exports = {
   servicesHandler,
@@ -12,4 +13,5 @@ module.exports = {
   signin,
   getBookingsByDate,
   getAllBlogs,
+  getBlogByBlogId,
 };

server/controller/index.js

@@ -5,6 +5,7 @@ const {
   getBookingsByDate,
   getAllBlogs,
   contactusHandler,
+  getBlogByBlogId,
 } = require('./common');
 
 const {
@@ -34,4 +35,5 @@ module.exports = {
   deleteBookingController,
   contactusHandler,
   userData,
+  getBlogByBlogId,
 };

server/database/queries/getBlogById.js

@@ -0,0 +1,11 @@
+const connection = require('../config/connection');
+
+const getOneBlog = (blogId) => {
+  const sql = {
+    text: 'SELECT * FROM blogs WHERE id=$1;',
+    values: [blogId],
+  };
+  return connection.query(sql);
+};
+
+module.exports = getOneBlog;

server/database/queries/index.js

@@ -1,4 +1,6 @@
-const { addBook, checkAvailability, getProfile } = require('./user');
+const {
+  addBook, checkAvailability, getProfile,
+} = require('./user');
 const getBlogs = require('./getBlogs');
 const postMessage = require('./contactus');
 const checkUserByEmail = require('./checkUserByEmail');
@@ -10,6 +12,7 @@ const getBookingsByUserId = require('./getBookingsByUserId');
 const deleteBookingByAdmin = require('./deleteBookingByAdmin');
 const getUserData = require('./getUserData');
 const deleteBooking = require('./deleteBook');
+const getOneBlog = require('./getBlogById');
 
 module.exports = {
   getServices,
@@ -26,4 +29,5 @@ module.exports = {
   checkAvailability,
   deleteBooking,
   getBlogs,
+  getOneBlog,
 };

server/database/queries/user/index.js

@@ -2,4 +2,6 @@ const getProfile = require('./getProfile');
 const addBook = require('./addBook');
 const checkAvailability = require('./checkAvailability');
 
-module.exports = { addBook, checkAvailability, getProfile };
+module.exports = {
+  addBook, checkAvailability, getProfile,
+};

server/routes/common.js

@@ -2,7 +2,13 @@ const commonRouter = require('express').Router();
 
 const { signinValidation } = require('../utilis/validation');
 const {
-  signUp, signin, servicesHandler, getBookingsByDate, contactusHandler, getAllBlogs,
+  signUp,
+  signin,
+  servicesHandler,
+  getBookingsByDate,
+  contactusHandler,
+  getAllBlogs,
+  getBlogByBlogId,
 } = require('../controller');
 
 commonRouter.get('/services', servicesHandler);
@@ -11,5 +17,6 @@ commonRouter.post('/signin', signinValidation, signin);
 commonRouter.post('/signup', signUp);
 commonRouter.get('/bookings/:date', getBookingsByDate);
 commonRouter.get('/blog', getAllBlogs);
+commonRouter.get('/blog/:id', getBlogByBlogId);
 
 module.exports = commonRouter;