Search product with API

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-rating-start in reactjs and set result. Actually we are making some project like E-commerce where we can implemen react rating start.

React

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Install React Rating Start 

Here, we will install library of reactjs (npm install react-rating-star-with-type) in cmd prompt, terminal whatever.

Implementation of React Rating Start

Now, we are ready to code of react rating star using with this library. After installation of react rating start. We are building an E-Commerce website using Redux.

First we import this library.

import ReactStars from 'react-rating-star-with-type';

Now we are using useState hooks for change the static state value of rating start when user hover on rating start with onChange event handler change the color.

  const [star, setStar] = useState(5);
   const onChange=(nextValue) => {
    setStar(nextValue)
   }

 <ReactStars classNames=" " onChange={onChange} value={4.2} edit={true} activeColors={[ "yellow", "red"]} 
    />

 1. classNames: This prop allows you to pass additional CSS classes to the component. In your example, it is an empty string (" "). This can be useful for styling the component with custom CSS.

2.onChange: This prop specifies a callback function that will be called whenever the user changes the rating by clicking on the stars. In your example, it refers to a function named onChange. You need to define this function elsewhere in your code to handle the rating changes.

3. value: This prop sets the initial value of the star rating. In your example, it's set to 4.2. This means that initially, the component will display 4.2 stars filled.

4. edit: This prop determines whether the user can interact with the stars to change the rating. When set to true, users can click on the stars to modify the rating; when set to false, the stars are essentially read-only. In your example, it's set to true, indicating that the user can edit the rating.

5. activeColors: This prop sets the color of the active (filled) stars. In your example, it's an array containing one color, "yellow". This means that the filled stars will be displayed in yellow

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Search product with API

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Search product with API in react redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Make Search box and Add style

# Make Action and Saga

# Call API for search product

# Test API result

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Make Search box and Add style

We will make a search bar first with tailwind style css in Header.jsx where user can search anything about product. We will use tailwind css for adding style.

 Header.jsx

 <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
             
          />
        </div>
      </div>

 Make Action and Saga

Now we will make action file (already have been created - please check our previous blog).

ProductAction.jsx

Here we import first PRODUCT_SEARCH as a constant from constant.jsx file and then make const productSearch and inside this arrow function we pass a query this will be useful as a parameter when we search anything from searchbar and return type (same as constant file).

import { PRODUCT_SEARCH } from "./Constant";

export const productSearch = (query) => {
    return {
        type: PRODUCT_SEARCH,
        query,
    }
}

Constant.jsx

Now we will call from header.jsx file

import { useSelector, useDispatch } from "react-redux";
  import {productSearch } from '../redux/ProductAction';
  
  const dispatch = useDispatch();
  
   <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
            onChange={(event) => dispatch(productSearch(event.target.value))}
          />
        </div>
      </div>
  

productSaga.jsx

function* searchProduct(data) {
    let result = yield fetch(`http://localhost:3000/products?q=${data.query}`);
    result = yield result.json();
    console.log("product search is called", data);
    yield put({type: SET_PRODUCT_LIST, data:result})

    if (result.length === 0){
        console.log("not found");
    }
}

function* ProductSaga() {
 yield takeEvery(PRODUCT_SEARCH, searchProduct)

}

Whole Code (Header.jsx)

import React from "react";
import { BsFillCartPlusFill } from "react-icons/bs";

import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

import {productSearch } from '../redux/ProductAction';

const Header = () => {
  const result = useSelector((state) => state.cartData);
  console.log("redux data in header", result);

  const dispatch = useDispatch();

  const navigate = useNavigate();

  return (
    <div>
      <div className="bg-[#434be6] p-4 w-full relative">
        <div className=" flex justify-between mx-auto px-2   items-center  ">
          <div>
            <h1
              className="text-white font-bold cursor-pointer"
              onClick={() => navigate("/")}
            >
              E-Commerce
            </h1>
          </div>

          <div className="cursor-pointer" onClick={() => navigate("/cart")}>
            <span className="bg-green-500  rounded-xl px-1 absolute text-[12px] top-[9px]  right-7 text-white border border-black">
              {result.length}
            </span> 

            <BsFillCartPlusFill size={30} className="" />
          </div>
        </div>
      </div>

      <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
            onChange={(event) => dispatch(productSearch(event.target.value))}
          />
        </div>
      </div>
    </div>
  );
};

export default Header;

Constant.jsx

