DEV Community: MERN Practical Explanation

reset

MERN Practical Explanation — Fri, 09 Feb 2024 12:50:17 +0000

<!DOCTYPE html>

Document

style="width:600px;background-color:rgb(255,255,255);margin:0 auto;border-spacing:0;border-collapse:collapse">

style="text-align: center; padding:0px 40px;height:260px;background-image:url('https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/banner-back.png?alt=media&token=aab58c6e-7713-4569-b2b3-9eeba20cd146');background-position:center top;background-size:cover;background-repeat:no-repeat">

style="text-align:center;color:#fff;font-size:36px;font-family: 'Lato', sans-serif;font-style:italic;font-weight:700;padding:0;margin:0">
Hello ${name},

style="text-align:center;color:#fff;font-family: 'Lato', sans-serif;font-weight:700;font-size:36px;padding-top:5px;margin:0">
Welcome to VMycards

style="text-align:center;color:#fff;font-family: 'Lato', sans-serif;font-weight:400;font-size:16px;padding-top:10px;margin:0">

congratulations on being eligible to save up on carbon footprint by replacing traditional

paper business cards with VMycards.

style="color:#000;text-align:center;font-size:20px;font-style:normal;font-weight:600;margin-bottom:0">

We are excited to have you on board.

style="text-align:center;color:#000;font-family: 'Lato', sans-serif;font-weight:400;font-size:16px;padding-top:10px;margin:0">

Kindly verify your email address to proceed ahead.
Click on the verification link:

                        style="display:inline-block;border-radius:5px;background:#032140;color:#fff;margin:20px 0 20px;text-transform:uppercase;padding:15px 35px"&gt;<br>
                        <a href="${activateLink}"><br>
                            verify Email<br>
                        </a>

                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align:center">
                    <h5
                        style="color:#000;text-align:center;font-size:24px;font-style:normal;font-weight:600;margin:25px 0 0">
                        Why you should opt for <span style="color:#085EA9">VMycards?</span></h5>
                </td>
            </tr>

            <tr>
                <td style="text-align:center">
                    <img style="padding-left:250px;width:30px" src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/arrow.png?alt=media&token=7622a017-36d8-42d5-81f8-f4e79f069cc8" class="CToWUd" data-bit="iit">
                </td>
            </tr>

            <tr>
                <td style="text-align:center; padding-top: 0; padding-bottom: 0;line-height: 0;">
                    <img src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/find-img.png?alt=media&token=8aa7acdf-89bd-44e3-89f5-8cae10f8cd24" class="CToWUd a6T" data-bit="iit" tabindex="0">
                </td>
            </tr>

            <tr>
                <td style="text-align:center;background-color:#EEEEEE;padding-bottom:20px">
                    <div
                        style="display:inline-block;border-radius:5px;background:#032140;color:#fff;margin:20px 0 20px;text-transform:uppercase;padding:15px 35px">
                        <a href="https://vmycards.com/" style="color:#fff;text-decoration:none" target="_blank"
                            data-saferedirecturl="#">
                            CREATE YOUR CARD</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <h5
                        style="color:#0059A6;text-align:center;font-size:24px;font-style:normal;font-weight:700;margin-bottom:0">
                        Professional
                    </h5>
                    <p
                        style="text-align:center;color:#000;font-family: 'Lato', sans-serif;font-weight:400;font-size:20px;padding-top:10px;margin:0">
                        Modern, sleek digital cards for a professional edge.
                    </p>
                    <h5
                        style="color:#0059A6;text-align:center;font-size:24px;font-style:normal;font-weight:700;margin-bottom:0">
                        Customizable
                    </h5>
                    <p
                        style="text-align:center;color:#000;font-family: 'Lato', sans-serif;font-weight:400;font-size:20px;padding-top:10px;margin:0">
                        Reflect your brand with logo and colors.
                    </p>
                    <h5
                        style="color:#0059A6;text-align:center;font-size:24px;font-style:normal;font-weight:700;margin-bottom:0">
                        Eco-friendly
                    </h5>
                    <p
                        style="text-align:center;color:#000;font-family: 'Lato', sans-serif;font-weight:400;font-size:20px;padding-top:10px;margin-bottom:10px; margin-top: 0;">
                        Ditch paper for sustainable networking.
                    </p>
                </td>
            </tr>


            <tr style="margin-top:20px;width:100%">
                <td style="display:flex;margin-top:15px">
                    <img style="width:100%" src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/men-child-left.png?alt=media&token=e35f8a86-1f10-4ff8-9b2e-ffb8a8c4819a" class="CToWUd a6T" data-bit="iit"
                        tabindex="0">
                </td>
            </tr>

            <tr>
                <td>
                    <h2
                        style="color:#000;text-align:center;font-size:20px;font-style:normal;font-weight:400;padding:20px 60px">
                        If you have any questions or need assistance, we’re <br /> here to help 24x7
                    </h2>
                </td>
            </tr>

            <tr>
                <td style="text-align:center">
                    <div style="display:inline-flex;margin-bottom:20px">
                        <img src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/support-icon.png?alt=media&token=e4df40f7-3952-46fc-a2d0-1fac9cbe83c2" alt=""
                            style="text-align:center;width:25px;height:25px;padding: 5px; background: #EAF7FF; border-radius: 50%;"
                            class="CToWUd" data-bit="iit">
                        <div style="padding-left:10px;text-align:left">
                            <h5 style="margin:0;font-size:18px;color:#000;font-weight:400">Customer Service
                                Department</h5>
                            <h5 style="margin:0;font-size:18px;color:#009cff;font-weight:400"><a
                                    href="mailto:Support@vmycards.com" target="_blank">Support@vmycards.com</a></h5>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align:center">
                    <div style="display:inline-flex;margin-bottom:20px">
                        <img src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/support-email.png?alt=media&token=b03b0012-84f0-4db4-9dba-eb73fcc6709e" alt=""
                            style="text-align:center;width:25px;height:25px;padding: 5px; background: #EAF7FF; border-radius: 50%;"
                            class="CToWUd" data-bit="iit">
                        <div style="padding-left:10px;text-align:left">
                            <h5 style="margin:0;font-size:18px;color:#000;font-weight:400">Complaints &amp;
                                Suggestions</h5>
                            <h5 style="margin:0;font-size:18px;color:#009cff;font-weight:400"><a
                                    href="mailto:complaints@vmycards.com" target="_blank">Complaints@vmycards.com</a>
                            </h5>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align:center">
                    <div style="display:inline-flex;margin-bottom:20px">
                        <img src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/support-call.png?alt=media&token=689096b1-6b44-4d7d-ad1b-25e40566f86c" alt=""
                            style="text-align:center;width:25px;height:25px;padding: 5px; background: #EAF7FF; border-radius: 50%;"
                            class="CToWUd" data-bit="iit">
                        <div style="padding-left:10px;text-align:left">
                            <h5 style="margin:0;font-size:18px;color:#000;font-weight:400">Call: +1 (121) 253-542
                            </h5>
                            <h5 style="margin:0;font-size:18px;color:#009cff;font-weight:400">24*7</h5>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td style="background-color:#032140;padding-top:40px; padding-bottom:40px;text-align:center">
                    <img src="https://firebasestorage.googleapis.com/v0/b/vmycard-e1da0.appspot.com/o/white-logo.png?alt=media&token=5a82f551-8efd-4c60-b078-0c350e610218" class="CToWUd" data-bit="iit">
                    <h2
                        style="color:#fff;text-align:center;font-size:14px;font-style:normal;font-weight:400;margin:10px 0 5px">
                        Thank you for choosing VMycards to transform the way you connect. We <br /> look forward to
                        being a
                        part of your journey towards more efficient and <br /> effective networking.
                    </h2>
                </td>
            </tr>
            <tr>
                <td style="background-color:#fff;text-align:center; padding: 15px 0;">
                    <a href="#" style="color:#032140;text-decoration:none" target="_blank" data-saferedirecturl="">
                        www.vmycards.com
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="yj6qo"></div>
    <div class="adL">
    </div>
