Master class

src/App.js

@@ -9,31 +9,7 @@ import HomePage from './pages/home';
 import './App.scss';
 
 function App() {
-  return (
-    <Router>
-      <Header />
-
-      <div className="page-container">
-        <Switch>
-          <Route exact path="/cart">
-            <CartPage />
-          </Route>
-
-          <Route exact path="/product/:productId">
-            <ProductPage />
-          </Route>
-
-          <Route exact path="/login">
-            <LoginPage />
-          </Route>
-
-          <Route>
-            <HomePage />
-          </Route>
-        </Switch>
-      </div>
-    </Router>
-  );
+  return 'Hello App';
 }
 
 export default App;

src/cart-context.js

@@ -7,61 +7,8 @@ const CartDispatchContext = React.createContext();
 
 function cartReducer(state, action) {
   switch (action.type) {
-    case 'increment': {
-      const product = action.payload;
-      const currentEntry = state.products[product.id];
-      let newEntry;
-      if (currentEntry) {
-        newEntry = {
-          ...currentEntry,
-          quantity: currentEntry.quantity + 1,
-        };
-      } else {
-        newEntry = {
-          ...product,
-          quantity: 1,
-        };
-      }
-
-      const { finalPrice } = calculatePriceDetails(product.price);
-      return {
-        ...state,
-        totalQuantity: state.totalQuantity + 1,
-        totalPrice: state.totalPrice + finalPrice,
-        products: {
-          ...state.products,
-          [product.id]: newEntry,
-        },
-      };
-    }
-    case 'decrement': {
-      const product = action.payload;
-      const currentEntry = state.products[product.id];
-      if (!currentEntry) return state;
-
-      let newEntry;
-      if (currentEntry.quantity === 1) {
-        newEntry = null;
-      } else {
-        newEntry = {
-          ...currentEntry,
-          quantity: currentEntry.quantity - 1,
-        };
-      }
-
-      const { finalPrice } = calculatePriceDetails(product.price);
-      return {
-        ...state,
-        totalQuantity: state.totalQuantity - 1,
-        totalPrice: state.totalPrice - finalPrice,
-        products: {
-          ...state.products,
-          [product.id]: newEntry,
-        },
-      };
-    }
     default: {
-      throw new Error(`Unhandled action type: ${action.type}`);
+      return state;
     }
   }
 }

src/components/general/CurrencyFormat.js

@@ -13,24 +13,8 @@ const currencyCodeLocaleMap = {
   INR: 'en-IN',
 };
 
