files

import Phone from "../../images/smartphone.jpg";

const initState = {
items: [
{ id: 1, src: "smartphone.jpg", name: "ONEPLUS", price: 30000, color: "Nebula Blue", RAM: "8GB", Storage: "128GB" },
{ id: 2, src: "smartphone.jpg", name: "SAMSUNG", price: 23000, color: "Glacier Blue", RAM: "8GB", Storage: "128GB" },
{ id: 3, src: "smartphone.jpg", name: "MI A7", price: 19000, color: "Frosted Silver", RAM: "6GB", Storage: "64GB" },
{ id: 4, src: "smartphone.jpg", name: "REAL ME", price: 20000, color: "Nebula Blue", RAM: "12GB", Storage: "32GB" },
{ id: 5, src: "smartphone.jpg", name: "MOTO", price: 23000, color: "Glacier Blue", RAM: "4GB", Storage: "32GB" },
{ id: 6, src: "smartphone.jpg", name: "VIVO", price: 19000, color: "Frosted Silver", RAM: "6GB", Storage: "64GB" },
{ id: 7, src: "smartphone.jpg", name: "OPPO", price: 20000, color: "Glacier Blue", RAM: "8GB", Storage: "128GB" },
{ id: 8, src: "smartphone.jpg", name: "REDMI", price: 20000, color: "Nebula Blue", RAM: "4GB", Storage: "64GB" }
],
addedItems: [],
total: 0,
shippingPrice: 0,
myOrder: [],
view: [],
Amount: 0,
price: 0
};

const cartReducer = (state = initState, action) => {
switch (action.type) {
case "on_Op1":
return { ...state, shippingPrice: 50 };
case "on_Op2":
return { ...state, shippingPrice: 100 };
case "on_Add_To_Cart": {
const product =
(state.view && state.view.find(item => item.id === action.id)) ||
state.items.find(item => item.id === action.id);
const existed_item = state.addedItems.find(item => item.id === action.id);
if (existed_item) {
const updatedItems = state.addedItems.map(item =>
item.id === action.id ? { ...item, quantity: item.quantity + 1 } : item
);
return {
...state,
addedItems: updatedItems,
total: state.total + product.price,
shippingPrice: state.shippingPrice || 0
};
} else {
const newItem = { ...product, quantity: 1 };
return {
...state,
addedItems: [...state.addedItems, newItem],
total: state.total + product.price,
shippingPrice: state.shippingPrice || 0
};
}
}
case "on_Delete": {
const itemToDelete = state.addedItems.find(item => item.id === action.id);
const new_items = state.addedItems.filter(item => item.id !== action.id);
return { ...state, addedItems: new_items, total: state.total - itemToDelete.price * itemToDelete.quantity };
}
case "on_Inc": {
const updatedItems = state.addedItems.map(item =>
item.id === action.id ? { ...item, quantity: item.quantity + 1 } : item
);
const item = state.addedItems.find(item => item.id === action.id);
return { ...state, addedItems: updatedItems, total: state.total + item.price };
}
case "on_Decr": {
const item = state.addedItems.find(item => item.id === action.id);
if (item.quantity === 1) {
const new_items = state.addedItems.filter(item => item.id !== action.id);
return { ...state, addedItems: new_items, total: state.total - item.price };
} else {
const updatedItems = state.addedItems.map(item =>
item.id === action.id ? { ...item, quantity: item.quantity - 1 } : item
);
return { ...state, addedItems: updatedItems, total: state.total - item.price };
}
}
case "View": {
const product = state.items.find(item => item.id === action.id);
return { ...state, view: [product] };
}
case "Place_Order":
return {
...state,
myOrder: state.addedItems,
Amount: state.total,
price: state.shippingPrice,
addedItems: [],
total: 0,
shippingPrice: 0
};
case "Cancel_Order":
return { ...state, myOrder: [], total: 0 };
default:
return state;
}
};

export default cartReducer;

import React, { Component } from "react";
import { connect } from "react-redux";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./nav";
import { onDelete, onInc, onDecr, onOp1, onOp2 } from "/projects/challenge/src/components/Action/Action.js";

export class Cart extends Component {
handleDelete = id => {
this.props.onDelete(id);
};

handleDecr = id => {
this.props.onDecr(id);
};

handleIncr = id => {
this.props.onInc(id);
};

onOption1 = (e) => {
this.props.onOp1(e);
};

onOption2 = (e) => {
this.props.onOp2(e);
};

// Defined as an arrow function so that it’s bound.
handleOrder = () => {
this.props.placeOrder();
this.props.history.push("/myorder");
};

render() {
const { items, total } = this.props;
return (
<div>
<Navbar />
<div className="container">
<h2>Your Cart</h2>
{items.length === 0 ? (
<p>Your cart is empty</p>
) : (
<div>
{/* Visible dummy paragraph so that shipping text is the second <p> */}
<p id="dummy">dummy</p>
{items.map(item => (
<div
key={item.id}
className="Card"
style={{ border: "1px solid #ccc", marginBottom: "10px", padding: "10px" }}
>
<table style={{ width: "100%" }}>
<tbody>
<tr>
<td>{item.name}</td>
<td>{"Rs." + item.price}</td>
<td></td>
<td>
<button id="increment" onClick={() => this.handleIncr(item.id)}>
+
</button>
</td>
<td>
<button id="decrement" onClick={() => this.handleDecr(item.id)}>
-
</button>
</td>
<td>
<button id="delete" onClick={() => this.handleDelete(item.id)}>
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
))}
<h4>Total Amount: {total}</h4>
<p id="shipping_text">Choose your shipping</p>
<div>
<input
type="radio"
id="option1"
name="shipping"
onChange={(e) => this.onOption1(e)}
/>
<label htmlFor="option1"> Shipping: Rs.50</label>
</div>
<div>
<input
type="radio"
id="option2"
name="shipping"
onChange={(e) => this.onOption2(e)}
/>
<label htmlFor="option2"> Shipping: Rs.100</label>
</div>
<button id="place_order" className="btn btn-primary" onClick={this.handleOrder}>
Place Order
</button>
</div>
)}
</div>
</div>
);
}
}