</div>

Testing Libraries

MERN Practical Explanation — Wed, 07 Feb 2024 12:01:50 +0000

Unit testing is a crucial practice in software development, including JavaScript. It involves testing individual units or components of your code in isolation to ensure they work as expected. Here's a basic overview of unit testing in JavaScript:

Testing Libraries:

There are several popular testing libraries and frameworks for JavaScript. Two of the most widely used ones are:

Jest:
- Developed by Facebook, Jest is a comprehensive testing framework for JavaScript. It's easy to set up and comes with built-in assertion libraries, mocking capabilities, and parallel test execution.

Example Jest test:

   // myFunction.js
   function add(a, b) {
     return a + b;
   }

   module.exports = add;

   // myFunction.test.js
   const add = require('./myFunction');

   test('adds 1 + 2 to equal 3', () => {
     expect(add(1, 2)).toBe(3);
   });

Mocha and Chai:
- Mocha is a flexible testing framework, and Chai is an assertion library often used with Mocha. They provide a powerful combination for testing JavaScript applications.

Example Mocha and Chai test:

   // myFunction.js
   function multiply(a, b) {
     return a * b;
   }

   module.exports = multiply;

   // myFunction.test.js
   const multiply = require('./myFunction');
   const { expect } = require('chai');

   describe('Multiply function', () => {
     it('should multiply 2 by 3 to equal 6', () => {
       expect(multiply(2, 3)).to.equal(6);
     });
   });

Basic Steps for Unit Testing:

Install Testing Framework:

Install Jest or Mocha and Chai using a package manager like npm:

 // For Jest
 npm install --save-dev jest

 // For Mocha and Chai
 npm install --save-dev mocha chai

Write Tests:
- Create test files alongside your source files, following a naming convention (e.g., myFunction.js and myFunction.test.js).
- Write test cases using the testing framework's syntax.
Run Tests:
- Execute the tests using the testing framework's command-line interface or by integrating testing into your build process.
- For Jest, you can run tests using the jest command.
- For Mocha, you can run tests with the mocha command.

Example Jest command:

   npx jest

Example Mocha command:

   npx mocha myFunction.test.js

Assertions:
- Use assertions to verify that the actual output of your code matches the expected output.

Mocking:

Both Jest and Mocha allow you to mock dependencies to isolate your tests further. Mocking is useful when you want to control the behavior of external dependencies during testing.

Continuous Integration (CI):

Consider integrating your unit tests into a continuous integration (CI) pipeline to automatically run tests whenever code changes are pushed.

Remember that writing good unit tests involves covering various scenarios, including edge cases and error conditions, to ensure the reliability of your code.

Client-side rendering (CSR) and server-side rendering (SSR)

MERN Practical Explanation — Wed, 07 Feb 2024 12:00:43 +0000

Client-side rendering (CSR) and server-side rendering (SSR) are two approaches used in web development to handle the generation and presentation of content on a website. They have different characteristics and implications for performance, user experience, and development workflows.

Client-Side Rendering (CSR):
- Definition: In CSR, the browser takes on the responsibility of rendering the web page. The server sends a minimal HTML document along with JavaScript, and the browser executes the JavaScript to fetch data and generate the DOM dynamically.
- Pros:
  - Faster initial page load: Only minimal HTML and JavaScript need to be transferred initially.
  - Good for dynamic, single-page applications (SPAs) where interactions happen within the page without full page reloads.
