React Typescript Advanced Starter

Cart.tsx

// Cart.tsx
import React from 'react';
import { CartDataItem } from '../models/CartItem';

import CartList from './CartList';
import CartSummary from './CartSummary';

interface CartProps {
}

interface CartState {
    items: CartDataItem[];
    amount: number;
    count: number;
    flag: boolean;
}

class Cart extends React.Component<CartProps, CartState> {
    constructor(props: CartProps) {
        super(props);

        // initialize state 
        this.state = {
            items: [  new CartDataItem(1, "P1", 100, 1) ],
            amount: 0,
            count: 0,
            flag: true
        }
    }

    addItem = () => {
        const id = Math.ceil(Math.random() * 100000);

        const item = new CartDataItem(id, 
                                  `Product ${id}`,
                                  Math.ceil(Math.random() * 100),
                                  1
                                  );

        //TODO
         
        // calculate the result
    }

    removeItem = (id: number) => {
        


        // TODO calculate the result
    }

    updateItem = (id: number, qty: number) => {
        //TODO
         
    }

    empty = () => {
        //TODO
         
    }

    setFlag = () => {
        this.setState({
            flag: true
        })
    }
 
 

    render() {
        console.log('Cart Render');

        return (
            <div>
                <h2>Cart</h2>

              
                <button onClick={this.addItem}>
                    Add Item
                </button>

                <button onClick={this.empty}>
                    Empty Cart
                </button>


                <button onClick={this.setFlag}>
                    set Flag
                </button>



                <CartList items={this.state.items}
                              
                />

                <CartSummary amount={this.state.amount}
                             count={this.state.count} />
            </div>
        )
    }
}

export default Cart;

CartDataItem.ts

// CartDataItem.ts
 
export class CartDataItem {
    
    constructor(public id: number,
                public name: string, 
                public price: number, 
                public qty: number) {
                    
    }
}

CartItem.tsx

// CartItem.tsx
import React from 'react';
import { CartDataItem  } from '../models/CartItem';

interface CartItemProps {
    item: CartDataItem;
    removeItem: Function;
    updateItem: Function;
}

interface CartItemState {
}

class CartItem extends React.Component<CartItemProps, CartItemState> {
    constructor(props: CartItemProps) {
        super(props);
    }

    incrementQty = () => {
        //this.props.updateItem(this.props.item.id, this.props.item.qty + 1);
        const {id, qty} = this.props.item;
        this.props.updateItem(id,  qty + 1);
    }

    decrementQty = () => {
        //this.props.updateItem(this.props.item.id, this.props.item.qty + 1);
        const {id, qty} = this.props.item;
        this.props.updateItem(id,  qty - 1);
    }

 

    render() {
        // deconstruct
        const {item, 
                updateItem,
               removeItem } = this.props;

        console.log('CartItem Render ', item.id);
        return (
            <tr>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td>{item.qty}</td>

                <td>
                        <button onClick={ () => {} }>
                            X
                        </button> 

                        <button onClick={this.decrementQty}>
                            -1
                        </button> 

                        <button onClick={this.incrementQty}>
                            +1
                        </button> 
                    </td> 
            </tr>
        )
    }
}

export default CartItem;

CartList.tsx

// CartList.tsx

import React from 'react';
import {CartDataItem}  from '../models/CartItem';

import CartItemComp from './CartItem';

interface CartListProps {
    items: CartDataItem[],
    removeItem: Function,
    updateItem: Function
}

interface CartListState {
}

class CartList extends React.Component<CartListProps> {
    constructor(props: CartListProps) {
        super(props);
    }
 
    render() {
        console.log('CartList render');

        const {items, 
                updateItem,
                removeItem } = this.props;

        return (
            <div>
                <h2> Cart List </h2>
                {/* todo */}
                <table>
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Qty</th>
                        <th>Ops</th>
                    </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
        )
    }
}

export default CartList;

CartSummary.tsx

// CartSummary.tsx
import React from 'react';

// from parent
interface CartSummaryProps {
    amount: number;
    count: number;
}

// state, local
interface CartSummaryState {
    discount: number;
    grandTotal: number;
}

// PureComponent inheriting from Component
// PureComponent implements shouldComponentUpdate
//   it compares nextProps with currentProps
//   it compare nextState with currentState


class CartSummary extends React.Component<CartSummaryProps, CartSummaryState> {
    constructor(props: CartSummaryProps) {
        super(props);
        this.state = {
            // to be computed
            discount: 0,
            grandTotal: 0
        }
    }

   

    render() {
        console.log('CartSummary render');
        return (
            <div>
                <h2>Cart Summary</h2>
                <p> Amount : {this.props.amount} </p>
                <p> Count : {this.props.count} </p>
                <p> Discount : {this.state.discount} </p>
                <p> grandTotal : {this.state.grandTotal} </p>
            </div>
        )
    }
}

export default CartSummary;