-function CurrencyFormat({
-  className,
-  value,
-  currencyCode,
-  iconSize = 1,
-  ...remainingProps
-}) {
-  return (
-    <div
-      className={classNames('currency-format', { [className]: className })}
-      {...remainingProps}
-    >
-      <Icon size={iconSize} path={currenyCodeIconMap[currencyCode]} />
-      <span className="currency-format__value">
-        {value.toLocaleString(currencyCodeLocaleMap[currencyCode])}
-      </span>
-    </div>
-  );
+function CurrencyFormat({}) {
+  return null;
 }
 
 export default CurrencyFormat;

src/components/header/Account.js

@@ -5,15 +5,7 @@ import { mdiMenuDown } from '@mdi/js';
 import './Account.scss';
 
 function Account() {
-  return (
-    <div className="account">
-      <div className="account__hint">Hello, Sign in</div>
-      <div className="account__title">
-        My Account
-        <Icon className="account__arrow" path={mdiMenuDown} size={1.2} />
-      </div>
-    </div>
-  );
+  return null;
 }
 
 export default Account;

src/components/header/Cart.js

@@ -8,14 +8,7 @@ import './Cart.scss';
 import { useCartState } from 'cart-context';
 
 function Cart() {
-  const { totalQuantity } = useCartState();
-
-  return (
-    <Link to="/cart" className="h-cart">
-      <Icon path={mdiCartOutline} size={1.4} />
-      <div className="h-cart__count">{totalQuantity}</div>
-    </Link>
-  );
+  return null;
 }
 
 export default Cart;

src/components/header/DeliveryLocation.js

@@ -5,19 +5,7 @@ import { mdiMapMarkerOutline } from '@mdi/js';
 import './DeliveryLocation.scss';
 
 function DeliveryLocation() {
-  return (
-    <div className="delivery-location">
-      <Icon
-        className="delivery-location__pin"
-        path={mdiMapMarkerOutline}
-        size={1.2}
-      />
-      <div className="delivery-location__details">
-        <div className="delivery-location__hint">Hello</div>
-        <div className="delivery-location__title">Select your address</div>
-      </div>
-    </div>
-  );
+  return null;
 }
 
 export default DeliveryLocation;

src/components/header/Logo.js

@@ -6,12 +6,7 @@ import { Link } from 'react-router-dom';
 import './Logo.scss';
 
 function Logo({ country = 'in' }) {
-  return (
-    <Link to="/" className="logo">
-      <img className="logo__img" alt="Amazon" src={BrandLogo} />
-      {country && <span className="logo__country">.{country}</span>}
-    </Link>
-  );
+  return null;
 }
 
 export default Logo;

src/components/header/Orders.js

@@ -3,12 +3,7 @@ import React from 'react';
 import './Orders.scss';
 
 function Orders() {
-  return (
-    <div className="h-orders">
-      <div className="h-orders__hint">Returns</div>
-      <div className="h-orders__title">& Orders</div>
-    </div>
-  );
+  return null;
 }
 
 export default Orders;

src/components/header/Search.js

@@ -52,25 +52,7 @@ const categories = [
 function Search() {
   const [category, setCategory] = useState(0);
 
-  return (
-    <div className="search">
-      <select
-        className="search__select"
-        value={category}
-        onChange={(e) => setCategory(parseInt(e.target.value, 10))}
-      >
-        {categories.map((o, i) => (
-          <option key={i} value={i}>
-            {o}
-          </option>
-        ))}
-      </select>
-      <input className="search__input" type="text" />
-      <button className="search__button">
-        <Icon path={mdiMagnify} size={1.4} />
-      </button>
-    </div>
-  );
+  return null;
 }
 
 export default Search;

src/components/product/AddToCart.js

@@ -7,39 +7,7 @@ import './AddToCart.scss';
 import { useCartDispatch, useCartState } from 'cart-context';
 
 function AddToCard({ product }) {
-  const { products } = useCartState();
-  const dispatch = useCartDispatch();
-
-  const cartEntry = products[product.id];
-
-  if (cartEntry) {
-    return (
-      <div className="add-to-cart">
-        <button
-          className="add-to-cart__action add-to-cart__action--minus"
-          onClick={() => dispatch({ type: 'decrement', payload: product })}
-        >
-          <Icon className="add-to-cart__icon" size={1.2} path={mdiMinus} />
-        </button>
-        <div className="add-to-cart__quantity">{cartEntry.quantity}</div>
-        <button
-          className="add-to-cart__action add-to-cart__action--plus"
-          onClick={() => dispatch({ type: 'increment', payload: product })}
-        >
-          <Icon className="add-to-cart__icon" size={1.2} path={mdiPlus} />
-        </button>
-      </div>
-    );
-  } else {
-    return (
-      <button
-        className="add-to-cart-button"
-        onClick={() => dispatch({ type: 'increment', payload: product })}
-      >
-        Add to cart
-      </button>
-    );
-  }
+  return null;
 }
 
 export default AddToCard;

src/components/product/ImageSlider.js

@@ -20,31 +20,7 @@ function ImageSlider({ product }) {
   const imageClick = (src) => {
     setImage(src);
   };
-  return (
-    <div className="slider">
-      <div className="slider__left">
-        <ul className="slider__listing">
-          {images &&
-            images.map((image, i) => (
-              <li
-                className="slider__list"
-                key={i}
-                onClick={() => {
-                  imageClick(image);
-                }}
-              >
-                <img alt={product.title} src={image} />
-              </li>
-            ))}
-        </ul>
-      </div>
-      <div className="slider__right">
-        <div className="slider__display">
-          <img alt={product.title} src={image} />
-        </div>
-      </div>
-    </div>
-  );
+  return null;
 }
 
 export default ImageSlider;

src/components/product/Information.js

@@ -6,74 +6,7 @@ import CurrencyFormat from 'components/general/CurrencyFormat';
 import AddToCard from 'components/product/AddToCart';
 
 function Information({ product }) {
-    const { finalPrice, basePrice } = calculatePriceDetails(
-        product.price,
-    );
-    return (
-        <>
-            {product && (
-                <div className="information">
-                    <div className="information__header">{product.title}</div>
-                    <div className="information__category">Brand: {product.category}</div>
-                    {product.rating && (
-                        <div className="information__rating">
-                            <Rating maxRating={5} rating={product.rating.value} />
-                            <div className="information__rating-label">{product.rating.count} ratings</div>
-                        </div>
-                    )}
-
-                    {product.price && (
-                        <div className="information__pricing">
-                            <div className="information__price">
-                                <span className="information__label">M.R.P. : </span>
-                                <CurrencyFormat
-                                    className="product-card__amount strikethrough"
-                                    currencyCode={product.price.currency}
-                                    value={basePrice}
-                                />
-                            </div>
-                            <div className="information__price">
-                                <span className="information__label">Price. : </span>
-                                <CurrencyFormat
-                                    className="product-card__amount"
-                                    currencyCode={product.price.currency}
-                                    value={finalPrice}
-                                />
-                            </div>
-                            <div>
-                                <span className="information__label">You Save : </span>
-                                {product.price.discount}
-                            </div>
-                        </div>
-                    )}
-
-                    <AddToCard product={product} />
-
-
-                    <div className="information__specs">
-                        {product.specs &&
-                            product.specs.map((spec, i) => (
-                                <div className="information__spec" key={i}>
-                                    <span> {spec.name}</span> : <span>{spec.value}</span>
-                                </div>
-                            ))}
-                    </div>
-
-                    <div className="information__features">
-                        <div className="information__spec-header">About this item</div>
-                        <ul>
-                            {product.features &&
-                                product.features.map((feature, i) => (
-                                    <li className="information__feature" key={i}>
-                                        {feature}
-                                    </li>
-                                ))}
-                        </ul>
-                    </div>
-                </div>
-            )}
-        </>
-    );
+  return null;
 }
 
 export default Information;