- Cons:
  - Slower time to content: The browser needs to download and execute JavaScript before rendering the content, which may result in a delay.
  - Poor SEO performance: Search engine crawlers may have difficulty indexing content that relies heavily on JavaScript.
Server-Side Rendering (SSR):
- Definition: With SSR, the server sends fully rendered HTML to the browser. The server executes the JavaScript, fetches data, and generates the HTML on the server side before sending it to the client.
- Pros:
  - Faster time to content: The browser receives pre-rendered HTML, reducing the time it takes to display content.
  - Better SEO performance: Search engines can easily index the content since it's present in the initial HTML response.
- Cons:
  - Slower initial page load: The entire HTML document, along with the data, needs to be sent from the server to the client, potentially resulting in a longer initial load time.
  - May be less suitable for highly dynamic, client-side interactions without additional optimizations.

Developers often use a hybrid approach, combining both CSR and SSR, to leverage the benefits of each method. This is known as "universal" or "isomorphic" rendering, where some parts of the page are rendered on the server, and others are handled on the client side. This approach aims to strike a balance between initial load performance and dynamic client-side interactions.

React.js Key Concepts

MERN Practical Explanation — Wed, 07 Feb 2024 11:59:20 +0000

Certainly! React.js is a popular JavaScript library for building user interfaces, developed and maintained by Facebook. Here's a brief overview:

What is React.js?

React.js, often referred to as React, is an open-source JavaScript library used for building user interfaces or UI components. It allows developers to create reusable UI components and build complex user interfaces efficiently.

Key Concepts:

Component-Based Architecture:
- React follows a component-based architecture, where UIs are divided into independent and reusable components. Components can have their own state and lifecycle methods.
Virtual DOM:
- React uses a virtual DOM (Document Object Model) to improve performance. Instead of directly manipulating the actual DOM, React creates a virtual representation of it in memory, making updates more efficient.
JSX (JavaScript XML):
- JSX is a syntax extension for JavaScript recommended by React. It allows you to write HTML-like code within JavaScript, making it easier to describe the UI structure. JSX gets compiled into JavaScript.
Unidirectional Data Flow:
- React follows a unidirectional data flow, meaning data changes in one direction—from parent components to child components. This makes it easier to understand how data is being passed and modified in an application.
State and Props:
- Components can have state, which represents their internal data. Props (short for properties) are used to pass data from a parent component to a child component.
Lifecycle Methods:
- React components have lifecycle methods (e.g., componentDidMount, componentDidUpdate, componentWillUnmount) that allow developers to perform actions at different stages of a component's existence.
React Router:
- React Router is a popular library for handling navigation in React applications. It allows for the creation of single-page applications with multiple views.

Why Use React.js?

Declarative Syntax: React uses a declarative syntax, making it easier to understand and debug code.
Efficient Updates: Through the virtual DOM, React optimizes updates and enhances application performance.
Component Reusability: Components can be reused, promoting a modular and maintainable codebase.
Community and Ecosystem: React has a large and active community, and it's supported by a vast ecosystem of libraries and tools.

Getting Started:

To start using React, you typically set up a development environment using tools like Create React App or configure a build system like Webpack. React can be integrated with other libraries and frameworks as needed.

Here's a simple example of a React component in JSX:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, React!</div>;
  }
}

export default MyComponent;

This is just a brief introduction; React has many more features and capabilities. If you have specific questions or if there's a particular aspect of React you'd like to know more about, feel free to ask!

useEffect Practicle

MERN Practical Explanation — Wed, 07 Feb 2024 05:06:00 +0000

Certainly! I've added more detailed comments to help explain each section of the useEffect function:

useEffect(() => {
  // Check if both selectedDateTo and selectedDateFrom are not empty
  if (selectedDateTo !== "" && selectedDateFrom !== "") {
    // Check if selectedDateTo is less than selectedDateFrom
    if (selectedDateTo < selectedDateFrom) {
      // Display a warning toast if the condition is true
      toast.warning("To Date should be equal to or greater than From Date", {
        position: toast.POSITION.TOP_RIGHT,
      });
      // Return early to prevent further execution
      return;
    }
  }

  // Check if All Status is selected and no date range is specified
  if (
    activeBusinessStatus === "All Status" &&
    !selectedDateFrom &&
    !selectedDateTo
  ) {
    // If true, set the business list data to the original tempData
    setBusinesslistData(tempData);
  } else {
    // Initialize filteredData with the original tempData
    let filteredData = tempData;

    // Check if a specific business status is selected
    if (activeBusinessStatus !== "" && activeBusinessStatus !== "All Status") {
      // Filter the data based on the selected status
      filteredData = filteredData.filter(
        (el) => el?.status === activeBusinessStatus
      );
    }

    // Check if a date range is specified
    if (selectedDateFrom && selectedDateTo) {
      // Output filteredData to the console for debugging
      console.log(filteredData, "filteredData fetch admin");

      // Filter the data based on the specified date range
      filteredData = filteredData.filter((el) => {
        const date = new Date(el.created_at);
        return date >= selectedDateFrom && date <= selectedDateTo;
      });
    }

    // Set the filtered data to the component state
    setBusinesslistData(filteredData);
  }
}, [activeBusinessStatus, selectedDateFrom, selectedDateTo]);

These comments provide a detailed explanation of each block and condition within the useEffect function.

Certainly! Let's break down the key concepts in simpler terms:

useEffect:
- In simple terms, useEffect is a hook in React that allows you to perform side effects in your functional components.
- Side effects are operations or tasks that happen after the component renders, like data fetching, updating the DOM, or interacting with external services.
filter:
- The filter method is a way to sift through a collection of items (like an array) and pick out only the items that meet a certain condition.
- In your code, filter is used to select specific items from the tempData array based on conditions related to business status and date.
Date:
- The Date object in JavaScript is used to work with dates and times.
- In your code, the Date object is used to convert the created_at property of each business item into a date object. This allows you to compare these dates and filter items based on a date range.
[activeBusinessStatus, selectedDateFrom, selectedDateTo]:
- This is the dependency array for the useEffect. It tells React to re-run the useEffect whenever any of these values (activeBusinessStatus, selectedDateFrom, selectedDateTo) change.
- In your code, it ensures that the filtering logic is applied whenever there's a change in the business status or the selected date range. It helps keep your component in sync with the latest data.

