update layout

src/App.js

@@ -1,65 +1,56 @@
-import React from 'react'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
-import { Container } from 'react-bootstrap'
-import Header from './components/Header'
-import Footer from './components/Footer'
-import HomeScreen from './screens/HomeScreen'
-import ProductScreen from './screens/ProductScreen'
-import CartScreen from './screens/CartScreen'
-import LoginScreen from './screens/LoginScreen'
-import RegisterScreen from './screens/RegisterScreen'
-import ProfileScreen from './screens/ProfileScreen'
-import ShippingScreen from './screens/ShippingScreen'
-import PaymentScreen from './screens/PaymentScreen'
-import PlaceOrderScreen from './screens/PlaceOrderScreen'
-import OrderScreen from './screens/OrderScreen'
-import UserListScreen from './screens/UserListScreen'
-import UserEditScreen from './screens/UserEditScreen'
-import ProductListScreen from './screens/ProductListScreen'
-import ProductEditScreen from './screens/ProductEditScreen'
-import OrderListScreen from './screens/OrderListScreen'
+import { Route } from 'react-router-dom'
+
+// layout
+import Layout from './layout/Layout'
+
+// Pages
+import HomeScreen from './pages/HomeScreen'
+import ProductScreen from './pages/ProductScreen'
+import CartScreen from './pages/CartScreen'
+import LoginScreen from './pages/LoginScreen'
+import RegisterScreen from './pages/RegisterScreen'
+import ProfileScreen from './pages/ProfileScreen'
+import ShippingScreen from './pages/ShippingScreen'
+import PaymentScreen from './pages/PaymentScreen'
+import PlaceOrderScreen from './pages/PlaceOrderScreen'
+import OrderScreen from './pages/OrderScreen'
+import UserListScreen from './pages/UserListScreen'
+import UserEditScreen from './pages/UserEditScreen'
+import ProductListScreen from './pages/ProductListScreen'
+import ProductEditScreen from './pages/ProductEditScreen'
+import OrderListScreen from './pages/OrderListScreen'
 
 const App = () => {
   return (
-    <Router>
-      <Header />
-      <main className='py-3'>
-        <Container>
-          <Route path='/order/:id' component={OrderScreen} />
-          <Route path='/shipping' component={ShippingScreen} />
-          <Route path='/payment' component={PaymentScreen} />
-          <Route path='/placeorder' component={PlaceOrderScreen} />
-          <Route path='/login' component={LoginScreen} />
-          <Route path='/register' component={RegisterScreen} />
-          <Route path='/profile' component={ProfileScreen} />
-          <Route path='/product/:id' component={ProductScreen} />
-          <Route path='/cart/:id?' component={CartScreen} />
-          <Route path='/admin/userlist' component={UserListScreen} />
-          <Route path='/admin/user/:id/edit' component={UserEditScreen} />
-          <Route
-            path='/admin/productlist'
-            component={ProductListScreen}
-            exact
-          />
-          <Route
-            path='/admin/productlist/:pageNumber'
-            component={ProductListScreen}
-            exact
-          />
-          <Route path='/admin/product/:id/edit' component={ProductEditScreen} />
-          <Route path='/admin/orderlist' component={OrderListScreen} />
-          <Route path='/search/:keyword' component={HomeScreen} exact />
-          <Route path='/page/:pageNumber' component={HomeScreen} exact />
-          <Route
-            path='/search/:keyword/page/:pageNumber'
-            component={HomeScreen}
-            exact
-          />
-          <Route path='/' component={HomeScreen} exact />
-        </Container>
-      </main>
-      <Footer />
-    </Router>
+    <Layout>
+      <Route path='/order/:id' component={OrderScreen} />
+      <Route path='/shipping' component={ShippingScreen} />
+      <Route path='/payment' component={PaymentScreen} />
+      <Route path='/placeorder' component={PlaceOrderScreen} />
+      <Route path='/login' component={LoginScreen} />
+      <Route path='/register' component={RegisterScreen} />
+      <Route path='/profile' component={ProfileScreen} />
+      <Route path='/product/:id' component={ProductScreen} />
+      <Route path='/cart/:id?' component={CartScreen} />
+      <Route path='/admin/userlist' component={UserListScreen} />
+      <Route path='/admin/user/:id/edit' component={UserEditScreen} />
+      <Route path='/admin/productlist' component={ProductListScreen} exact />
+      <Route
+        path='/admin/productlist/:pageNumber'
+        component={ProductListScreen}
+        exact
+      />
+      <Route path='/admin/product/:id/edit' component={ProductEditScreen} />
+      <Route path='/admin/orderlist' component={OrderListScreen} />
+      <Route path='/search/:keyword' component={HomeScreen} exact />
+      <Route path='/page/:pageNumber' component={HomeScreen} exact />
+      <Route
+        path='/search/:keyword/page/:pageNumber'
+        component={HomeScreen}
+        exact
+      />
+      <Route path='/' component={HomeScreen} exact />
+    </Layout>
   )
 }
 

