├── src ├── App.css ├── More.css ├── images │ ├── patment_.png │ ├── stripe.png │ ├── unlock.png │ ├── payment.svg │ └── welcome.svg ├── axios.js ├── SvgCheck.js ├── OrderItems.css ├── Orders.css ├── StateProvider.js ├── reportWebVitals.js ├── site.webmanifest ├── index.css ├── SignIn.css ├── index.js ├── Subtotal.css ├── Cart.css ├── Payment.css ├── FloatingSocialMedia.js ├── SocialMedia.js ├── TestCart.js ├── CartItems.css ├── Reducer.js ├── Orders.js ├── socialmedia.css ├── headerr.css ├── Cart.js ├── OrderItems.js ├── Subtotal.js ├── Firstwindow.js ├── Home.css ├── TestCart.css ├── CartItems.js ├── Product.js ├── Product.css ├── App.js ├── Footer.js ├── Footer.css ├── SignIn.js ├── Payment.js ├── Header.js ├── More.js └── Home.js ├── public ├── Components │ └── test.jsx ├── favicon.ico ├── BookieSS.jpeg ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── about.txt ├── manifest.json └── index.html ├── functions ├── .gitignore ├── ui-debug.log ├── .eslintrc.js ├── index.js └── package.json ├── ui-debug.log ├── .firebaserc ├── firebase.json ├── .gitignore ├── .github └── workflows │ ├── firebase-hosting-merge.yml │ └── firebase-hosting-pull-request.yml ├── LICENSE ├── package.json ├── README.md └── .firebase └── hosting.YnVpbGQ.cache /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/More.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/Components/test.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /ui-debug.log: -------------------------------------------------------------------------------- 1 | Web / API server started at http://localhost:4000 2 | -------------------------------------------------------------------------------- /functions/ui-debug.log: -------------------------------------------------------------------------------- 1 | Web / API server started at http://localhost:4000 2 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "clone-b8ccc" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/BookieSS.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/BookieSS.jpeg -------------------------------------------------------------------------------- /src/images/patment_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/src/images/patment_.png -------------------------------------------------------------------------------- /src/images/stripe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/src/images/stripe.png -------------------------------------------------------------------------------- /src/images/unlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/src/images/unlock.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PrateekSrivastava1/Bookies/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/axios.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const instance = axios.create({ 4 | baseURL: `https:${process.env.REACT_APP_BASE_URL}` 5 | }); 6 | export default instance; 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/SvgCheck.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Firstwindow from "./Firstwindow"; 3 | export default function SvgCheck() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /functions/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | es6: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | "eslint:recommended", 9 | "google", 10 | ], 11 | rules: { 12 | quotes: ["error", "double"], 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/OrderItems.css: -------------------------------------------------------------------------------- 1 | .orders { 2 | padding: 40px; 3 | margin: 20px; 4 | border: 1px solid lightgray; 5 | background-color: white; 6 | position: relative; 7 | } 8 | .orderId { 9 | position: absolute; 10 | top: 40px; 11 | right: 20px; 12 | } 13 | .orderTotal{ 14 | font-weight: 500; 15 | text-align: right; 16 | } -------------------------------------------------------------------------------- /src/Orders.css: -------------------------------------------------------------------------------- 1 | .orders_box{ 2 | margin-top: 60px; 3 | padding: 20px 80px; 4 | background-color: rgba(237, 239, 241, 0.534);; 5 | border-bottom: 1px solid lightgray; 6 | box-shadow: 0 4px 8px 0 rgba(84, 147, 184, 0.2), 7 | 0 6px 20px 0 rgba(84, 147, 184, 0.2); 8 | } 9 | .orders_box > h1{ 10 | margin: 30px 17px; 11 | /* text-decoration:underline; */ 12 | } -------------------------------------------------------------------------------- /src/StateProvider.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useReducer } from "react"; 2 | export const StateContext = createContext(); 3 | export const StateProvider = ({ reducer, initialState, children }) => ( 4 | 5 | {children} 6 | 7 | ); 8 | 9 | export const useStateValue = () => useContext(StateContext); -------------------------------------------------------------------------------- /public/about.txt: -------------------------------------------------------------------------------- 1 | This favicon was generated using the following graphics from Twitter Twemoji: 2 | 3 | - Graphics Title: 1f4da.svg 4 | - Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji) 5 | - Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f4da.svg 6 | - Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/) 7 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | }, 16 | "functions": { 17 | "predeploy": [ 18 | "npm --prefix \"%$RESOURCE_DIR%\" run lint" 19 | ], 20 | "source": "functions" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background-color: rgb(255, 255, 255); 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 9 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 10 | sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | code { 16 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 17 | monospace; 18 | } 19 | -------------------------------------------------------------------------------- /src/SignIn.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | .body{ 8 | padding-top: 100px; 9 | } 10 | .cont{ 11 | padding: 10px; 12 | border-radius: 15px; 13 | box-shadow: 0 4px 8px 0 rgba(84, 147, 184, 0.5), 14 | 0 6px 20px 0 rgba(84, 147, 184, 0.6); 15 | width: 100%; 16 | } 17 | .image{ 18 | /* width: 530px; */ 19 | width: 100%; 20 | object-fit: cover; 21 | } 22 | .row{ 23 | /* background: white; */ 24 | border-radius: 10px; 25 | } 26 | .btt{ 27 | margin-left: 10px; 28 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | #components 9 | src/Card.js 10 | src/Nav.css 11 | src/Nav.js 12 | src/card.css 13 | src/firebase.js 14 | 15 | # testing 16 | /coverage 17 | 18 | # production 19 | /build 20 | 21 | # misc 22 | .DS_Store 23 | .env.local 24 | .env.development.local 25 | .env.test.local 26 | .env.production.local 27 | .env 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /.github/workflows/firebase-hosting-merge.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on merge 5 | 'on': 6 | push: 7 | branches: 8 | - main 9 | jobs: 10 | build_and_deploy: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - run: npm run build 15 | - uses: FirebaseExtended/action-hosting-deploy@v0 16 | with: 17 | repoToken: '${{ secrets.GITHUB_TOKEN }}' 18 | firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CLONE_B8CCC }}' 19 | channelId: live 20 | projectId: clone-b8ccc 21 | -------------------------------------------------------------------------------- /.github/workflows/firebase-hosting-pull-request.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on PR 5 | 'on': pull_request 6 | jobs: 7 | build_and_preview: 8 | if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - run: npm run build 13 | - uses: FirebaseExtended/action-hosting-deploy@v0 14 | with: 15 | repoToken: '${{ secrets.GITHUB_TOKEN }}' 16 | firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CLONE_B8CCC }}' 17 | projectId: clone-b8ccc 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { StateProvider } from "./StateProvider"; 7 | import Reducer, {initialState} from "./Reducer"; 8 | import { loadStripe } from "@stripe/stripe-js"; 9 | import '@fortawesome/fontawesome-free/css/all.min.css'; 10 | import 'bootstrap-css-only/css/bootstrap.min.css'; 11 | import 'mdbreact/dist/css/mdb.css'; 12 | ReactDOM.render( 13 | 14 | 15 | 16 | 17 | 18 | , 19 | document.getElementById("root") 20 | ); 21 | 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /src/Subtotal.css: -------------------------------------------------------------------------------- 1 | .subtotal { 2 | display: flex; 3 | flex-direction: column; 4 | flex-wrap: wrap; 5 | /* align-items:flex-start ; */ 6 | align-items: center; 7 | justify-content: space-between; 8 | width: 300px; 9 | height: 100px; 10 | background-color: white; 11 | margin-top: 50px; 12 | border-radius: 3px; 13 | padding: 1px 0 10px 0; 14 | margin-bottom: 20x; 15 | } 16 | .subtotal > a button { 17 | background: rgba(255, 255, 255, 0); 18 | border-radius: 15px; 19 | height: 30px; 20 | /* padding-left: 10px; */ 21 | width: 100%; 22 | border: 1px rgb(28, 100, 209) solid; 23 | margin-top: 10px; 24 | color: black; 25 | } 26 | .subtotal > a > button:hover { 27 | background-color: rgb(28, 100, 209); 28 | cursor: pointer; 29 | color: white 30 | } -------------------------------------------------------------------------------- /functions/index.js: -------------------------------------------------------------------------------- 1 | const functions = require("firebase-functions"); 2 | const express = require("express"); 3 | const cors = require("cors"); 4 | const stripe = require("stripe")( 5 | "sk_test_51J2xnJSF9T1v6nUZ7gVuy3JqYPfwO1xBBLv4airaJOSazfAu3Zsyde2ad3xTO48mPlFAIjTkejeLXcHazMNWrqg300Yvi6JFua" 6 | ); 7 | 8 | const app = express(); 9 | app.use(cors({ origin: true })); 10 | app.use(express.json()); 11 | app.get("/", (req, res) => res.status(200).send("perfect")); 12 | 13 | app.post("/payments/create", async (req, res) => { 14 | const total = req.query.total; 15 | const paymentIntent = await stripe.paymentIntents.create({ 16 | amount: total, 17 | currency: "INR", 18 | }); 19 | res.status(201).send({ 20 | userSecret: paymentIntent.client_secret, 21 | }); 22 | }); 23 | 24 | exports.api = functions.https.onRequest(app); 25 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "description": "Cloud Functions for Firebase", 4 | "scripts": { 5 | "lint": "eslint .", 6 | "serve": "firebase emulators:start --only functions", 7 | "shell": "firebase functions:shell", 8 | "start": "npm run shell", 9 | "deploy": "firebase deploy --only functions", 10 | "logs": "firebase functions:log" 11 | }, 12 | "engines": { 13 | "node": "14" 14 | }, 15 | "main": "index.js", 16 | "dependencies": { 17 | "cors": "^2.8.5", 18 | "express": "^4.17.1", 19 | "firebase-admin": "^9.8.0", 20 | "firebase-functions": "^3.14.1", 21 | "stripe": "^8.154.0" 22 | }, 23 | "devDependencies": { 24 | "eslint": "^7.6.0", 25 | "eslint-config-google": "^0.14.0", 26 | "firebase-functions-test": "^0.2.0" 27 | }, 28 | "private": true 29 | } 30 | -------------------------------------------------------------------------------- /src/Cart.css: -------------------------------------------------------------------------------- 1 | 2 | .cartPage { 3 | padding: 30px; 4 | margin: 80px auto; 5 | box-sizing: border-box; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: space-between; 10 | /* background-color: #ff523b; */ 11 | } 12 | 13 | table { 14 | width: 100%; 15 | border-collapse: collapse; 16 | border-radius: 10px; 17 | } 18 | th { 19 | display: flex; 20 | flex-direction: column; 21 | width: 100%; 22 | text-align: left; 23 | padding-right: 10px; 24 | padding: 5px; 25 | color: #fff; 26 | background: #3b90ff; 27 | font-weight: normal; 28 | /* border-radius: 10px; */ 29 | /* border-top: 10px; */ 30 | } 31 | .totalPrice table{ 32 | /* border-top: 3px solid #3b90ff; */ 33 | width: 100%; 34 | max-width: 510px; 35 | } 36 | th:last-child { 37 | padding-right: 40px; 38 | text-align: right; 39 | } 40 | tr{ 41 | border-top-left-radius: 10px; 42 | } 43 | -------------------------------------------------------------------------------- /src/Payment.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .body { 7 | padding-top: 100px; 8 | } 9 | .cont { 10 | padding: 10px; 11 | border-radius: 15px; 12 | box-shadow: 0 4px 8px 0 rgba(84, 147, 184, 0.5), 13 | 0 6px 20px 0 rgba(84, 147, 184, 0.6); 14 | width: 100%; 15 | } 16 | .image { 17 | /* width: 530px; */ 18 | width: 100%; 19 | object-fit: cover; 20 | } 21 | .row { 22 | /* background: white; */ 23 | border-radius: 10px; 24 | } 25 | .bt { 26 | width: 100%; 27 | } 28 | @media screen and (max-width: 700px) { 29 | .mail { 30 | height: 25px; 31 | width: 150px; 32 | font-size: 1.2rem; 33 | overflow-x: scroll; 34 | margin-bottom: 15px; 35 | } 36 | .price { 37 | height: 25px; 38 | width: 300px; 39 | font-size: 1.2rem; 40 | overflow-y: scroll; 41 | /* padding-top: 25px; */ 42 | } 43 | .form-row{ 44 | padding: 5px; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/FloatingSocialMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./socialmedia.css"; 3 | function FloatingSocialMedia() { 4 | return ( 5 |
6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | ); 25 | } 26 | 27 | export default FloatingSocialMedia; 28 | -------------------------------------------------------------------------------- /src/SocialMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./socialmedia.css"; 3 | function SocialMedia() { 4 | return ( 5 |
6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | Let's Connect. 26 |
27 | ); 28 | } 29 | 30 | export default SocialMedia; 31 | -------------------------------------------------------------------------------- /src/TestCart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./TestCart.css"; 3 | import { useStateValue } from "./StateProvider"; 4 | function TestCart({ key, id, title, image, price, rating }) { 5 | 6 | const [{cart}, setCart] = useStateValue(); 7 | 8 | const deleteItem = () => { 9 | setCart({ 10 | type: "REMOVE_FROM_CART", 11 | id: id, 12 | }) 13 | } 14 | return ( 15 |
16 | 17 |
18 |