In simpler terms, the useEffect with filter and Date is like a smart assistant that keeps an eye on changes in business status and selected dates. Whenever there's a change, it sifts through the business data and updates what you see on the screen accordingly. The dependency array is like a notification system that says, "Hey, pay attention to these specific things, and when they change, do your job!"

Axios Filter Map live exampe

MERN Practical Explanation — Wed, 07 Feb 2024 04:45:46 +0000

Certainly! Let's break down the FetchSlots function and explain its structure:

const FetchSlots = () => {
    try {
        // Step 1: Prepare request object with business_id set to 0
        let obj = {
            business_id: 0,
        };

        // Step 2: Make a POST request using axios
        axios
            .post(`${baseUrl}api/v1/appointment/FetchSlots`, obj, {
                headers: {
                    _token: userData?.token,
                },
            })
            .then((response) => {
                // Step 3: Extract unique business titles from response data
                let tempArr = response?.data?.data?.records?.filter((el) => el?.businessTitle !== '' && el?.businessTitle !== undefined)
                    .map((el) => el.businessTitle);

                let tempUniqueArr = new Set(tempArr);
                tempUniqueArr = [...tempUniqueArr];

                // Step 4: Set unique business titles to state variable 'setBusinessData'
                setBusinessData(tempUniqueArr);

                // Step 5: Extract and format relevant data from response
                let newDataArray = [];
                response?.data?.data?.records.forEach(rs => {
                    rs?.slots?.forEach(rss => {
                        if (rss?.startDate !== '' && rss?.endDate !== '') {
                            let newData = {
                                id: `${rs?.id}_${rs?.business_id}_${rss?.formCount}`,
                                business_id: rs?.business_id,
                                businessTitle: rs?.businessTitle,
                                formCount: rss?.formCount,
                                startDate: rss?.startDate,
                                endDate: rss?.endDate,
                                status: rss?.status || 'NA',
                            };
                            newDataArray.push(newData);
                        }
                    });
                });

                // Step 6: Set formatted data to state variables 'setTempData' and 'setData'
                setTempData(newDataArray);
                setData(newDataArray);
                setIsLoading(false);
            })
            .catch((error) => {
                // Step 7: Handle errors
                setIsLoading(false);
            });
    } catch (err) {
        // Step 8: Handle any synchronous errors
        console.log(err, "erroror");
    }
};

Explanation:

Preparing Request Object: The function starts by creating an object obj with business_id set to 0.
Making POST Request: Axios is used to make a POST request to a specific API endpoint (${baseUrl}api/v1/appointment/FetchSlots). The request includes the obj data and a header with the authorization token (_token) from userData.
Handling Response: In the .then block, the function processes the response data.

a. Extracting Unique Business Titles: It filters and maps business titles, removing empty or undefined values, and then uses a Set to get unique values.

b. Setting Business Data to State: The unique business titles are set to the state variable setBusinessData.

c. Formatting Data: The function extracts relevant data from the response, including id, business_id, businessTitle, formCount, startDate, endDate, and status. This data is formatted into a new array newDataArray.

d. Setting State Variables: The formatted data is set to state variables setTempData and setData.

Handling Errors: In the .catch block, any errors that occur during the HTTP request are handled, and the loading state (setIsLoading) is updated accordingly.
Handling Synchronous Errors: Any synchronous errors (outside the axios block) are caught in the try-catch block, and an error message is logged.

Note: Ensure that the variables like baseUrl, axios, setBusinessData, setTempData, setData, and setIsLoading are defined and accessible in the scope where this function is used.

Certainly! Let's break down and explain the fetchApppointent function:

const fetchApppointent = (page) => {
    try {
        // Step 1: Log a message indicating the function is being executed
        console.log("In fetchApppointent api");

        // Step 2: Prepare the request object with business_id and filters
        let obj = {
            business_id: businessObjData?.id || "2",
        };

        // Step 3: Format start and end dates if available
        const formattedStartDate = selectedDateFrom ? format(new Date(selectedDateFrom), 'yyyy-MM-dd') : null;
        const formattedEndDate = selectedDateTo ? format(new Date(selectedDateTo), 'yyyy-MM-dd') : null;

        // Step 4: Prepare filters object based on selected dates and active business name
        const filters = {
            startDate: formattedStartDate,
            endDate: formattedEndDate,
            business: activeBusinessName === "All Business" ? null : activeBusinessName,
        };

        // Step 5: Make a POST request using axios to fetch appointments with pagination
        axios
            .post(`${baseUrl}api/v1/appointment/FetchAppointments_withpagination?page=${page}&limit=${rowsPerPage}`, { ...obj, ...filters }, {
                headers: {
                    _token: userData?.token,
                },
                withCredentials: true,
            })
            .then((response) => {
                // Step 6: Extract unique business titles from response data
                let tempArr = response?.data?.data?.records?.map(
                    (el) => el?.businessTitle
                );
                let tempUniqueArr = new Set(tempArr);
                tempUniqueArr = [...tempUniqueArr];

                // Step 7: Set unique business titles to state variable 'setBusinessData'
                setBusinessData(tempUniqueArr);

                // Step 8: Sort and set the response records based on created_at date
                let arr = response?.data?.data?.records;
                arr = arr.sort(
                    (x, y) => new Date(y?.created_at) - new Date(x?.created_at)
                );

                // Step 9: Set the sorted data to state variables 'setTempData' and 'setData'
                setTempData(arr);
                setData(arr);

                // Step 10: Set total rows for pagination
                setPaginationTotalRows(response?.data?.pagination?.totalCount);

                // Step 11: Log the total count of appointments for debugging
                console.log("ttl ap", response?.data?.pagination?.totalCount);

                // Step 12: Set loading state to false
                setIsLoading(false);
            })
            .catch((error) => {
                // Step 13: Handle errors and set loading state to false
                setIsLoading(false);
            });
    } catch (err) {
        // Step 14: Handle any synchronous errors and log an error message
        console.log(err, "erroror");
    }
};