export const  ADD_TO_CART  = "ADD_TO_CART";
export const  REMOVE_TO_CART  = "REMOVE_TO_CART";
export const  EMPTY_CART  = "EMPTY_CART";
export const PRODUCT_LIST = "PRODUCT_LIST";
export const SET_PRODUCT_LIST = "SET_PRODUCT_LIST";
export const PRODUCT_SEARCH = "PRODUCT_SEARCH";



//www.kumaratuljaiswal.in #www.hackingtruth.in

ProductAction.jsx

import { PRODUCT_LIST,PRODUCT_SEARCH } from "./Constant";

    export const productList =  () =>  {

    return {
        type: PRODUCT_LIST,

    }
}

export const productSearch = (query) => {
    return {
        type: PRODUCT_SEARCH,
        query,
    }
}

ProductSaga.jsx

import { takeEvery, put } from 'redux-saga/effects';
import {ADD_TO_CART, PRODUCT_LIST, PRODUCT_SEARCH, SET_PRODUCT_LIST} from './Constant';

function* getProducts(){
 
     let data = yield fetch(`http://localhost:3000/products`);
     data = yield data.json();
     yield put({ type: SET_PRODUCT_LIST, data})

 
}
 

function* searchProduct(data) {
    let result = yield fetch(`http://localhost:3000/products?q=${data.query}`);
    result = yield result.json();
    console.log("product search is called", data);
    yield put({type: SET_PRODUCT_LIST, data:result})

    if (result.length === 0){
        console.log("not found");
    }
}


function* ProductSaga() {
 yield takeEvery(PRODUCT_LIST, getProducts)
 yield takeEvery(PRODUCT_SEARCH, searchProduct)
 
}

export default ProductSaga

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Show Added To Cart Product with Price Calculation

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Show Added To Cart Product with Price Calculation in redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Get Data from redux

# Make Table to show cart product

# Add style to Page

# Show price and discount

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Get Data from redux

 Here, we gonna first try to fetch data from cart and after that we will show output as a cart length and price calculation but before that we will make a const cartData = useSelector hook and get a state of data (cartdata) that which we have added inside the cart.

const cartDataa = useSelector((state) => state.cartData);

# NOTE - i know you must be getting confused, so you must see our previous blog. 

JSON File (Product.json - json-server product.json)

{
    "products": [
      {
        "id": 1,
        "name": "IQOO Z7 Pro 5G",
        "color": "blue",
        "price": 23999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/61Id6WJDWqL._SX679_.jpg"
      
      },
      {
        "id": 2,
        "name": "iQOO Neo 7 5G",
        "color": "blue",
        "price": 27999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/41xfzQ2MeAL._SX300_SY300_QL70_FMwebp_.jpg"
      
      },
      {
        "id": 3,
        "name": "iQOO 9 SE",
        "color": "blue",
        "price": 23999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/618gFHEnXUL._SX679_.jpg"
      
      },
      {
        "id": 4,
        "name": "Vivo T2x 5G",
        "color": "blue",
        "price": 18050,
        "category": "mobile",
        "brand": "Vivo",
        "photo": "https://m.media-amazon.com/images/I/71ehbISi-zL._SL1500_.jpg"
      
      },
      {
        "id": 5,
        "name": "TECNO Spark 9",
        "color": "gray",
        "price": 6999,
        "category": "mobile",
        "brand": "TECHNO",
        "photo": "https://m.media-amazon.com/images/I/9185sX9EGFL._SL1500_.jpg"
      
      },
      {
        "id": 6,
        "name": "IKALL Z19 Pro",
        "color": "blue",
        "price": 8799,
        "category": "mobile",
        "brand": "IKALL",
        "photo": "https://m.media-amazon.com/images/I/51m4O+mhvOL._SL1000_.jpg"
      
      }
    
    ]
  }

Now you can also check the length of cart items using cartData.length.

 <span>{cartDataa.length}</span> >

After that we will use map() function for getting data from cart that the product which the user has added to the cart.

{
cartDataa.map((item) =>
            <tr className="" key={item.id}>
           
           <td>{item.name}</td>
           <td>{item.color}</td>
           <td>{item.price}</td>
           <td>{item.category}</td>
           <td>{item.brand}</td>
         </tr>
        
  )}

 Before writing the whole code here, we will console of cart price that user has added to the cart.

     let amount = cartDataa.map(item=>item.price).reduce((prev, next)=>prev+next)
console.log(amount)
 

 
1) cartDataa: It seems that cartDataa is an array containing objects representing items in a shopping cart. Each object is expected to have a property named price.