src/components/Footer.js → src/layout/Footer.js

@@ -2,11 +2,12 @@ import React from 'react'
 import { Container, Row, Col } from 'react-bootstrap'
 
 const Footer = () => {
+  const year = new Date().getFullYear()
   return (
     <footer>
       <Container>
         <Row>
-          <Col className='text-center py-3'>Copyright &copy; ProShop</Col>
+          <Col className='text-center py-3'>Copyright &copy; {year} The Shop</Col>
         </Row>
       </Container>
     </footer>

src/components/Header.js → src/layout/Header.js

@@ -3,7 +3,7 @@ import { Route } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
 import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap'
-import SearchBox from './SearchBox'
+import SearchBox from '../components/SearchBox'
 import { logout } from '../actions/userActions'
 
 const Header = () => {
@@ -21,7 +21,7 @@ const Header = () => {
       <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
         <Container>
           <LinkContainer to='/'>
-            <Navbar.Brand>ProShop</Navbar.Brand>
+            <Navbar.Brand>The Shop</Navbar.Brand>
           </LinkContainer>
           <Navbar.Toggle aria-controls='basic-navbar-nav' />
           <Navbar.Collapse id='basic-navbar-nav'>

src/layout/Layout.js

@@ -0,0 +1,21 @@
+import { BrowserRouter as Router } from 'react-router-dom'
+import { Container } from 'react-bootstrap'
+
+import Meta from './Meta'
+import Header from './Header'
+import Footer from './Footer'
+
+const Layout = ({ children, title, description, pageName }) => {
+  return (
+    <Router>
+      <Meta title={title} pageName={pageName} description={description} />
+      <Header />
+      <Container>
+        <main className='py-3'>{children}</main>
+      </Container>
+      <Footer />
+    </Router>
+  )
+}
+
+export default Layout

src/components/Meta.js → src/layout/Meta.js

@@ -1,19 +1,20 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 
-const Meta = ({ title, description, keywords }) => {
+const Meta = ({ title, description, keywords, pageName }) => {
   return (
     <Helmet>
-      <title>{title}</title>
+      <title>{title} | {pageName}</title>
       <meta name='description' content={description} />
       <meta name='keyword' content={keywords} />
     </Helmet>
   )
 }
 
 Meta.defaultProps = {
-  title: 'Welcome To ProShop',
-  description: 'We sell the best products for cheap',
+  title: 'The Shop',
+  pageName: 'All Products',
+  description: 'Get The Real Deal',
   keywords: 'electronics, buy electronics, cheap electroincs',
 }
 

src/screens/HomeScreen.js → src/pages/HomeScreen.js

@@ -7,7 +7,6 @@ import Message from '../components/Message'
 import Loader from '../components/Loader'
 import Paginate from '../components/Paginate'
 import ProductCarousel from '../components/ProductCarousel'
-import Meta from '../components/Meta'
 import { listProducts } from '../actions/productActions'
 
 const HomeScreen = ({ match }) => {
@@ -26,7 +25,6 @@ const HomeScreen = ({ match }) => {
 
   return (
     <>
-      <Meta />
       {!keyword ? (
         <ProductCarousel />
       ) : (

src/screens/ProductScreen.js → src/pages/ProductScreen.js

@@ -5,7 +5,7 @@ import { Row, Col, Image, ListGroup, Card, Button, Form } from 'react-bootstrap'
 import Rating from '../components/Rating'
 import Message from '../components/Message'
 import Loader from '../components/Loader'
-import Meta from '../components/Meta'
+import Meta from '../layout/Meta'
 import {
   listProductDetails,
   createProductReview,
@@ -60,6 +60,7 @@ const ProductScreen = ({ history, match }) => {
 
   return (
     <>
+      <Meta pageName={product.name} />
       <Link className='btn btn-light my-3' to='/'>
         Go Back
       </Link>
@@ -69,7 +70,6 @@ const ProductScreen = ({ history, match }) => {
         <Message variant='danger'>{error}</Message>
       ) : (
         <>
-          <Meta title={product.name} />
           <Row>
             <Col md={6}>
               <Image src={product.image} alt={product.name} fluid />