Axios Filter Map live exampe
Tags: webdev, javascript, beginners, programming
Published: 2024-02-07 04:45:46

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

```javascript
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:

1. **Preparing Request Object**: The function starts by creating an object `obj` with `business_id` set to 0.

2. **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`.

3. **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`.

4. **Handling Errors**: In the `.catch` block, any errors that occur during the HTTP request are handled, and the loading state (`setIsLoading`) is updated accordingly.

5. **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:

```javascript
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:

1. **Logging Message**: The function starts by logging a message to the console to indicate that it is being executed.

2. **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".

3. **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`).

4. **Preparing Filters Object**: The function creates a `filters` object based on the formatted start and end dates and the active business name.

5. **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.

6. **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.

7. **Handling Errors**: In the `.catch` block, any errors that occur during the HTTP request are handled, and the loading state (`setIsLoading`) is updated accordingly.

8. **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.