diff --git a/src/App.js b/src/App.js index 21a028a..11711d6 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,7 @@ const stripePromise = loadStripe( ); function App() { //to keep a check who is signed in/making a listner - const [{ }, dispatch] = useStateValue(); + const [{}, dispatch] = useStateValue(); //This State will keep Track of what is entered in the searchField const [searchField, setSearchField] = useState(''); @@ -58,49 +58,87 @@ function App() { return ( <> -
- -
- - } /> - -
- {/* wraps the payment elements, + +
+ + + } + /> + +
+ {/* wraps the payment elements, no need to understand it */} - - - - } /> + + + + + } + /> } /> } /> - -
- } /> -
- - } /> - -
- - - } /> + +
+ + + } + /> + + {' '} +
+ + + + } + /> + +
+ + + + } + /> - -
- - - } /> + +
+ + + + } + /> - -
- - - - } /> + +
+ + + + + } + />
diff --git a/src/Categories/BooksToys/BookToys.js b/src/Categories/BooksToys/BookToys.js index 229cedb..9c00595 100644 --- a/src/Categories/BooksToys/BookToys.js +++ b/src/Categories/BooksToys/BookToys.js @@ -1,112 +1,133 @@ -import React from 'react' +import React from 'react'; import Product from '../../components/product/Product'; import { useStateValue } from '../../context/StateProvider'; import usePageMeta from '../../hooks/usePageMeta'; -import "./BookToys.css" - +import './BookToys.css'; function BookToys(id, title, price, image, rating, reviews) { - usePageMeta("Books and toys - Amazon Clone","Shop online buy toys, books") + 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', + title: + 'Storio Kids Toys LCD Writing Tablet 8.5Inch E-Note Pad Best Birthday Gift for Girls Boys', price: 225, - image:'https://m.media-amazon.com/images/I/61Pg1H7U15L._AC_UL480_FMwebp_QL65_.jpg', + image: + 'https://m.media-amazon.com/images/I/61Pg1H7U15L._AC_UL480_FMwebp_QL65_.jpg', rating: 4, reviews: 4534, }, { - title:'esnipe mart® 20 activities & games fun laptop notebook computer toy for kids-Blue', + title: + 'esnipe mart® 20 activities & games fun laptop notebook computer toy for kids-Blue', price: 1299, - image:'https://m.media-amazon.com/images/I/7188KDb7UYL._AC_UL480_FMwebp_QL65_.jpg', + image: + 'https://m.media-amazon.com/images/I/7188KDb7UYL._AC_UL480_FMwebp_QL65_.jpg', rating: 4, reviews: 9476, }, { - title:'ToyTastic Pack of 6 Mini Metal Car for Kids, Small Mini Racing Cars Suitable', + title: + 'ToyTastic Pack of 6 Mini Metal Car for Kids, Small Mini Racing Cars Suitable', price: 539, - image:'https://m.media-amazon.com/images/I/5105UNu17nL._AC_UL480_FMwebp_QL65_.jpg', + image: + 'https://m.media-amazon.com/images/I/5105UNu17nL._AC_UL480_FMwebp_QL65_.jpg', rating: 4, reviews: 323, }, { - title:"You Can", - price:98, - image:"https://m.media-amazon.com/images/I/813uPMOnskL._AC_UY327_FMwebp_QL65_.jpg", - rating:5, - reviews:1749, + title: 'You Can', + price: 98, + image: + 'https://m.media-amazon.com/images/I/813uPMOnskL._AC_UY327_FMwebp_QL65_.jpg', + rating: 5, + reviews: 1749, }, { - title:"Tales of Mystery and Horror for Kids : illustrated Abridged Children Classics English Novel with Rev", - price:149, - image:"https://m.media-amazon.com/images/I/81jJos1UCaL._AC_UY327_FMwebp_QL65_.jpg", - rating:4, - reviews:27, + title: + 'Tales of Mystery and Horror for Kids : illustrated Abridged Children Classics English Novel with Rev', + price: 149, + image: + 'https://m.media-amazon.com/images/I/81jJos1UCaL._AC_UY327_FMwebp_QL65_.jpg', + rating: 4, + reviews: 27, }, { - title:"Toyshine Foosball, Mini Football, 4 Rods, Indoor Sport Table Soccer Game for Adults and Kids", - price:1299, - image:"https://m.media-amazon.com/images/I/71TM-qejV3L._AC_UL480_FMwebp_QL65_.jpg", - rating:4, - reviews:2234, - + title: + 'Toyshine Foosball, Mini Football, 4 Rods, Indoor Sport Table Soccer Game for Adults and Kids', + price: 1299, + image: + 'https://m.media-amazon.com/images/I/71TM-qejV3L._AC_UL480_FMwebp_QL65_.jpg', + rating: 4, + reviews: 2234, }, { - title:"The Jungle Book: Illustrated Abridged Children Classics English Novel With Review Questions (Hardback)", - price:165, - image:"https://m.media-amazon.com/images/I/81I6v6bGt1L._AC_UY327_FMwebp_QL65_.jpg", - rating:5, - reviews:96, + title: + 'The Jungle Book: Illustrated Abridged Children Classics English Novel With Review Questions (Hardback)', + price: 165, + image: + 'https://m.media-amazon.com/images/I/81I6v6bGt1L._AC_UY327_FMwebp_QL65_.jpg', + rating: 5, + reviews: 96, }, { - title:"The Adventures of Robin Hood: Illustrated Abridged Children Classics English Novel With Review Questions (Hardback)", - price:148, - image:"https://m.media-amazon.com/images/I/812IvcFEroL._AC_UY327_QL65_.jpg", - rating:5, - reviews:61, + title: + 'The Adventures of Robin Hood: Illustrated Abridged Children Classics English Novel With Review Questions (Hardback)', + price: 148, + image: + 'https://m.media-amazon.com/images/I/812IvcFEroL._AC_UY327_QL65_.jpg', + rating: 5, + reviews: 61, }, { - title:"DO EPIC SHIT", - price:163, - image:"https://m.media-amazon.com/images/I/61kRkfsIMUL._AC_UY327_FMwebp_QL65_.jpg", - rating:5, - reviews:6914 , + title: 'DO EPIC SHIT', + price: 163, + image: + 'https://m.media-amazon.com/images/I/61kRkfsIMUL._AC_UY327_FMwebp_QL65_.jpg', + rating: 5, + reviews: 6914, }, { - title:"Jaspo Power Kids 26 inches Skateboard for Beginners Boys & Girls", - price:962, - image:"https://m.media-amazon.com/images/I/81ogbrdtaQL._AC_UL480_QL65_.jpg", - rating:4, - reviews:635, + title: 'Jaspo Power Kids 26 inches Skateboard for Beginners Boys & Girls', + price: 962, + image: + 'https://m.media-amazon.com/images/I/81ogbrdtaQL._AC_UL480_QL65_.jpg', + rating: 4, + reviews: 635, }, { - title:"Noise Pulse Go Buzz Smart Watch with Smart Call & Advanced Bluetooth Tech", - price:128, - image:"https://m.media-amazon.com/images/I/51uB7i1cw+L._AC_UL480_QL65_.jpg", - rating:5, - reviews:8266, + title: + 'Noise Pulse Go Buzz Smart Watch with Smart Call & Advanced Bluetooth Tech', + price: 128, + image: + 'https://m.media-amazon.com/images/I/51uB7i1cw+L._AC_UL480_QL65_.jpg', + rating: 5, + reviews: 8266, }, { - title:"Do Epic Shit + The Subtle Art of Not Giving a Fuck Set of 2 Books with free Customize Bookmark", - price:265, - image:"https://m.media-amazon.com/images/I/61U9xUcZy3L._AC_UY327_FMwebp_QL65_.jpg", - rating:5, - reviews:18, + title: + 'Do Epic Shit + The Subtle Art of Not Giving a Fuck Set of 2 Books with free Customize Bookmark', + price: 265, + image: + 'https://m.media-amazon.com/images/I/61U9xUcZy3L._AC_UY327_FMwebp_QL65_.jpg', + rating: 5, + reviews: 18, }, { - title:"Toyshine Wooden Memory Match Stick Chess Game Set, Funny Block Board Game Parent-Child Interaction", - price:579, - image:"https://m.media-amazon.com/images/I/41PECrMEhOL._AC_UL480_QL65_.jpg", - rating:4, - review:92, - } + title: + 'Toyshine Wooden Memory Match Stick Chess Game Set, Funny Block Board Game Parent-Child Interaction', + price: 579, + image: + 'https://m.media-amazon.com/images/I/41PECrMEhOL._AC_UL480_QL65_.jpg', + rating: 4, + review: 92, + }, ]; - const [state, dispatch] = useStateValue() + const [state, dispatch] = useStateValue(); const addToBasket = () => { //dispatch the item into the data layer dispatch({ - type: "ADD_TO_BASKET", + type: 'ADD_TO_BASKET', item: { id: id, title: title, @@ -119,22 +140,24 @@ function BookToys(id, title, price, image, rating, reviews) { }; return ( <> -

Books & Toys

- -
- {products.map((product,index) => { +

Books & Toys

+ +
+ {products.map((product, index) => { return ( - - ) - }) } + + ); + })}
- ) + ); } -export default BookToys \ No newline at end of file +export default BookToys; diff --git a/src/components/footer/Footer.js b/src/components/footer/Footer.js index 29a8e35..ce1c2ac 100644 --- a/src/components/footer/Footer.js +++ b/src/components/footer/Footer.js @@ -1,5 +1,5 @@ -import React from 'react' -import "./footer.css" +import React from 'react'; +import './footer.css'; import { useState } from 'react'; // import Divider from '@material-ui/core/Divider'; @@ -8,25 +8,23 @@ import amnLogo from '../../assets/amazon-logo.png'; import logo from './amazon-logo.png'; function Footer() { - - const d = new Date() + const d = new Date(); let year = d.getFullYear(); //back to top--> - const [visible, setVisible] = useState(false) + const [visible, setVisible] = useState(false); const toggleVisible = () => { const scrolled = document.documentElement.scrollTop; if (scrolled > 300) { - setVisible(true) - } - else if (scrolled <= 300) { - setVisible(false) + setVisible(true); + } else if (scrolled <= 300) { + setVisible(false); } }; const scrollToTop = () => { window.scrollTo({ top: 0, - behavior: 'smooth' + behavior: 'smooth', }); }; window.addEventListener('scroll', toggleVisible); @@ -61,9 +59,7 @@ function Footer() {
-
- Contact Us -
+
Contact Us
-
-
+
- logo -
-
- +
+
  • Australia
  • Brazil
  • Canada
    • @@ -154,16 +147,19 @@ function Footer() {
  • United Arab Emirates
  • United Kingdoms
  • United States
    • -
      -
    • logo
      • -
    • English
      • +
    • + logo +
      • +
    • + English +
    -
    +
    • Australia
    • Brazil
      • @@ -183,10 +179,9 @@ function Footer() {
    • United Kingdom
    • United States
    -
    -
    + -
    +
    © 1996-{year}, Amazon.com, Inc. or its affiliates
    -
    - - ) + ); } -export default Footer +export default Footer; diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index 7ab184b..abdcba4 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -1,91 +1,130 @@ -import React,{useState} from 'react' -import "./Login.css" -import {Link,useNavigate} from "react-router-dom"; -import {auth} from "../../firebase"; +import React, { useState } from 'react'; +import './Login.css'; +import { Link, useNavigate } from 'react-router-dom'; +import { auth } from '../../firebase'; function Login() { - const anchLink=`https://amazon.in/gp/help/customer/display.html/ref=ap_signin_notification_condition_of_use?ie=UTF8&nodeId=200545940`; - const navigate=useNavigate(); - const[email,setEmail]=useState(''); - const[password,setPassword]=useState(''); + const anchLink = `https://amazon.in/gp/help/customer/display.html/ref=ap_signin_notification_condition_of_use?ie=UTF8&nodeId=200545940`; + const navigate = useNavigate(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); - const register=e=>{ - e.preventDefault(); - //doing firebase stuff - auth.createUserWithEmailAndPassword(email,password) - .then((auth)=>{ - console.log(auth); - {/*if we get the authentication right then - we will redirect to the homepage*/} - - if(auth){ - navigate("/")} - }) - .catch(error=>alert(error.message)) - } + const register = (e) => { + e.preventDefault(); + //doing firebase stuff + auth + .createUserWithEmailAndPassword(email, password) + .then((auth) => { + console.log(auth); + { + /*if we get the authentication right then + we will redirect to the homepage*/ + } - const changePage = e=>{ - e.preventDefault(); - document.getElementById("mailText").style.display = "none"; - document.getElementById("mailBox").style.display = "none"; - document.getElementById("Continuebutton").style.display ="none"; - document.getElementById("pswdBox").style.display = "block"; - document.getElementById("pswdText").style.display = "block"; - document.getElementById("signInbutton").style.display = "block"; - } + if (auth) { + navigate('/'); + } + }) + .catch((error) => alert(error.message)); + }; - const signIn=e=>{ - //for preventing the page to refresh - e.preventDefault(); - //Some firebase login - console.log(email,password); - auth.signInWithEmailAndPassword(email,password) - .then((auth)=>{ - console.log(auth); - if(auth){ - navigate("/") - } - }) - .catch(error=>alert(error.message)) - - } - return ( -
    - - Login - -
    -

    Sign in

    -
    -
    Email
    -
    Password
    - setEmail(e.target.value)} style={{background:"white"}}/> - setPassword(e.target.value)} style={{display:"none"}} id="pswdBox" className="input_box"/> - - + const changePage = (e) => { + e.preventDefault(); + document.getElementById('mailText').style.display = 'none'; + document.getElementById('mailBox').style.display = 'none'; + document.getElementById('Continuebutton').style.display = 'none'; + document.getElementById('pswdBox').style.display = 'block'; + document.getElementById('pswdText').style.display = 'block'; + document.getElementById('signInbutton').style.display = 'block'; + }; - {/*here we are getting a track of what are we typing in those boxes*/} + const signIn = (e) => { + //for preventing the page to refresh + e.preventDefault(); + //Some firebase login + console.log(email, password); + auth + .signInWithEmailAndPassword(email, password) + .then((auth) => { + console.log(auth); + if (auth) { + navigate('/'); + } + }) + .catch((error) => alert(error.message)); + }; + return ( +
    + + Login + +
    +

    Sign in

    + +
    + Email +
    +
    + Password +
    + setEmail(e.target.value)} + style={{ background: 'white' }} + /> + setPassword(e.target.value)} + style={{ display: 'none' }} + id="pswdBox" + className="input_box" + /> + + - {/*
    Password
    + {/*here we are getting a track of what are we typing in those boxes*/} + + {/*
    Password
    setPassword(e.target.value)}/> */} - -

    - By continuing, you agree to Amazon's - - Conditions of Use and Privacy Notice. -

    -

    - Need help? -

    - - -
    -

    - - - -
    - ) + +

    + By continuing, you agree to Amazon's + Conditions of Use and{' '} + Privacy Notice.

    +

    + Need help? +

    +
    +

    + + + +
    + ); } -export default Login \ No newline at end of file +export default Login; diff --git a/src/pages/signup/Signup.js b/src/pages/signup/Signup.js index 3dc06d3..873ce38 100644 --- a/src/pages/signup/Signup.js +++ b/src/pages/signup/Signup.js @@ -1,100 +1,150 @@ -import React,{useState} from 'react' -import "./Signup.css" -import {Link, useNavigate} from "react-router-dom"; -import {auth} from "../../firebase"; +import React, { useState } from 'react'; +import './Signup.css'; +import { Link, useNavigate } from 'react-router-dom'; +import { auth } from '../../firebase'; function Signup() { - const anchLink=`https://amazon.in/gp/help/customer/display.html/ref=ap_signin_notification_condition_of_use?ie=UTF8&nodeId=200545940`; - const navigate=useNavigate(); - const [name,setName]=useState('') - const[email,setEmail]=useState(''); - const[password,setPassword]=useState(''); - const [reenterPassword,setReenderPassword]=useState(''); + const anchLink = `https://amazon.in/gp/help/customer/display.html/ref=ap_signin_notification_condition_of_use?ie=UTF8&nodeId=200545940`; + const navigate = useNavigate(); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [reenterPassword, setReenderPassword] = useState(''); - const register=e=>{ - e.preventDefault(); - //doing firebase stuff - // auth.createUserWithEmailAndPassword(email,password) - // .then((auth)=>{ - // console.log(auth); - // {/*if we get the authentication right then - // we will redirect to the homepage*/} - - // if(auth){ - // history.push("/")} - // }) - // .catch(error=>alert(error.message)) - } + const register = (e) => { + e.preventDefault(); + //doing firebase stuff + // auth.createUserWithEmailAndPassword(email,password) + // .then((auth)=>{ + // console.log(auth); + // {/*if we get the authentication right then + // we will redirect to the homepage*/} - const changePage = e=>{ - e.preventDefault(); - document.getElementById("mailText").style.display = "none"; - document.getElementById("mailBox").style.display = "none"; - document.getElementById("Continuebutton").style.display ="none"; - document.getElementById("pswdBox").style.display = "block"; - document.getElementById("pswdText").style.display = "block"; - document.getElementById("signInbutton").style.display = "block"; - } + // if(auth){ + // history.push("/")} + // }) + // .catch(error=>alert(error.message)) + }; - const signIn=e=>{ - //for preventing the page to refresh - e.preventDefault(); - //Some firebase login - console.log(email,password); - auth.signInWithEmailAndPassword(email,password) - .then((auth)=>{ - console.log(auth); - if(auth){ - navigate("/") - } - }) - .catch(error=>alert(error.message)) - - } - return ( -
    - - Signup - -
    -

    Create account

    -
    -
    Your Name
    - setName(e.target.value)} style={{background:"white"}} placeholder="First and Last Name"/> + const changePage = (e) => { + e.preventDefault(); + document.getElementById('mailText').style.display = 'none'; + document.getElementById('mailBox').style.display = 'none'; + document.getElementById('Continuebutton').style.display = 'none'; + document.getElementById('pswdBox').style.display = 'block'; + document.getElementById('pswdText').style.display = 'block'; + document.getElementById('signInbutton').style.display = 'block'; + }; -
    Mobile number or email
    - setEmail(e.target.value)} style={{background:"white"}}/> - -
    Password
    - setPassword(e.target.value)} style={{background:"white"}} placeholder="At least 6 characters"/> -

    iPasswords must be at least 6 characters.

    + const signIn = (e) => { + //for preventing the page to refresh + e.preventDefault(); + //Some firebase login + console.log(email, password); + auth + .signInWithEmailAndPassword(email, password) + .then((auth) => { + console.log(auth); + if (auth) { + navigate('/'); + } + }) + .catch((error) => alert(error.message)); + }; + return ( +
    + + Signup + +
    +

    Create account

    + +
    + Your Name +
    + setName(e.target.value)} + style={{ background: 'white' }} + placeholder="First and Last Name" + /> -
    Re-enter password
    - setReenderPassword(e.target.value)} style={{background:"white"}}/> +
    + Mobile number or email +
    + setEmail(e.target.value)} + style={{ background: 'white' }} + /> - - - - +
    + Password +
    + setPassword(e.target.value)} + style={{ background: 'white' }} + placeholder="At least 6 characters" + /> +

    + iPasswords must be at least 6 characters. +

    - -

    - By creating an account, you agree to Amazon's - - Conditions of Use and Privacy Notice. -

    -

    -

    -

    +
    + Re-enter password +
    + setReenderPassword(e.target.value)} + style={{ background: 'white' }} + /> -

    - By creating an account or logging in, you agree to Amazon’s Conditions of Use and Privacy Policy. -

    - -
    -

    + + + + + +

    + By creating an account, you agree to Amazon's + Conditions of Use and{' '} + Privacy Notice.

    +

    +

    +

    -
    - ) +

    + By creating an account or logging in, you agree to Amazon’s{' '} + Conditions of Use and{' '} + Privacy Policy. +

    +
    +

    +
    + ); } -export default Signup \ No newline at end of file +export default Signup; diff --git a/src/reducer/reducer.js b/src/reducer/reducer.js index 6e9e580..da873b4 100644 --- a/src/reducer/reducer.js +++ b/src/reducer/reducer.js @@ -1,64 +1,55 @@ - export const initialState={ - basket:[], - user:null, - }; +export const initialState = { + basket: [], + user: null, +}; - //Selector - //For the summing up the total price - export const getBasketTotal=(basket)=> - - basket?.reduce((amount,item)=> - item.price+amount,0); - - -//This is we are pushing the items in the basket(data layer) - const reducer=(state,action)=>{ - console.log(action); - switch(action.type){ - case 'ADD_TO_BASKET': - return { - ...state, - basket:[...state.basket,action.item], - }; - - case "REMOVE_FROM_BASKET": - const index=state.basket.findIndex( - (basketItem)=> basketItem.id===action.id - ); - let newBasket=[...state.basket]; - if(index>=0){ - newBasket.splice(index,1); - - } - else{ - console.warn( - 'Cant remove product (id: ${action.id}) as its not in basket!' - ) - } - return{ - ...state, - basket:newBasket - } - - - +//Selector +//For the summing up the total price +export const getBasketTotal = (basket) => + basket?.reduce((amount, item) => item.price + amount, 0); - case 'SET_USER': - return{ - ...state, - user:action.user - } - - case 'EMPTY_BASKET': - return { - ...state, - basket:[] - } - - default: - return state; +//This is we are pushing the items in the basket(data layer) +const reducer = (state, action) => { + console.log(action); + switch (action.type) { + case 'ADD_TO_BASKET': + return { + ...state, + basket: [...state.basket, action.item], + }; + + case 'REMOVE_FROM_BASKET': + const index = state.basket.findIndex( + (basketItem) => basketItem.id === action.id + ); + let newBasket = [...state.basket]; + if (index >= 0) { + newBasket.splice(index, 1); + } else { + console.warn( + 'Cant remove product (id: ${action.id}) as its not in basket!' + ); } - - }; - - export default reducer; \ No newline at end of file + return { + ...state, + basket: newBasket, + }; + + case 'SET_USER': + return { + ...state, + user: action.user, + }; + + case 'EMPTY_BASKET': + return { + ...state, + basket: [], + }; + + default: + return state; + } +}; + +export default reducer;