Explanation:

Logging Message: The function starts by logging a message to the console to indicate that it is being executed.
Preparing Request Object: The function creates an object obj with business_id based on the value of businessObjData?.id or a default value of "2".
Formatting Dates: The selected start and end dates are formatted using the format function (assuming it's from a date formatting library, possibly date-fns).
Preparing Filters Object: The function creates a filters object based on the formatted start and end dates and the active business name.
Making POST Request: Axios is used to make a POST request to a specific API endpoint (${baseUrl}api/v1/appointment/FetchAppointments_withpagination). The request includes the merged obj and filters objects, and it includes headers and credentials information.
Handling Response: In the .then block, the function processes the response data.

a. Extracting Unique Business Titles: Unique business titles are extracted from the response data.

b. Setting Business Data to State: Unique business titles are set to the state variable setBusinessData.

c. Sorting Data: The response records are sorted based on the created_at date in descending order.

d. Setting State Variables: The sorted data is set to state variables setTempData and setData.

e. Setting Total Rows for Pagination: The total count of appointments for pagination is extracted and set to the state variable setPaginationTotalRows.

f. Logging Total Count: The total count of appointments is logged for debugging.

g. Setting Loading State: The loading state is set to false.

Handling Errors: In the .catch block, any errors that occur during the HTTP request are handled, and the loading state (setIsLoading) is updated accordingly.
Handling Synchronous Errors: Any synchronous errors (outside the axios block) are caught in the try-catch block, and an error message is logged.

Note: Ensure that the variables like baseUrl, axios, setBusinessData, setTempData, setData, setPaginationTotalRows, setIsLoading, businessObjData, selectedDateFrom, selectedDateTo, activeBusinessName, userData, rowsPerPage, and format are defined and accessible in the scope where this function is used.

Filter use in React

MERN Practical Explanation — Wed, 07 Feb 2024 04:41:03 +0000

  const data = [2, 3, 5, 4, 6, 1, 7, 8, 9];

  const filteredData = data.filter((item) => {
    if (!selectedCategory) {
      // If no category is selected, include all items
      return true;
    } else if (selectedCategory === "Salon" && (item === 5 || item === 7 || item === 8 || item === 9)) {
      return true;
    } else if (selectedCategory === "Contructor" && (item === 1 )) {
      return true;
    } else if (selectedCategory === "Doctor" && (item === 2 || item === 4)) {
      return true;
    } else if (selectedCategory === "Teacher" && (item === 3 || item === 6)) {
      return true;
    }
    return false;
  });

  const handleToggle = (event, item) => {
    event.preventDefault();
    if (expandedItems.includes(item)) {
      setExpandedItems(
        expandedItems.filter((expandedItem) => expandedItem !== item)
      );
    } else {
      setExpandedItems([item]);
    }
  };

const handleEditUser = (id) => {
    if (usersData?.length > 0) {
      const editUserData = usersData.filter((val) => val?.id == id);
      setUserId(id);
      setUserCreateData({
        name: editUserData[0]?.name,
        email: editUserData[0]?.email,
        // password: "",
        roleId: editUserData[0]?.role_id,
      });
    } else {
      alert("users not available");
    }


 const searchByRoleId = () => {
    setUsersData(usersDataApi);
    if (searchOption != "-1" && searchInput == "") {
      const newUsersData = usersDataApi.filter(
        (item) => item?.role_id == searchOption
      );
      setUsersData(newUsersData);
      // item?.role_name.toLowerCase().includes(searchInput?.toLowerCase())
    } else if (searchInput != "" && searchOption == "-1") {
      const newUsersData = usersDataApi.filter((item) =>
        item?.name.toLowerCase().includes(searchInput?.toLowerCase())
      );
      setUsersData(newUsersData);
    } else if (searchInput != "" && searchOption != "1") {
      const newUsersData = usersDataApi.filter(
        (item) => item?.role_id == searchOption
      );
      const newUsersData2 = newUsersData.filter((item) =>
        item?.name.toLowerCase().includes(searchInput?.toLowerCase())
      );
      setUsersData(newUsersData2);
    } else {
      setUsersData(usersDataApi);
    }
  };

Data Types

MERN Practical Explanation — Wed, 07 Feb 2024 04:34:01 +0000

JavaScript Data Types
JavaScript provides different data types to hold different types of Values.
There are two types of data types in Java Script:

Primitive data type: it means ,it represent single value
Non- primitive data type: an object which represents a collection of values.

Var a = 40://holding number
var b="Rahul"; // holding String

JavaScript Primitive data types

String: represents Sequence of characters e.g. "hello"

Number: represents numeric Values e.g. 100

Boolean Represents boolean Value either false or true
Underfined: represents undefined Value
Null: represents null i.e. no value at all

1:)Primitive: this value are immutable. this are pass by value.means To store single values.e.g.String,Number,Boolean,Undefined,Null.

Primitive types: Primitive data types can store only a single value.

typeof of primitive types :
typeof "John Doe" // Returns "string"
typeof 3.14 // Returns "number"
typeof true // Returns "boolean"
typeof 234567890123456789012345678901234567890n // Returns bigint
typeof undefined // Returns "undefined"
typeof null // Returns "object" (kind of a bug in JavaScript)
typeof Symbol('symbol') // Returns Symbol

In JavaScript, when we pass a primitive data type (such as Number, String, Boolean, Undefined, Null, or Symbol) to a function, it is passed by value. This means that a copy of the value is created and passed to the function, so that the original value remains unchanged.
For example:
let x = 10;

function changeValue(num) {
num = 20;
}

changeValue(x);
console.log(x); // Output: 10

In this example, the changeValue function takes a num parameter, which is a primitive data type (Number). When we call changeValue(x), a copy of the value of x (10) is passed to the function. Within the function, we assign a new value of 20 to num. However, this change does not affect the original value of x, which remains 10.
This is because primitive data types are passed by value in JavaScript, meaning that a copy of the value is created and passed to the function, so that the original value remains unchanged

2:) Non Primitive
(To store multiple values)->( value are mutable) (pass by reference):Object,Array.