{title}

19 |

20 | ₹ 21 | {price} 22 |

23 |
24 | {Array(rating) 25 | .fill() 26 | .map((_, i) => ( 27 |

⭐

28 | ))} 29 |
30 | 31 |
32 |
33 | ); 34 | } 35 | 36 | export default TestCart; 37 | -------------------------------------------------------------------------------- /src/CartItems.css: -------------------------------------------------------------------------------- 1 | .cartItems { 2 | display: flex; 3 | margin-top: 20px; 4 | margin-left: 10px; 5 | margin-bottom: 20px; 6 | border-bottom: 1px solid lightgray; 7 | padding-bottom: 10px; 8 | } 9 | .cartProduct_description { 10 | padding-left: 20px; 11 | max-width: 500px; 12 | } 13 | .cartProduct_description > button { 14 | height: 30px; 15 | width: 200px; 16 | background-color: orange; 17 | border: 1px rgb(202, 152, 60) solid; 18 | margin-top: 10px; 19 | color: black; 20 | border-radius: 10px; 21 | } 22 | 23 | .cartProduct_description > button:hover { 24 | background-color: rgb(209, 146, 28); 25 | cursor: pointer; 26 | } 27 | 28 | .cartProduct_image { 29 | object-fit: contain; 30 | width: 180px; 31 | height: 180px; 32 | } 33 | .cartProduct_rating { 34 | display: flex; 35 | } 36 | .cartProduct_title { 37 | font-size: 17px; 38 | font-weight: 700; 39 | } 40 | @media screen and (max-width: 700px) { 41 | .cartProduct_title { 42 | font-size: 13px; 43 | } 44 | .cartProduct_description { 45 | font-size: 14px; 46 | } 47 | } 48 | .cartProduct_price { 49 | float: right; 50 | } 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Prateek Srivastava 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/Reducer.js: -------------------------------------------------------------------------------- 1 | import CartItems from "./CartItems"; 2 | 3 | export const initialState = { 4 | cart: [], 5 | user: null 6 | }; 7 | 8 | export const getTotalAmount = (cart) => 9 | cart?.reduce((amount, item) => item.price + amount, 0); 10 | 11 | const Reducer = (state, action) => { 12 | // console.log(action); 13 | switch (action.type) { 14 | case "ADD_TO_CART": 15 | return { 16 | ...state, 17 | cart: [...state.cart, action.item], 18 | }; 19 | case "REMOVE_FROM_CART": 20 | const i = state.cart.findIndex((CartItems) => CartItems.id === action.id); 21 | let newCart = [...state.cart]; 22 | if (i >= 0) { 23 | newCart.splice(i, 1); 24 | } else { 25 | console.warn(`Can't remove it, this item is not present in the cart`); 26 | } 27 | return { 28 | ...state, 29 | cart: newCart 30 | } 31 | case "SET_USER": 32 | return { 33 | ...state, 34 | user: action.user 35 | } 36 | case "EMPTY_CART": 37 | return{ 38 | ...state, 39 | cart: [] 40 | } 41 | default: 42 | return state; 43 | } 44 | }; 45 | 46 | export default Reducer; 47 | -------------------------------------------------------------------------------- /src/Orders.js: -------------------------------------------------------------------------------- 1 | import "./Orders.css"; 2 | import React from "react"; 3 | import { useState } from "react"; 4 | import { useEffect } from "react"; 5 | import { db } from "./firebase"; 6 | import Footer from "./Footer"; 7 | 8 | import { useStateValue } from "./StateProvider"; 9 | import OrderItems from "./OrderItems"; 10 | function Orders() { 11 | const [order, setOrder] = useState([]); 12 | const [{ cart, user }, setCart] = useStateValue(); 13 | useEffect(() => { 14 | if (user) { 15 | db.collection("Customer") 16 | .doc(user?.uid) 17 | .collection("orders") 18 | .orderBy("created", "desc") 19 | .onSnapshot((snapshot) => 20 | setOrder( 21 | snapshot.docs.map((doc) => ({ 22 | id: doc.id, 23 | data: doc.data(), 24 | })) 25 | ) 26 | ); 27 | } else { 28 | setOrder([]); 29 | } 30 | }, [user]); 31 | 32 | return ( 33 | <> 34 |
35 |

Your Orders:

36 |
37 | {order?.map((order) => ( 38 | 39 | ))} 40 |
41 |
42 |