2) .map() Method: The map method is used to create a new array by extracting the price property from each object in the cartDataa array.
        cartDataa.map(item => item.price) creates an array of prices.


3) .reduce() Method: The reduce method is then used to calculate the sum of all the prices in the newly created array.
        (prev, next) => prev + next is a callback function that takes two parameters (prev and next) and returns their sum. The reduce method applies this function cumulatively to the elements of the array, resulting in the sum of all prices.


4) amount Variable: The result of the reduce operation, which is the total sum of prices, is stored in the variable amount.

5) console.log(amount): The console.log statement is used to log the calculated amount to the console, which can be useful for debugging or understanding the value.

Make Table to show cart product

 <div>
       <div className="text-center mx-auto max-w-[1240px] ">
       <h1 className="text-blue uppercase underline font-bold first-letter:text-[red] pb-4 pt-4 cursor-pointer" onClick={() => navigate('/')}>Product List</h1>
           <span>{cartDataa.length}</span> 
       </div>

      <div className="max-w-[1420px] mx-auto  ">
        <div className="grid lg:grid-cols-2 ml-6 mr-6 gap-10   ">
          <div className="">
            <table className="border-2 shadow-sm  bg-white ">
              <tr className="text-white bg-blue-500 text-left w-full">
                <th className="w-36" >Name</th>
                <th className="w-36">Color</th>
                <th className="w-36">Price</th>
                <th className="w-36">Category</th>
                <th className="w-36">Brand</th>
              </tr>
              
          {
            cartDataa.map((item) =>
            <tr className="" key={item.id}>
           
           <td>{item.name}</td>
           <td>{item.color}</td>
           <td>{item.price}</td>
           <td>{item.category}</td>
           <td>{item.brand}</td>
         </tr>
        
          )}
             
             
            </table>
          </div>

          <div className="text-right  ">
            <h1 className="border-2 text-center font-semibold text-white bg-blue-500  ">Order Summary</h1>
           <div className="flex flex-col justify-center">
         <p className="font-semibold mx-auto mt-2">
          Have Coupan ?
         </p>
         <div className=" mx-auto m-4">
          <input type=""
          className="rounded mb-2 p-2 mr-4 text-slate-600"
          placeholder="Coupan Code"
          />
          <button className=" bg-black text-white p-4 rounded">
                Apply
              </button>
         </div>
         <div className="flex shadow-md  ">
              <div className="mx-auto px-8 py-4">
                <div className="md:flex justify-between mb-5 ">
                  <span className="font-semibold text-sm uppercase">
                    Total Price
                  </span>
                 <span className="font-semibold text-sm pl-28">{amount}</span> 
                  
                 
                </div>
                <div className="md:flex justify-between  mb-5">
                  <span className="font-semibold text-sm uppercase">
                    Discount
                  </span>
                   <span className="font-semibold text-sm">{amount/10}</span> 
                </div>
                <div className="md:flex justify-between  mb-5">
                  <span className="font-semibold text-sm uppercase">Total</span>
                   <span className="font-semibold text-sm">{amount-(amount/10)}</span> 
                </div>
                
                <div className="border-t mt-8">
                  <div className="flex font-semibold justify-between py-6 text-sm uppercase">
                    <span>Total cost</span>
                   <span>{amount-(amount/10)}</span> 
                  </div>
                  <button className="bg-indigo-500 font-semibold hover:bg-indigo-600 py-3 text-sm text-white uppercase w-full">
                    Checkout
                  </button>
                </div>
              </div>
            </div>
           </div>

          </div>
        </div>
      </div>

    </div>

1) HTML Structure: The outermost element is a <div> that wraps the entire content.

2) Header Section: Inside the outer <div>, there's a header section with a title "Product List" that also displays the number of items in the cart (cartDataa.length). The title is a clickable element that triggers a navigation to the root path ('/') when clicked.

3) Product List Section: Following the header, there is a section for displaying a list of products in a grid layout (lg:grid-cols-2 for large screens, 2 columns). The product information is displayed in a table with columns for "Name," "Color," "Price," "Category," and "Brand."
        The product data is dynamically rendered using the map function to iterate through the cartDataa array and display each product's details in a table row (<tr>).

4) Order Summary Section: On the right side of the page, there is an order summary section.
        It includes an input field for entering a coupon code and a button to apply the coupon.
        Below that, there's a section displaying the total price, discount, and the final total. The values seem to be dynamic and are being calculated based on the amount variable.
        Finally, there's a checkout button.