Non-primitive types
To store multiple and complex values, non-primitive data types are used.

In JavaScript, when we pass an object (including arrays and functions) to a function, it is passed by reference. This means that a reference to the object, is passed to the function.
For example:
let person = { name: "John Doe", age: 26 };

function changeName(obj) {
obj.name = "Jane Doe";
}

changeName(person);
console.log(person.name); // Output: "Jane Doe"
In this example, the changeName function takes an obj parameter, which is an object. When we call changeName(person), a reference to the person object is passed to the function. Within the function, we change the name property of the object to "Jane Doe".
Since objects are passed by reference in JavaScript, this change is reflected in the original person object, so that its name property is now "Jane Doe".
This is because objects in JavaScript are passed by reference, meaning that a reference to the object, rather than a copy of its value, is passed to the function. Any changes made to the object within the function are therefore reflected in the original object, as it is the same object.

11) The keyword is a reference variable that refers to the current object.For example:

13)The parseInt() function is used to convert numbers between different bases.
parseInt() takes the string to be converted as its first parameter.
The second parameter is the base of the given string.

Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values.

Why we use await ?

Ans-Await is used for calling an async function and waits for it to resolve or reject .
await blocks the execution of the code within the async function in which it is located. Async/Await makes it easier to write promises.
The keyword 'async' before a function makes the function return a promise, always. And the keyword await is used inside async functions, which makes the program wait until the Promise resolves.
What is mutable?

Ans-A mutable object is an object whose state can be modified after it is created.

Immutables are the objects whose state cannot be changed once it is created. Strings and Numbers are Immutable.

let x= {}, y = {name:"Ronny"},z = {name:"John"};

x[y] = {name:"Vivek"};
x[z] = {name:"Akki"};

console.log(x[y]);
In JavaScript, when an object is used as a key in another object, it is automatically converted to a string using the toString() method. In this case, both y and z are objects, so they will be converted to strings and used as keys in the x object.
Here's what's happening in the code:
let x = {}, y = {name:"Ronny"}, z = {name:"John"};
x[y] = {name:"Vivek"}; // Set x["[object Object]"] = {name:"Vivek"}
x[z] = {name:"Akki"}; // Set x["[object Object]"] = {name:"Akki"}
console.log(x[y]); // Logs {name:"Akki"}
In this code, the x object is being assigned two properties: x[y] and x[z]. Since y and z are both objects, they are both converted to the string "[object Object]" and used as keys in the x object.
The first assignment sets the x["[object Object]"] property to {name:"Vivek"}. The second assignment overwrites the x["[object Object]"] property with {name:"Akki"}.
When console.log(x[y]) is called, it retrieves the value of x["[object Object]"], which is {name:"Akki"} because it was the last value assigned to that key.

Pundarikaksha Mishra6:04 PM
let a = 0;
let b = false;
console.log((a == b));
console.log((a === b));

what is concurrent in node js
Concurrency is an essential feature of Node. js that enables it to handle large numbers of I/O operations simultaneously, without blocking the execution thread. This concurrency model allows Node. js to handle many requests concurrently, resulting in improved application performance

JavaScript Operators
JavaScript Operators are symbols that are used to perform Operations on operands.

JavaScript includes following categories of operators.

Arithmetic Operators: use to perform arithmetic operation on the operands.
E. g:

Operator Description Example

Addition 10+20 = 30
Subtraction 20-10 = 10
Multiplication 10*20 = 200 / Division 20/10 = 2 % Modulus (Remainder) 20%10 = 0 ++ Increment var a=10; a++; Now a = 11 -- Decrement var a=10; a--; Now a = 9

Comparison Operators:

The JavaScript comparison operator compares the two operands. The comparison operators are as follows:
Operator Description Example
== Is equal to 10==20 = false
=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false

Greater than 20>10 = true
= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false

Logical Operators:

The following operators are known as JavaScript logical operators.
Operator Description Example
&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true

Assignment Operators:
The following operators are known as JavaScript assignment operators.
Operator Description Example
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
= Multiply and assign var a=10; a=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0

Java Script Special Operators
The following Operators are known as JavaScript Special operators.

(?:) : Conditional Operator returns Value based on
the Condition. It is like if- else. Comma Operator allows multiple expressions to be evaluated as single statement.

Delete: Delete Operator deletes a property from the object.

In: In Operator checks if object has the given property.

Instanceof: Checks if the object is an instance of given type

New: Creates an instance

Typeof: Checks the type of object .

Void : it discards the expression's return value.
Yield: checks what is returned in a generator by the generator's interator.

JavaScript

MERN Practical Explanation — Fri, 02 Feb 2024 13:49:29 +0000

const a = 10; function f() { var/let a = 9 console.log(a) } f();//9

It seems there's a small error in your code. The correct code snippet would be:

Copy code
const a = 10;

function f() {
    let a = 9;
    console.log(a);
}

