Feature/qr

package.json

@@ -18,6 +18,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.2.0",
+    "react-qr-reader": "^2.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "recoil": "^0.1.2",
@@ -52,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-qr-reader": "^2.1.3",
     "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.7",
     "eslint": "^7.19.0",

src/pages/Cart/QrScanner.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import QrReader from "react-qr-reader";
+import { useEnablePurchase } from "state/cart";
+
+const QrScanner = () => {
+  const enablePurchase = useEnablePurchase();
+  const [isScanning, setIsScanning] = useState(false);
+
+  // TODO Handle error
+  const handleError = (error: any) => {
+    console.log(error);
+  };
+
+  const handleScan = (data: string | null) => {
+    if (data) {
+      setIsScanning(false);
+      enablePurchase();
+    }
+  };
+
+  if (isScanning)
+    return (
+      <QrReader
+        delay={300}
+        onError={handleError}
+        onScan={handleScan}
+        style={{ width: "100%" }}
+      />
+    );
+
+  return <button onClick={() => setIsScanning(true)}>Scan QR</button>;
+};
+
+export default QrScanner;

src/pages/Cart/index.tsx

@@ -0,0 +1,28 @@
+import BottomNavigationBar from "components/BottomNavigationBar";
+import { useRecoilState } from "recoil";
+import cartState from "state/cart";
+import QRScanner from "./QrScanner";
+
+type PurchaseButtonProps = {
+  isConfirmed: boolean;
+};
+
+const PurchaseButton = (props: PurchaseButtonProps) => {
+  if (props.isConfirmed) {
+    return <button>Purchase</button>;
+  }
+  return <QRScanner />;
+};
+
+const Cart = () => {
+  const [cart] = useRecoilState(cartState);
+  return (
+    <div>
+      <p>Cart</p>
+      <PurchaseButton isConfirmed={cart.cartConfirmed} />
+      <BottomNavigationBar />
+    </div>
+  );
+};
+
+export default Cart;

src/pages/Products/Product.tsx

@@ -1,7 +1,5 @@
 import { IMAGE_URI } from "api";
-import React from "react";
-import { useRecoilState } from "recoil";
-import cartState, { addCartItem } from "state/cart";
+import { useAddCartItem } from "state/cart";
 import styled from "styled-components";
 import { Product as ProductType } from "types/inventory";
 
@@ -35,18 +33,20 @@ const Description = styled.p`
   text-align: left;
   font-weight: 200;
 `;
+
 type Props = {
   product: ProductType;
 };
+
 export const Product = (props: Props) => {
-  const [cart, setCart] = useRecoilState(cartState);
+  const addCartItem = useAddCartItem();
   const { product } = props;
   const imageSrc = product.image
     ? IMAGE_URI(product.image.sm)
     : `${process.env.PUBLIC_URL}/images/noImage.png`;
   const cartItem = { name: product.name, price: product.price, quantity: 1 };
   return (
-    <Wrapper onClick={() => setCart(addCartItem(cart, cartItem))}>
+    <Wrapper onClick={() => addCartItem(cartItem)}>
       <Image src={imageSrc}></Image>
       <TextWrapper>
         <Name>{product.name}</Name>

src/pages/Products/index.tsx

@@ -15,6 +15,7 @@ const Wrapper = styled.div`
 
 const Products = () => {
   const [inventory] = useRecoilState(inventoryState);
+  if (!inventory) return null;
   return (
     <div>
       <Wrapper>

src/state/cart.tsx

@@ -2,30 +2,57 @@ import { atom, useRecoilState } from "recoil";
 
 type CartItem = { name: string; price: number; quantity: number };
 
-const cartState = atom<CartItem[]>({
+interface CartState {
+  items: CartItem[];
+  cartConfirmed: boolean;
+}
+
+const initialState: CartState = {
+  items: [],
+  cartConfirmed: false,
+};
+
+const cartState = atom<CartState>({
   key: "cart",
-  default: [],
+  default: initialState,
 });
 
 export const useGetCartTotal = () => {
   const [cart] = useRecoilState(cartState);
-  return cart.reduce(
+  return cart.items.reduce(
     (previousValue, currentValue) =>
       previousValue + currentValue.price * currentValue.quantity,
     0
   );
 };
 
-export const addCartItem = (cart: CartItem[], cartItem: CartItem) => {
-  const cartItemIndex = cart.findIndex((item) => item.name === cartItem.name);
+export const useAddCartItem = () => {
+  const [cart, setCart] = useRecoilState(cartState);
+  const addItemAndResetConfirmation = (cartItem: CartItem) => {
+    const newCartItems = addCartItem(cart.items, cartItem);
+    setCart({ ...cart, items: newCartItems, cartConfirmed: false });
+  };
+  return addItemAndResetConfirmation;
+};
+
+export const useEnablePurchase = () => {
+  const [cart, setCart] = useRecoilState(cartState);
+  const enablePurchase = () => setCart({ ...cart, cartConfirmed: true });
+  return enablePurchase;
+};
+
+const addCartItem = (cartItems: CartItem[], cartItem: CartItem) => {
+  const cartItemIndex = cartItems.findIndex(
+    (item) => item.name === cartItem.name
+  );
   if (cartItemIndex === -1) {
-    return [...cart, cartItem];
+    return [...cartItems, cartItem];
   }
   const mutatedCartItem = {
     ...cartItem,
-    quantity: cart[cartItemIndex].quantity + 1,
+    quantity: cartItems[cartItemIndex].quantity + 1,
   };
-  const filteredCart = cart.filter((item) => item.name !== cartItem.name);
+  const filteredCart = cartItems.filter((item) => item.name !== cartItem.name);
   return [...filteredCart, mutatedCartItem];
 };
 

src/types/inventory.ts

@@ -11,6 +11,7 @@ export type Product = {
     name: string;
   };
 };
+
 export type CartItem = {
   object_id: number;
   quantity: number;