5) Styling: The styling is done using Tailwind CSS classes, which are utility classes for styling in a functional way.
        Classes like text-blue, uppercase, underline, font-bold, mx-auto, etc., are used to style various elements.

6) Dynamic Content: The content is dynamic and depends on the data in the cartDataa array and the amount variable, which is used to calculate the total price, discount, and final total.

7) Event Handling: The title "Product List" has an onClick event that navigates to the root path ('/') when clicked.

8) React Component Structure: The code suggests the usage of React components as it utilizes JSX syntax, and the dynamic content and event handling are typical in React applications.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE  

Disclaimer

 Hello Viwers, I am back again with another blog and the topic name is Github Actions CI CD Pipelines WorkFlows. So in this blog we will consider so many thing about CI/CD pipelines workflows like what is Github Actions, how to use - step by step, can i used github actions for CI/CD, A demo workflows file - How to create, run and check results, Terms: Workflows, Events, Jobs, Steps.

Can i used github actions for CI/CD?

Yes, GitHub Actions is commonly used for Continuous Integration (CI) and Continuous Deployment (CD) workflows.

What is Github Actions?

GitHub Actions is an automation platform provided by GitHub that allows you to set up workflows for your software development projects. It enables you to automate various tasks, such as building, testing, and deploying your code directly from your GitHub repository.

Key features of GitHub Actions include:

- Automate SDLC workflows

- Implement CI CD DevOps

Demo

Let's start with the demo how to use github action. Actually you don't got anywhere for using CI/CD, you can use all features in GitHub Action.

Step 1 - Signup and Login to GitHub.com 

Step 2 - Create a new Repository

 Go to this  + Plus button dropdown. Click on new repository.

 Now i will called as github-actions and set as public and click on create repository button (when go to scroll down on same page).

 Step 3 - In the repo create a folder .github/workflows

 here you can either create manually and then commited push to the repository. or you can go to this action tab.

 here you can see the github actions and you can also use templates or use workflows yourself but we will go to setup workflows as yourself.

Step 4 - In the folder create a YAML file with .yml extension

Here this will automatically create .github/workflows folder  and the name of main.yml file but this is empty code. yaml is programming language and .yml this is a file format but particular syntax.

Step 5 - Add the content of the workflow in the file

Now content adding time..

Go to this link and copy the syntax of printing of hello world and you can also use online yaml formater online as a precautions of indentation error.

Hello World - CLICK HERE

YAML Formatter - CLICK HERE

name: hello-world
'on': push
jobs:
  my-job:
    runs-on: ubuntu-latest
    steps:
      - name: my-step
        run: echo "Hello World!"

Certainly! The YAML code you've provided is a simple GitHub Actions workflow. Let's break down each part:

```yaml
name: hello-world
```

This sets the name of your workflow. In this case, it's named "hello-world." This name is just for your reference and doesn't affect the functionality of the workflow.

```yaml
on: push
```

This specifies the event that triggers the workflow. In this case, the workflow will be triggered whenever there is a `push` event to the repository.

```yaml
jobs:
  my-job:
    runs-on: ubuntu-latest
    steps:
```

Here, you define a job named "my-job" that runs on an `ubuntu-latest` virtual machine. This means the steps within this job will be executed on a machine with the latest version of Ubuntu.

```yaml
  - name: my-step
    run: echo "Hello World!"
```

Within the job, you define a step named "my-step." This step uses the `run` key to specify the command that should be executed. In this case, it's a simple command to echo "Hello World!" to the console.

So, when a `push` event occurs in your repository, GitHub Actions will execute this workflow. The workflow consists of one job named "my-job," which runs on an Ubuntu machine. In that job, there's a single step named "my-step" that echoes "Hello World!" to the console.

This is a basic example, and GitHub Actions can be extended to perform more complex workflows, such as running tests, building and deploying applications, and more, depending on the needs of your project.

Step 6 - Commit and push the changes

This should start with github actions workflows.

Step 7 - Go to Repo main page and click "ACTIONS TAB" 

So this is our workflow

Step 8 - Select the workflow from left sidebar and check the logs

Here is the single job ( i have only one thats why)  When we click on this job, here we can see the logs. Here we have a job. 

# First it is setup that will the spin up ubuntu system, as you can see, it is running the ubuntu image (operating system).

# Second this is the actual job. By step here it is running, this comment "echo hello world" which is printing hello world. 

# Third one is completing the job, doing all the cleanup process.