f(); // Output: 9
In this corrected code:

The constant variable a is declared outside the function f with a value of 10.
Inside the function f, a new variable a is declared using the let keyword, and it has a value of 9.
The console.log(a) statement inside the function will print the value of the local variable a, which is 9.
When you call the function f() at the end, it prints 9 to the console.
If you intended to use var instead of let, the corrected code would be:

Copy code
const a = 10;

function f() {
    var a = 9;
    console.log(a);
}

f(); // Output: 9

Both versions are valid, but using let is generally recommended for declaring block-scoped variables in modern JavaScript.

JavaScript Errors

MERN Practical Explanation — Fri, 02 Feb 2024 13:39:38 +0000

JavaScript Comment
The JavaScript comments are meaningful way to deliver message. It is used to add information about the code, Warnings or Suggestions.

So that end user can easily interpret(understand) the code.
The Java Script comment is ignored by the JavaScript engine i.e. embedded in the browser.

Advantages of JavaScript Comments.

There are mainly two advantages of JS comments.

To make Code easy to understand.
To avoid the unnecessary code.

JS variables

Variable can store some information, we can use that information later
We can change that information later.

Rules for naming the variables:
Name must start with a letter (a to z ), underscore or dollar sign
After first letter we can use digit (0 to 9)
JavaScript variable case sensitive
Cannot start with numbers :

Eg. 1value (invalid)

We can only use dollar symbol or (under score) to define the variable

E.g. _value  OR $value (both valid)

Js local variable : it is declared inside block or function .it is accessible within function or block only.

Js global variable :it is accessible from any function. A variable that declared outside the function or declared with window object is known as global variable.

*var : The var is the oldest keyword to declare a variable in *
JavaScript.
Scope: Global scoped or function scoped. The scope of the var keyword is the global or function scope. It means variables defined outside the function can be accessed globally, and variables defined inside a particular function can be accessed within the function.

Example 1: Variable ‘a’ is declared globally. So, the scope of the variable ‘a’ is global, and it can be accessible everywhere in the program. The output shown is in the console.

<script>
    var a = 10
        function f(){
            console.log(a)
        }
    f();
    console.log(a);
</script>
Output: 

10
10

**Example 2: **The variable ‘a’ is declared inside the function. If the user tries to access it outside the function, it will display the error. Users can declare the 2 variables with the same name using the var keyword. Also, the user can reassign the value into the var variable. The output shown in the console.

<script>
    function f() {
         // It can be accessible any
        // where within this function
        var a = 10;
        console.log(a)
    }
    f(); 
    // A cannot be accessible outside of function
    console.log(a);
</script>
Output:

10
ReferenceError: a is not defined

Example 3: we can re-declare variable using var and we can update var variable. The output is shown in the console.

<script> 
    var a = 10
       // User can re-declare
    // variable using var
    var a = 8
     // User can update var variable
    a = 7
</script>
Output:
7

**example 4: **If users use the var variable before the declaration, it initializes with the undefined value. The output is shown in the console.

<script>
    console.log(a);
    var a = 10; 
<script>g

============================================================
let keyword in JavaScript: The let keyword is an improved version of the var keyword.

Scope: block scoped: The scope of a let variable is only block scoped. It can’t be accessible outside the particular block ({block}). Let’s see the below example.

Example 1: The output is shown in the console.

<script>
    let a = 10;
    function f() {
        let b = 9
        console.log(b);
        console.log(a);
    }
    f();
</script>
Output:

9
10
///////////////////////////////////////////////////////////////////Var 
    {// this is a block 
       var a = 10;
        console.log(a)
    }
   console.log(a)/////
> 10
> 10
/////////////////////////////////////////////////////00

Example 2: The code returns an error because we are accessing the let variable outside the function block. The output is shown in the console.

<script>
    let a = 10;
    function f() {
        if (true) {
            let b = 9

            // It prints 9
            console.log(b);
        } 
        // It gives error as it
        // defined in if block
        console.log(b);
    }
    f()
    console.log(a)    // It prints 10
</script>
Output:
9
ReferenceError: b is not defined

Example 3: we cannot re-declare the variable defined with the let keyword but can update it.

<script> 
    let a = 10 
    // It is not allowed
    let a = 10

    // It is allowed
    a = 4
</script>
Output:

Uncaught SyntaxError: Identifier 'a' has already been declared

Example 4: we can declare the variable with the same name in different blocks using the let keyword.

<script>
  let a = 10
  if (true) {
    let a=9
    console.log(a) // It prints 9
  }
  console.log(a) // It prints 10t5re
</script>
Output:

9 
10

Example 5: If we use the let variable before the declaration, it does not initialize with undefined just like a var variable and return an error.

<script>
    console.log(a);
    let a = 10;
</script>
Output:

Uncaught ReferenceError: Cannot access 'a' before initialization

const keyword in JavaScript: The const keyword has all the properties that are the same as the let keyword, except the user cannot update it.

Scope: block scoped: When users declare a const variable, they need to initialize it, otherwise, it returns an error. The user cannot update the const variable once it is declared.

Example 1: We are changing the value of the const variable so that it returns an error. The output is shown in the console.

<script>
    const a = 10;
    function f() {
        a = 9
[]7
        console.log(a)
    }
    f();
</script>
Output:
a=9
TypeError:Assignment to constant variable.

////////////////////
  const a = 10;
    function f() {
       const a = 9
        console.log(a)
    }
    f();//>9
///////////////////////////////////

const a = 10;
    function f() {
       var/let a = 9
        console.log(a)
    }
    f();//9
////////////////////////////////////////

Example 2: Users cannot change the properties of the const object, but they can change the value of properties of the const object.

<script>
    const a = {
        prop1: 10,
        prop2: 9
    }

    // It is allowed
    a.prop1 = 3

    // It is not allowed
    a = {
        b: 10,
        prop2: 9
    }
