Merge pull request #165 from aklite/dev

added dynamic title and meta tags

package.json

@@ -25,14 +25,15 @@
     "react-currency-format": "^1.1.0",
     "react-dom": "^17.0.2",
     "react-flip-move": "^3.0.4",
+    "react-helmet-async": "^1.3.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
     "stripe": "^8.176.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",

public/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Amazon Clone Made With ReactJs" />
+  <meta name="keywords" content="Amazon Clone Reactjs Buy clothes Laptops watches books bags shoes digial accessories mobile">
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.js

@@ -1,9 +1,7 @@
-
 import React, { useEffect, useState } from 'react';
 import Header from './components/header/Header';
 import Home from './pages/home/Home';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-
 import Checkout from './components/checkOut/Checkout';
 import Login from './pages/login/Login';
 import { auth } from './firebase';
@@ -56,8 +54,10 @@ function App() {
       }
     });
   }, []);
+  const helmetContext = {};
   return (
     <>
+
       <Router>
         <div className="App">
           <Switch>

src/Categories/AllCategories.js

@@ -5,14 +5,16 @@ import { Link } from 'react-router-dom';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import "./AllCategories.css"
+import usePageMeta from '../hooks/usePageMeta';
 
 function AllCategories() {
+  usePageMeta("All Categories | amazon-clone","All Categories - Online Shoppping site");
   return (
     <>
       <div className="shop-by-category-heading">
         <h1>Shop By Category</h1>
       </div>
-
+      
       <Row className='rows'>
         <Col>
           <Card style={{ width: '18rem' }}>
@@ -68,7 +70,7 @@ function AllCategories() {
           </Card>
         </Col>
       </Row>
-
+      
     </>
   )
 }

src/Categories/BooksToys/BookToys.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import Product from '../../components/product/Product';
 import { useStateValue } from '../../context/StateProvider';
+import usePageMeta from '../../hooks/usePageMeta';
 import "./BookToys.css"
 
 
 function BookToys(id, title, price, image, rating, reviews) {
-
+   usePageMeta("Books and toys - Amazon Clone","Shop online buy toys, books")
   const products = [
     {
       title:'Storio Kids Toys LCD Writing Tablet 8.5Inch E-Note Pad Best Birthday Gift for Girls Boys',

src/Categories/Electronics/Electronics.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import Product from '../../components/product/Product'
+import usePageMeta from '../../hooks/usePageMeta'
 import "./Electronics.css"
 
 function Electronics() {
+  usePageMeta("Electronics - Amazon Clone","Shop online digital products using amazon clone");
   const products=[{
 title:"boAt Airdopes 121v2 True Wireless Earbuds with Upto 14 Hours Playback, 8MM Drivers, Battery Indicators,",
 price:999,

src/Categories/FashionBeauty/FashionBeauty.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import "./FashionBeauty.css"
 import Product from '../../components/product/Product'
+import usePageMeta from '../../hooks/usePageMeta'
 
 function FashionBeauty() {
-
+  usePageMeta("Fashion Beauty - Amazon Clone","By Shoes Clothes, Branded Clothes, Denim Watches");
   const products = [
     {
       title:"Men's Cotton Blend Full Sleeve Shirt | Stylish Printed Casual Wear Shirt for",

src/components/checkOut/Checkout.js

@@ -8,8 +8,10 @@ import FlipMove from "react-flip-move";
 import CurrencyFormat from "react-currency-format";
 import Navbar from "../navbar/Navbar";
 import { useStateValue } from "../../context/StateProvider";
+import usePageMeta from "../../hooks/usePageMeta";
 
 function Checkout({ price }) {
+  usePageMeta("Checkout - Amazon Clone","")
   const [{ basket, user }, dispatch] = useStateValue();
 
   const Finalproducts = ({ basket }) => (

src/components/header/Header.js

@@ -17,10 +17,10 @@ function Header(props) {
   const [screenWidth, setScreenWidth] = useState(window.innerWidth);
   const [value, setValue] = useState(false);
 
-  {
+  // {
     /*this will help you 
     signout*/
-  }
+  // }
   let history=useHistory();
   const handleAuthentication = () => {
     if (user) {
@@ -77,13 +77,13 @@ function Header(props) {
             {user ? 'Sign Out' : 'Sign In'}
           </span>
           {(value) ? <>
-              <div class="nav_arrow"></div>
+              <div className="nav_arrow"></div>
             <div className="box">
-              <div class="signupbtn" onClick={()=>history.push('/login')}>
+              <div className="signupbtn" onClick={()=>history.push('/login')}>
                 Sign In
               </div>
-              <div class="text">
-                New customer?<span class="link" onClick={()=>history.push('/login')}> Start here.</span>
+              <div className="text">
+                New customer?<span className="link" onClick={()=>history.push('/login')}> Start here.</span>
               </div>
             </div>
             </>:null}

src/components/payment/Payment.js

@@ -9,6 +9,7 @@ import CurrencyFormat from "react-currency-format";
 import {getBasketTotal} from "../../reducer/reducer";
 import axios from '../../axios';
 import {db} from "../../firebase";
+import usePageMeta from '../../hooks/usePageMeta';
 
 
 // importing some hooks from stripe
@@ -17,6 +18,7 @@ const promise=loadStripe('pk_test_51JdCsbSDjgMnau9ncKpDOaddNIWtdhVTTV92V4ShkTzLe
 
 
 function Payment() {
+    usePageMeta("Payments - Amazon Clone","Shop with us")
     const[{basket,user},dispatch]=useStateValue();
     const history=useHistory();
 

src/hooks/usePageMeta.js

@@ -0,0 +1,13 @@
+import {useEffect} from 'react'
+
+const usePageMeta = (title,description) => {
+  const defaultTitle="Online Shopping Site in India - Amazon clone"
+  const defaultDesc="Online Shopping site in India: Shop Online for Mobiles, Books, Watches, Shoes and More - Amazon-clone.in"
+
+  useEffect(() => {
+    document.title = title || defaultTitle;
+    document.querySelector("meta[name='description']").setAttribute("content", description || defaultDesc);
+}, [defaultTitle, title, defaultDesc, description]);
+}
+
+export default usePageMeta

src/pages/thanku/Thanku.js

@@ -1,11 +1,13 @@
 import React from 'react'
+import usePageMeta from '../../hooks/usePageMeta';
 import "./Thanku.css";
 function Thanku() {
+usePageMeta("Thank you for shopping with us - Amazon Clone","");
     return (
         <div className="thanku">
             <h2>Thank You for shopping with us!</h2>
                <h2> We hope to see you back...</h2>
-
+               
         </div>
     )
 }