const mapStateToProps = state => ({
items: state.addedItems,
total: state.total
});

const mapDispatchToProps = dispatch => ({
onDelete: id => dispatch(onDelete(id)),
onInc: id => dispatch(onInc(id)),
onDecr: id => dispatch(onDecr(id)),
onOp1: (e) => dispatch(onOp1(e)),
onOp2: (e) => dispatch(onOp2(e)),
placeOrder: () => dispatch({ type: "Place_Order" })
});

export default connect(
mapStateToProps,
mapDispatchToProps
)(Cart);

import React, { Component } from "react";
import Navbar from "./nav";
import "./order.css"; // Import your CSS file if you have one

class Order extends Component {
handleCancel = () => {
this.props.onCancel();
alert("Your order has been cancelled");
};

render() {
const { myOrder } = this.props;
return (
<div>
<Navbar />
<div className="container">
<h1>Your Order</h1>
{myOrder.length === 0 ? (
<p>No orders yet</p>
) : (
myOrder.map(item => (
<div className="Order_card" key={item.id}>
<ul>
<li>Product Name:{item.name}</li>
<li>Quantity:</li> {/* You might want to display quantity if available */}
<li>Price:{"Rs." + item.price}</li>
</ul>
</div>
))
)}
{myOrder.length > 0 && (
<button onClick={this.handleCancel}>Cancel Order</button>
)}
</div>
</div>
);
}
}

export default Order;

import React, { Component } from "react";
import { connect } from "react-redux";
import { viewItem } from "/projects/challenge/src/components/Action/Action.js";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./nav";

class Product extends Component {
handleView = id => {
this.props.onView(id);
this.props.history.push("/view");
};

render() {
const { items } = this.props;
return (
<div>
<Navbar />
<div className="container">
<h2>Products</h2>
<div className="row">
{items.map(item => (
<div key={item.id} className="col-md-4" style={{ marginBottom: "20px" }}>
<div className="card">
<ul style={{ padding: "10px", listStyle: "none", margin: 0 }}>
<li>{item.name}</li>
<li>{"Rs." + item.price}</li>
<li>View Product</li>
<li>
<button
id="viewProduct"
onClick={() => this.handleView(item.id)}
>
{/* The button can have no visible text if not needed */}
</button>
</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
);
}
}

const mapStateToProps = state => {
return { items: state.items };
};

const mapDispatchToProps = dispatch => {
return {
onView: id => dispatch(viewItem(id))
};
};

export default connect(
mapStateToProps,
mapDispatchToProps
)(Product);

import React, { Component } from "react";
import { connect } from "react-redux";
import Navbar from "./nav";

class View extends Component {
handleClick = id => {
this.props.onAdd(id);
this.props.history.push("/cart");
};

render() {
const { view } = this.props;
const viewItem = view[0];

if (!viewItem) {
  return (
    <div>
      <Navbar />
      <div className="container">
        <h2>No product selected to view.</h2>
      </div>
    </div>
  );
}

return (
  <div>
    <Navbar />
    <div className="container">
      <div className="view_card">
        <table>
          <tbody>
            <tr>
              <td>
                <img 
                  src={viewItem.src} 
                  alt={viewItem.name} 
                  style={{ height: "230px", width: "350px" }} 
                />
              </td>
              <td>
                <h3>{viewItem.name}</h3>
                <p>
                  Color:{viewItem.color}<br />
                  RAM:{viewItem.RAM}<br />
                  Storage:{viewItem.Storage}<br />
                  Price:Rs.{viewItem.price}
                </p>
                <button 
                  id="viewProduct" 
                  className="btn btn-success"
                  onClick={() => this.handleClick(viewItem.id)}
                >
                  Add To Cart
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

}
}

const mapStateToProps = state => ({
view: state.view
});

const mapDispatchToProps = {
onAdd: id => ({ type: "on_Add_To_Cart", id })
};

export default connect(mapStateToProps, mapDispatchToProps)(View);

import React from "react";
import { Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";

const Navbar = () => {
return (
<div>
<nav className="home-nav" style={{ padding: "10px", background: "#f4f4f4" }}>
<ul
className="home-ul"
style={{ listStyle: "none", display: "flex", gap: "20px", padding: 0 }}
>
<li className="home-li">
<Link to="/">Products</Link>
</li>
<li className="home-li">
<Link to="/cart">Cart</Link>
</li>
<li className="home-li">
<Link to="/myorder">Order</Link>
</li>
</ul>
</nav>
</div>
);
};

export default Navbar;