-->

ABOUT US

Our development agency is committed to providing you the best service.

OUR TEAM

The awesome people behind our brand ... and their life motto.

  • Kumar Atul Jaiswal

    Ethical Hacker

    Hacking is a Speed of Innovation And Technology with Romance.

  • Kumar Atul Jaiswal

    CEO Of Hacking Truth

    Loopholes are every major Security,Just need to Understand it well.

  • Kumar Atul Jaiswal

    Web Developer

    Techonology is the best way to Change Everything, like Mindset Goal.

OUR SKILLS

We pride ourselves with strong, flexible and top notch skills.

Marketing

Development 90%
Design 80%
Marketing 70%

Websites

Development 90%
Design 80%
Marketing 70%

PR

Development 90%
Design 80%
Marketing 70%

ACHIEVEMENTS

We help our clients integrate, analyze, and use their data to improve their business.

150

GREAT PROJECTS

300

HAPPY CLIENTS

650

COFFEES DRUNK

1568

FACEBOOK LIKES

STRATEGY & CREATIVITY

Phasellus iaculis dolor nec urna nullam. Vivamus mattis blandit porttitor nullam.

PORTFOLIO

We pride ourselves on bringing a fresh perspective and effective marketing to each project.

Showing posts with label Reactjs. Show all posts
Showing posts with label Reactjs. Show all posts
  • Question from setTimeout in Javscript

     

    Question from setTimeout in Javscript

     

    Hello viewers, whats up!! Here i am back again with the new post of question about setTimeout in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

    Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.


    Here we have a problem about setTimeout in javascript. Question is that there so 6 line of code in javascript. So simply use arrow function and for output we use console.log and after that we have to used setTimeout function and tell that what is the output and which output print first. Look like this -

     

    Code 

     

     

    (function() {
          console.log("a");
          setTimeout(() => console.log("b"), 1000);
          console.log("c");
          setTimeout(() => console.log("d"), 500);
    })();
    

     

     

     

    1) console.log("a"); - Outputs "a" to the console.


    2) setTimeout(() => console.log("b"), 1000); - Schedules the execution of the function () => console.log("b") after a delay of 1000 milliseconds (1 second).
       
     
    3) console.log("c"); - Outputs "c" to the console.
        

    4) setTimeout(() => console.log("d"), 500); - Schedules the execution of the function () => console.log("d") after a delay of 500 milliseconds (0.5 seconds).


    Now, let's consider the timing:


    #:/    "a" is logged immediately.
    #:/    "b" is scheduled to be logged after 1 second.
    #:/    "c" is logged immediately.
    #:/    "d" is scheduled to be logged after 0.5 seconds.


    However, JavaScript is single-threaded, and the event loop is used to manage the execution of asynchronous code. The scheduled functions (like "b" and "d") are placed in the event queue and executed when the call stack is empty.



    So, the output order will be:

     

     

        "a"
        "c"
        "d"
        "b"
    
    
    

     

     

    Question from setTimeout in Javscript

     

     

     


    # 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



    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

     

     

     

  • react-share-social-media-button in reactjs

     

    react-share-social-media-button in reactjs

     

    React Share  Social Media Button in Reactjs


    Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-share-social-media-button in reactjs and set result. Actually we are making some project like E-commerce where we can implement react social media icon as a shareable.

     

     

    React


    Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


    Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



    Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



    JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


    Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


    React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


    State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


    ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

     

    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/09/get-data-in-component-from-redux.html

    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 Social Media button React


    Here, we will install library of reactjs (npm install react-share) in cmd prompt, terminal whatever.

     

     

    react-share-social-media-button in reactjs

     

     

     

    Now, we are ready to code of react social media shareable button using with this library. After installation of  react-share-social-media-button. We are building an E-Commerce website using Redux.

     

    First we import this library.

     

     

    import { FacebookIcon, FacebookShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share'
    
    

     

     

     

    Now we are using social media name button JSX tag.



     <FacebookShareButton
                url={'https://facebook.com/share.php?u=http://localhost:5173/exclusivecollection'}
                quote={'Printed Shirt'}
                hashtag="#mfo">
                  <FacebookIcon size={32} round />
                </FacebookShareButton>
                 
                <WhatsappShareButton
                url={'http://localhost:5173/exclusivecollection'}
                quote={'Printed Shirt'}
                hashtag="#mfo">
                  <WhatsappIcon size={32} round />
                </WhatsappShareButton>
                 
                  
                <TwitterShareButton
                url={'http://localhost:5173/exclusivecollection'}
                quote={'Printed Shirt'}
                hashtag="#mfo">
                  <TwitterIcon size={32} round />
                </TwitterShareButton>
    

     

     

     

    # The FacebookShareButton component is used for the Facebook share button.
     
    # It takes props like url, quote, and hashtag, specifying the URL, quote, and hashtag to be shared on Facebook.
     
    # The FacebookIcon component is nested inside, indicating the appearance of the button.

    # As a localhost it is our localhost url but you can set domain name and your url where site is located.

     

     


    react-share-social-media-button in reactjs




    # 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



    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

     

     

     

  • react-rating-start in reactjs

     

    react-rating-start in reactjs

     

     

    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


    Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


    Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



    Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



    JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


    Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


    React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


    State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


    ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

     

    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/09/get-data-in-component-from-redux.html

    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.

     

     

    react-rating-start in reactjs

     

     

    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

     

     

     

    react-rating-start in reactjs

     

     


    # 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



    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

     

     

     

  • Search product with API in react redux saga

     

    Search product with API in react redux saga

     

    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


    Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


    Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



    Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



    JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


    Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


    React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


    State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


    ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

     

    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/09/get-data-in-component-from-redux.html

    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>
    

     

     

     

     

    Search product with API in react redux saga

     

     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


    Search product with API in react redux saga


    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
    
    
    
    

     

     

     

    Search product with API in react redux saga

     

     

     


    # 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



    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

     

     

     

  • Show Added To Cart Product with Price Calculation React Redux Saga

     Show Added To Cart Product with Price Calculation React Redux Saga


     

     

    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


    Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


    Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



    Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



    JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


    Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


    React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


    State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


    ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

     

    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/09/get-data-in-component-from-redux.html

    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> >
    


     

     

    price calculation in react redux saga

     

     

    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.

     

     

     

     

    price calculation in react redux saga

     

     


    # 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



    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

     

  • Github Actions CI CD Pipelines WorkFlows

     

    Github Actions CI CD Pipelines WorkFlows

     

     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.

     

    Github Actions CI CD Pipelines WorkFlows

     

     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).


    Github Actions CI CD Pipelines WorkFlows


     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.

     

     

    Github Actions CI CD Pipelines WorkFlows

     

     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.


    Github Actions CI CD Pipelines WorkFlows



    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.

     

     

    Github Actions CI CD Pipelines WorkFlows

     

      

    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.

     

     

     

    Github Actions CI CD Pipelines WorkFlows

     

    Step 6 - Commit and push the changes

     

     

    Github Actions CI CD Pipelines WorkFlows

     

     

    This should start with github actions workflows.

     

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

     

     

    Github Actions CI CD Pipelines WorkFlows

     

     

    So this is our workflow



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

     


    Github Actions CI CD Pipelines WorkFlows



    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 ;-)



    Github Actions CI CD Pipelines WorkFlows


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



    Github Actions CI CD Pipelines WorkFlows

    Github Actions CI CD Pipelines WorkFlows



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

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




     

    Disclaimer



    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

     

     

     
  • WHAT WE DO

    We've been developing corporate tailored services for clients for 30 years.

    CONTACT US

    For enquiries you can contact us in several different ways. Contact details are below.

    Hacking Truth.in

    • Street :Road Street 00
    • Person :Person
    • Phone :+045 123 755 755
    • Country :POLAND
    • Email :contact@heaven.com

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.