created cart component

Author: karol-janik

src/App.styles.ts

@@ -1,3 +1,13 @@
 import styled from 'styled-components';
+import IconButton from '@material-ui/core/IconButton';
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+  margin: 40px;
+`;
+
+export const StyledButton = styled(IconButton)`
+  position: fixed;
+  z-index: 100;
+  right: 20px;
+  top: 20px;
+`;

src/App.tsx

@@ -2,13 +2,15 @@ import { useState } from 'react';
 import { useQuery } from 'react-query';
 // Components
 import Item from './Item/Item';
+import Cart from './Cart/Cart';
 import Drawer from '@material-ui/core/Drawer';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Grid from '@material-ui/core/Grid';
 import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
 import Badge from '@material-ui/core/Badge';
 // styles
-import { Wrapper } from './App.styles';
+import { Wrapper, StyledButton } from './App.styles';
+
 // Types
 export type CartItemType = {
   id: number;
@@ -17,20 +19,24 @@ export type CartItemType = {
   image: string;
   price: number;
   tittle: string;
-  ammount: number;
+  amount: number;
 };
 
 const getProducts = async (): Promise<CartItemType[]> =>
   await (await fetch('https://fakestoreapi.com/products')).json();
 
 const App = () => {
+  const [cartOpen, setCartOpen] = useState(false);
+  const [cartItems, setCartItems] = useState([] as CartItemType[]);
+
   const { data, isLoading, error } = useQuery<CartItemType[]>(
     'products',
     getProducts
   );
   console.log(data);
 
-  const getTotalItems = () => null;
+  const getTotalItems = (items: CartItemType[]) =>
+    items.reduce((ack: number, item) => ack + item.amount, 0);
 
   const handleAddToCart = (clickedItem: CartItemType) => null;
 
@@ -41,6 +47,18 @@ const App = () => {
 
   return (
     <Wrapper>
+      <Drawer anchor='right' open={cartOpen} onClose={() => setCartOpen(false)}>
+        <Cart
+          cartItems={cartItems}
+          addToCart={handleAddToCart}
+          removeFromCart={handleRemvoeFromCart}
+        />
+      </Drawer>
+      <StyledButton onClick={() => setCartOpen(true)}>
+        <Badge badgeContent={getTotalItems(cartItems)} color='error'>
+          <AddShoppingCartIcon />
+        </Badge>
+      </StyledButton>
       <Grid container spacing={3}>
         {data?.map((item) => (
           <Grid item key={item.id} xs={12} sm={4}>

src/Cart/Cart.styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.aside`
+  width: 500px;
+  padding: 20px;
+`;

src/Cart/Cart.tsx

@@ -0,0 +1,25 @@
+import CartItem from '../CartItem/CartItem';
+//Styles
+import { Wrapper } from './Cart.styles';
+// Types
+import { CartItemType } from '../App';
+
+type Props = {
+  cartItems: CartItemType[];
+  addToCart: (clickedItem: CartItemType) => void;
+  removeFromCart: (id: number) => void;
+};
+
+const Cart: React.FC<Props> = ({ cartItems, addToCart, removeFromCart }) => {
+  return (
+    <Wrapper>
+      <h2>Your Shopping Cart</h2>
+      {cartItems.length === 0 ? <p>No items in cart.</p> : null}
+      {cartItems.map((item) => (
+        <CartItem />
+      ))}
+    </Wrapper>
+  );
+};
+
+export default Cart;

src/CartItem/CartItem.styles.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div``;

src/CartItem/CartItem.tsx

@@ -0,0 +1,9 @@
+import Button from '@material-ui/core/Button';
+// types
+import { CartItemType } from '../App';
+// Styles
+import { Wrapper } from './CartItem.styles';
+
+const CartItem: React.FC = () => <div>Cart item</div>;
+
+export default CartItem;

tsconfig.json

@@ -16,5 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["./**/*"]
 }