basic structure of a blog site

JaberHPranto · Sep 3, 2021 · 49f8fee · 49f8fee
1 parent 991ce4a
commit 49f8fee
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 15 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,10 +1,10 @@
 import "bootstrap/dist/css/bootstrap.min.css";
-import EcommercePage from "./pages/EcommercePage";
+import MainPage from "./pages/MainPage";
 import "./styles/bootstrap.min.css";
 
 function App() {
   return (
-    <EcommercePage />
+    <MainPage />
   )
 }
 

diff --git a/client/src/components/Blog/Blog.js b/client/src/components/Blog/Blog.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+import blogHome from '../../images/blogHome.jpg'
+import '../../styles/blog.css'
+import BlogCard from './BlogCard'
+
+function Blog() {
+    const blogCategories = ['All', 'Plant', 'Gardening', 'Green Living']
+    const num = [1,2,3,4,5]
+    return (
+        <>
+            <div className="blog-home">              
+                <img className="blog-home-img" src={blogHome} alt="blog-home" />
+                <div className="blog-home-text">
+                    <h3>Latest Articles</h3>
+                    <p>Discover the most outstanding articles in all topics related to Plants</p>
+                </div>
+
+                <Row className="blog-row">
+                    <Col md={2}>
+                        <div className='blog-category'>
+                            <h5>Category</h5>
+                            {blogCategories.map(blog => (
+                                <div>{blog}</div>
+                            ))}
+                        </div>
+                    </Col>
+                    <Col md={10}>
+                        <Row>
+                            {num.map(n => (
+                                <Col xs={12} sm={6} md={6} lg={4} className='blog-card'>
+                                    <BlogCard />
+                                </Col>
+                            ))}
+                        </Row>
+                    </Col>
+                </Row> 
+            </div>
+        </>
+    )
+}
+
+export default Blog
diff --git a/client/src/components/Blog/BlogCard.js b/client/src/components/Blog/BlogCard.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, Card } from 'react-bootstrap'
+
+function BlogCard() {
+    return (
+        <div>
+            <Card style={{ width: '24rem'}}>
+            <Card.Img style={{padding:'0.7rem'}} variant="top" src="https://images.unsplash.com/photo-1520121401995-928cd50d4e27?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" />
+            <Card.Body>
+                <Card.Title>Card Title</Card.Title>
+                <Card.Text>
+                Some quick example text to build on the card title and make up the bulk of
+                the card's content.
+                </Card.Text>
+                <Button variant="primary">Go somewhere</Button>
+            </Card.Body>
+            </Card>            
+        </div>
+    )
+}
+
+export default BlogCard
diff --git a/client/src/components/Ecommerce/Screen/HomeScreen.js b/client/src/components/Ecommerce/Screen/HomeScreen.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Col, Row } from 'react-bootstrap'
 import { useDispatch, useSelector } from 'react-redux'
-import { useLocation } from 'react-router-dom'
 import { fetchProducts } from '../../../redux/actions/productActions'
 import FilterCategory from '../FilterCategory'
 import FilterSort from "../FilterSort"
@@ -16,11 +15,6 @@ function HomeScreen({ match }) {
     const [productCategory, setProductCategory] = useState('')
     const [productSort, setProductSort] = useState('')
 
-    const { search } = useLocation()
-    const query = new URLSearchParams(search)
-    const q = query.get("sort")
-    console.log("query",q);
-
     const dispatch = useDispatch()
     const productList = useSelector(state => state.productList)
     const { loading, error, products, page, numOfPages } = productList
@@ -30,6 +24,9 @@ function HomeScreen({ match }) {
     const category = productCategory
     const sort = productSort
 
+    console.log("Category :",category);
+    console.log("Sort :",sort);
+
 
     useEffect(() => {
         dispatch(fetchProducts(keyword,pageNumber,category,sort))

diff --git a/client/src/components/LandingPage/Navbar.js b/client/src/components/LandingPage/Navbar.js
@@ -10,9 +10,9 @@ function NavBar() {
                     <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                     <Navbar.Collapse id="responsive-navbar-nav">
                         <Nav className="me-auto nav-item" >
-                            <Nav.Link href="#features">Plant Search</Nav.Link>
-                            <Nav.Link href="#pricing1">Identify Plant</Nav.Link>
-                            <Nav.Link href="#pricing2">Blog</Nav.Link>
+                            <Nav.Link href="/search-plant">Plant Search</Nav.Link>
+                            <Nav.Link href="/identify-plant">Identify Plant</Nav.Link>
+                            <Nav.Link href="/blog">Blog</Nav.Link>
                             <Nav.Link href="/market">Market Place</Nav.Link>
                         </Nav>
                         <Nav>

diff --git a/client/src/images/blogHome.jpg b/client/src/images/blogHome.jpg
diff --git a/client/src/pages/EcommercePage.js → client/src/pages/MainPage.js b/client/src/pages/EcommercePage.js → client/src/pages/MainPage.js
@@ -1,6 +1,9 @@
 import React from "react";
 import { Container } from "react-bootstrap";
 import { BrowserRouter as Router, Route } from "react-router-dom";
+// Blog Section
+import Blog from "../components/Blog/Blog";
+// E-Commerce Section
 import Footer from "../components/Ecommerce/Footer";
 import Header from '../components/Ecommerce/Header';
 import CartScreen from '../components/Ecommerce/Screen/CartScreen';
@@ -18,11 +21,13 @@ import ProfileScreen from '../components/Ecommerce/Screen/ProfileScreen';
 import RegisterScreen from '../components/Ecommerce/Screen/RegisterScreen';
 import ShippingScreen from "../components/Ecommerce/Screen/ShippingScreen";
 import UserListScreen from "../components/Ecommerce/Screen/UserListScreen";
-import LandingPage from '../pages/LandingPage';
 import '../styles/ecommerce.css';
+// Landing Page
+import LandingPage from './LandingPage';
 
 
-function EcommercePage() {
+
+function MainPage() {
   return (
     <Router>
         <Header />
@@ -48,9 +53,11 @@ function EcommercePage() {
           <Route path="/placeorder" component={PlaceOrderScreen} />
           <Route path="/payment" component={PaymentScreen} />
         </Container>
+        <Route path="/blog" component={Blog} />
+
       </main>
         <Footer />
     </Router>
   )
 }
-export default EcommercePage;
+export default MainPage;
diff --git a/client/src/styles/blog.css b/client/src/styles/blog.css
@@ -0,0 +1,33 @@
+.blog-home {
+  margin-top: -1.5rem;
+}
+.blog-home-img {
+  width: 100%;
+  height: 40vh;
+  object-fit: cover;
+  filter: brightness(70%);
+}
+.blog-home-text {
+  margin-top: 2rem;
+  margin-left: 1rem;
+}
+.blog-home-text h3 {
+  font-size: 2.5rem;
+  color: #333;
+}
+.blog-home-text p {
+  font-size: 1.3rem;
+  font-family: "Nunito" !important;
+}
+.blog-row {
+  margin-left: 0.5rem !important;
+  margin-right: 0 !important;
+}
+.blog-category {
+}
+.blog-category h5 {
+  font-size: 1.5rem;
+}
+.blog-card {
+  margin-bottom: 2rem;
+}
diff --git a/server/controller/productController.js b/server/controller/productController.js
@@ -7,7 +7,7 @@ import User from '../models/userModel.js'
 export const getProducts = asyncHandler(async (req, res) => {
 
     // for pagination
-    const pageSize = 25
+    const pageSize = 50
     const page = req.query.pageNumber || 1
 
     // for search