So, This is how it is running ...ummm looking good LOL ;-)

Also if you want to re-run this job, you can also click on it.

You can also check all types of detals like Usage, Workflow file.

Don't forget to explore more things and forget to share....

Disclaimer

Add Routing and Make Cart Page

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of react routing in redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Install React router dom

# Make Main and cart page

# Add Link with pages

# Add Style for Header and Logo

# Interview Question

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

 Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

React-Router-Dom Installation

We will install react-router-dom (https://reactrouter.com) by this command (npm i react-router-dom or npm install react-router-dom)  after installing we have a wrapper which is used to wrapping the entire website for routing becuase when we want route in any page of website we can easily redirect the page in any one of them website without Loading the entire website.

Now Wrapping time... we will use wrapping in Main.js or Index.js file. Here we import BrowserRouter form react-router-dom

import { BrowserRouter } from 'react-router-dom'


<BrowserRouter>
    <App />
    </BrowserRouter>

Whole Code

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'

import Store from './redux/Store.jsx'
import { BrowserRouter } from 'react-router-dom'

//www.kumaratuljaiswal.in www.hackingtruth.in

console.log(Store)

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={Store}>
  <BrowserRouter>
    <App />
    </BrowserRouter>
    </Provider>
)

Now we are ready to implement routing in our code. Here we import Routes and Route from react-router-dom and using route tag we define a path where we want redirect the page and in element we define the component.

import { Routes, Route } from "react-router-dom";

 
<Routes>
  <Route path="/" element={<MainHeader />} />
  <Route path="/cart" element={<Cart />} />
</Routes>
 

Simply make a page (Cart.js) component and put it into with routes for the page redirecting.

1. Import the Routes and Route and useNavigate from react-router-dom.

2. make a navigate with const.

3. simple create a text for redirecting back to Home Page. 

import React from "react";
 
import { Routes, Route, useNavigate } from "react-router-dom";

function Cart() {

    const navigate = useNavigate()
  return (
    <div>
       <div className="text-center mx-auto max-w-[1240px] ">
       <h1 className="text-blue uppercase underline font-bold first-letter:text-[red] pb-4 pt-4 cursor-pointer" onClick={() => navigate('/')}>Product List</h1>
        <h1>Cart Page</h1>
       </div>
    </div>
  );
}

export default Cart;

Now Cart.jsx component put with route in App.jsx.

import React from "react";
import Header from "./components/Header";
import MainHeader from "./components/MainHeader";
import { Routes, Route } from "react-router-dom";
import Cart from "./components/Cart";

function App() {
  return (
    <div>
      <>
        <Header />
        {/* <MainHeader /> */}

        <Routes>
          <Route path="/" element={<MainHeader />} />
          <Route path="/cart" element={<Cart />} />
        </Routes>
      </>
    </div>
  );
}

export default App;

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE    

Disclaimer

Remove to Cart with ID

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Remove to cart with ID in redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Apply Filter function in Reducer

# Test Added Products in Cart

# Interview Questions

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

 Reducer.jsx

 case REMOVE_TO_CART:
           
            console.log("REMOVE_FROM_CART condition", action)
            const remainingItem = data.filter((item) => item.id !== action.data);
            console.log("RemainingItem", remainingItem)
            return [ ...remainingItem ];

 Simple open Reducer.jsx and put a new case REMOVE_TO_CART and apply filter function with condition.

Full Code

import { ADD_TO_CART, EMPTY_CART, REMOVE_TO_CART } from './Constant';
export const cartData = (data = [], action) => {
    switch(action.type)
    {
        case ADD_TO_CART:
            console.log("ADD_TO_CART CONDITION", action)
            return [action.data,  ...data];
        case REMOVE_TO_CART:
            console.log("REMOVE_FROM_CART condition", action)
            const remainingItem = data.filter((item) => item.id !== action.data);
            console.log("RemainingItem", remainingItem)
            return [ ...remainingItem ];
        case EMPTY_CART:
            console.log("EMPTY_CART condition", action)
            data = []
            return [ ...data ]
        default:
            return data;
    }
}
//www.kumaratuljaiswal.in #www.hackingtruth.in

OutPut

RemainingItem Array [ {…}, {…} ]
​
0: Object { id: 4, name: "Vivo T2x 5G", color: "blue", … }
​
1: Object { id: 1, name: "IQOO Z7 Pro 5G", color: "blue", … }
​
length: 2
​
<prototype>: Array []

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE   

Disclaimer