11 - Reusable Card Componet

Section 11: Reusable Card Component

• Creating Base Component
• The Card Components

Creating Base Component

Now, we need a Base componet for including any other components. Let's edit the Base.js file:

import React from 'react';

const Base = ({
  title = "My Title",
  description = "My Description",
  className = "bg-dark text-white p-4",
  children
}) => {
  return (
    <div>
      <div className="container-fluid">
        <div className="jumbotron bg-dark text-white text-center">
          <h2 className="display-4">{title}</h2>
          <p className="lead">{description}</p>
        </div>
        <div className={className}>{children}</div>
      </div>
      <footer className="footer bg-dark mt-auto py-3">
        <div className="container-fluid bg-success text-white text-center py-3">
          <h4>If you got any questions, reach me out at instagram</h4>
          <button className="btn btn-warning btn-lg">Contact Us</button>
          <div className="container">
            <span className="text-white">
              An Amazing Django React Fullstack Course.
            </span>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default Base;

And then we can return the Base component in the Home.js and pass some of the properties there:

...

export default function Home() {
  ...

  return (
    <Base title="Home Page" description="Welcome to T-Shirt Store">
      <h1>Home Component</h1>
      <div className="row">
        {products.map((product, index) => {
          return (
            <div key={index}>
              <h1>{product.name}</h1>
            </div>
          );
        })}
      </div>
    </Base>
  );
}

[ ↥ Back To Top ]

The Card Components

import React from 'react'
import ImageHelper from "./helper/imageHelper";
import { Redirect } from "react-router-dom"

// TODO: Deal with this later
const isAuthenticated = true

const Card = ({
  product,
  addtoCard = true,
  removeFromCart = false,
}) => {
  const cardTitle = product ? product.name : "A photo from pexels";
  const cardDescription = product ? product.description : "Default description";
  const cardPrice = product ? product.price : "Default";

  const addToCart = () => {
    if (isAuthenticated) {
      console.log("Added to cart!");
    } else {
      console.log("Login Please!");
    }
  };

  const getRedirect = (redirect) => {
    if (redirect) {
      return <Redirect to="/cart" />
    }
  }

  const showAddToCart = addToCart => {
    return (addToCart && (
      <button
        onClick={addToCart}
        className="btn btn-block btn-outline-success mt-2 mb-2"
      >
        Add to Cart
      </button>))
  }

  const showRemoveFromCart = removeFromCart => {
    return (
      removeFromCart && (
        <button
          onClick={() => {
            // TODO: handle this
            console.log("Product removed from cart");
          }}
          className="btn btn-block btn-outline-danger mt-2 mb-2"
        >
          Remove from cart
        </button>
      )
    )
  }

  return (
    <div className="card text-white bg-dark border border-info ">
      <div className="card-header lead">{cardTitle}</div>
      <div className="card-body">
        <ImageHelper product={product} />
        <p className="lead bg-success font-weight-normal text-wrap">
          {cardDescription}
        </p>
        <p className="btn btn-success rounded  btn-sm px-4">$ {cardPrice}</p>
        <div className="row">
          <div className="col-12">
            {showAddToCart(addToCart)}
          </div>
          <div className="col-12">
            {showRemoveFromCart(removeFromCart)}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Card

[ ↥ Back To Top ]