</script>
Output:

Uncaught SyntaxError:Unexpected identifier

JavaScript Question

MERN Practical Explanation — Fri, 02 Feb 2024 13:31:22 +0000

Q1 What is JavaScript:

JavaScript is used to create client-side dynamic pages.
JavaScript is object-based scripting language which is lightweight and cross-platform.
JavaScript is an object-based scripting language, meaning it uses objects to represent data and functionality, rather than using simple variables and functions. This makes it easier to write and manage complex applications.
JavaScript is considered lightweight because it is easy to learn and its syntax is simple, which means it is well-suited for small to medium-sized web applications.
It is also cross-platform, which means it can be run on any device that has a web browser, making it a popular choice for web development.js is not compiled language .

A programming language is a type of computer language that consists of a set of instructions for communicating with computers.

A scripting language is a kind of programming language that is used to automate the execution of operations in a runtime environment.

A script or scripting language is a computer language that does not need
the compilation step and is rather interpreted one by one at runtime.

the programming languages that are compiled first before running, scripting languages do not compile the file and execute the file without being compiled.

Scripting languages are used on the server-side as well as the client-side and are also widely used in web applications. The languages like JavaScript, Python, PHP, and Perl are examples of server-side scripting languages, and JavaScript, jQuery, AJAX are examples of client-side scripting languages.

What is meant by interpreted programming language?
An interpreted language is a programming language whose implementations execute instructions directly and freely,
without previously compiling a program into machine-language
instructions.

What is a Typed language?
Typed Language is in which the values are associated with values and not with variables. It is of two types:
Dynamically: in this, the variable can hold multiple types; like in JavaScript, a variable can take number, chars ,object.
Statically: in this, the variable can hold only one type, like in Java a variable declared of string can take only set of characters and nothing else.

JavaScript follow synchronous pattern

JavaScript code is a single thread, which means that code can only do one task at a time.

A single-threaded process is the execution of programmed instructions in a single sequence.

. Dynamic Typing
JavaScript supports dynamic typing which means types of the variable are defined based on the stored value. For example, if we declare a variable x then we can store either a string or a Number type value or an array or an object. This is known as dynamic typing.

Is JavaScript a case-sensitive language?
Yes, JavaScript is a case sensitive language. The language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

Since JavaScript is a loosely(dynamically) typed language, variables in JS are not associated with any type. A variable can hold the value of any data type.
For example, a variable which is assigned a number type can be converted to a string type:
var a = 23;
var a = "Hello World!";

2) Advantages:/feature.

All popular web browser support JavaScript as they provided built in execution environment.
js follow the syntax and structure of the c programming language. Thus it is a structured programming language

JavaScript is a lightweight scripting language because it is made for data handling at the browser only.
Server interaction is less
Feedback to the visitors is immediate
Interactivity is high
Interfaces are rich
Speed. Client-side JavaScript is very fast because it can be run immediately
within the client-side browser.
The biggest advantage of JavaScript having a ability
to support all modern browsers and produce an equivalent result
Display date and time
Dynamic drop down menus.

3) Disadvantage:
No support for multithreading
No support for multiprocessing
Reading and writing of files is not allowed

What is the difference between null & undefined?
Undefined means a variable has been declared but has not yet been assigned a value. On the other hand,
null is an assignment value. It can be assigned to a variable as a representation of no value. Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

Storing a value in a variable is called variable initialization.

What are undeclared and undefined variables?

Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered.

Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

Types of functions: Named and Anonymous function in JavaScript???
In JavaScript, there are two types of functions: named functions and anonymous functions.
A named function is a function that has a name. It can be defined using the function keyword followed by the function name, a set of parentheses, and a set of curly braces that enclose the function's body.

Here's an example of a named function:

function addNumbers(a, b) {
  return a + b;
}

An anonymous function is a function that does not have a name. It can be defined using the function keyword, followed by a set of parentheses and a set of curly braces that enclose the function's body, without any function name. Anonymous functions are often used as callback functions, as function arguments or in immediately invoked function expressions (IIFE).

Here's an example of an anonymous function:

let sum = function(a, b) {
  return a + b;
}

Note that in the example above, the function is assigned to a variable (sum), so it can be invoked later by calling that variable as a function. Anonymous functions can also be immediately invoked by enclosing the function definition in parentheses followed by an additional set of parentheses:


(function() {
  console.log("This is an immediately invoked anonymous function.");
})();

in this case, the function is defined and invoked immediately without being assigned to a variable.
Interactivity is high in JavaScript .. explain in simple

ChatGPT
In simple terms, "interactivity" refers to how much a user can interact with a web page or application. JavaScript is a programming language that is commonly used in web development to add interactivity to websites.
With JavaScript, we can create interactive features such as drop-down menus, pop-up windows, sliders, animations, and more. These features can respond to user actions such as clicks, mouse movements, or keyboard inputs, allowing users to interact with the website and its content in meaningful ways.
For example, with JavaScript, a user can click a button to show or hide content on a web page, or drag and drop items to rearrange them. JavaScript can also be used to validate form inputs, perform calculations, and even create interactive games.
Overall, JavaScript's ability to add interactivity to web pages is a key reason why it is such a popular programming language for web development.
JavaScript is a programming language .explain
ChatGPT
Yes, JavaScript is a programming language that is used primarily for web development, but can also be used for other purposes such as server-side programming, desktop applications, and mobile app development.

One of the main uses of JavaScript is to create dynamic and interactive websites. JavaScript can be used to manipulate the content and styling of a web page, add interactivity through event handling, and communicate with web servers to update content without requiring a full page refresh.
Overall, JavaScript is a versatile programming language that is widely used for a variety of applications, and its popularity and importance in web development continues to grow.