@visns-studio/visns-components 5.7.0 → 5.7.1

package/package.json

@@ -2,8 +2,6 @@
     "dependencies": {
         "@emotion/is-prop-valid": "^1.3.1",
         "@fontsource/barlow": "^5.2.5",
-        "@inovua/reactdatagrid-community": "^5.10.2",
-        "@inovua/reactdatagrid-enterprise": "^5.10.2",
         "@nivo/bar": "^0.88.0",
         "@nivo/core": "^0.88.0",
         "@nivo/line": "^0.88.0",
@@ -16,7 +14,6 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.9.0",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
         "fabric": "^6.6.4",
@@ -83,7 +80,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.7.0",
+    "version": "5.7.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import numeral from 'numeral';
@@ -12,6 +11,7 @@ import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { toast } from 'react-toastify';
 import Toggle from 'react-toggle';
+import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
     Backspace,
@@ -81,7 +81,7 @@ const loadData = async (
     }
 
     try {
-        const response = await axios.post(url, params);
+        const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
         return { data, count: total };
     } catch (error) {

package/src/components/crm/Autocomplete.jsx

@@ -1,10 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect, useCallback, useMemo, memo } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
 import styles from './styles/Autocomplete.module.scss';
+import fetchUtil from '../../utils/fetchUtil';
 
-const VisnsAutocomplete = (props) => {
+// Create the debounced function outside the component to prevent recreation
+const createDebouncedSearch = (fn) =>
+    AwesomeDebouncePromise(fn, 500, {
+        key: (id) => id,
+    });
+
+const VisnsAutocomplete = memo((props) => {
     const {
         api,
         country,
@@ -15,160 +21,188 @@ const VisnsAutocomplete = (props) => {
         setFormData,
         style,
     } = props;
+
     const [search, setSearch] = useState('');
     const [results, setResults] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [overwrite, setOverwrite] = useState(false);
 
-    const performSearch = (id, value) => {
-        if (id > 0) {
-            if (value === '') {
-                setResults([]);
-                setIsLoading(false);
-            } else {
-                let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
+    // Memoize URL building logic to avoid recalculations
+    const buildSearchUrl = useCallback(
+        (value) => {
+            if (!value || !api) return null;
 
-                if (country) {
-                    url += `&country=${country}`;
-                }
+            let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
 
-                if (mapbox) {
-                    if (mapbox.proximity) {
-                        url += `&proximity=${mapbox.proximity}`;
-                    }
+            if (country) {
+                url += `&country=${country}`;
+            }
 
-                    if (mapbox.bbox) {
-                        url += `&bbox=${mapbox.bbox}`;
-                    }
+            if (mapbox) {
+                if (mapbox.proximity) {
+                    url += `&proximity=${mapbox.proximity}`;
                 }
 
-                axios
-                    .get(url)
-                    .then((response) => {
-                        setResults(response.data.features);
-                        setIsLoading(false);
-                    })
-                    .catch(function (error) {
-                        console.log(error);
-                    });
+                if (mapbox.bbox) {
+                    url += `&bbox=${mapbox.bbox}`;
+                }
             }
-        }
-    };
 
-    const handleSearchChange = async (e) => {
-        if (e) {
-            setSearch(e.target.value);
+            return url;
+        },
+        [api, country, mapbox]
+    );
+
+    const performSearch = useCallback(
+        (id, value) => {
+            if (id <= 0 || !value) {
+                setResults([]);
+                setIsLoading(false);
+                return;
+            }
+
+            const url = buildSearchUrl(value);
+            if (!url) return;
+
+            fetchUtil
+                .get(url)
+                .then((response) => {
+                    setResults(response.data.features || []);
+                    setIsLoading(false);
+                })
+                .catch((error) => {
+                    console.log(error);
+                    setIsLoading(false);
+                });
+        },
+        [buildSearchUrl]
+    );
+
+    // Create the debounced search function using our memoized performSearch
+    const performSearchDebounced = useMemo(
+        () => createDebouncedSearch(performSearch),
+        [performSearch]
+    );
+
+    const handleSearchChange = useCallback(
+        async (e) => {
+            if (!e) return;
+
+            const newValue = e.target.value;
+            setSearch(newValue);
             setFormData((prevState) => ({
                 ...prevState,
-                [field]: e.target.value,
+                [field]: newValue,
             }));
 
-            if (overwrite === false) {
+            if (!overwrite) {
                 setIsLoading(true);
+                await performSearchDebounced(1, newValue);
             }
+        },
+        [field, overwrite, performSearchDebounced, setFormData]
+    );
 
-            if (overwrite === false) {
-                await performSearchDebounced(1, e.target.value);
-            }
-        }
-    };
-
-    const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
-        key: (id, value) => id,
-    });
+    const handleItemClicked = useCallback(
+        (place) => {
+            const address = place.address || '';
+            const text = place.text || '';
+            const search = address && text ? `${address} ${text}` : text;
 
-    const handleItemClicked = (place) => {
-        const address =
-            place.address !== undefined && place.address !== null
-                ? place.address
-                : '';
-        const text =
-            place.text !== undefined && place.text !== null ? place.text : '';
-
-        const search = address && text ? `${address} ${text}` : text;
-        setSearch(search);
-        setResults([]);
-        onSelect(place, field);
-    };
-
-    const handleOverwrite = () => {
-        if (overwrite === false) {
-            setOverwrite(true);
+            setSearch(search);
             setResults([]);
-        } else {
-            setOverwrite(false);
-        }
-    };
+            onSelect(place, field);
+        },
+        [field, onSelect]
+    );
 
-    useEffect(() => {
-        if (overwrite === false) {
-            if (search !== '') {
-                performSearch();
+    const handleOverwrite = useCallback(() => {
+        setOverwrite((prevState) => {
+            if (!prevState) {
+                setResults([]);
             }
+            return !prevState;
+        });
+    }, []);
+
+    // Effect to handle overwrite toggle
+    useEffect(() => {
+        if (!overwrite && search) {
+            setIsLoading(true);
+            performSearch(1, search);
         }
-    }, [overwrite]);
+    }, [overwrite, search, performSearch]);
 
+    // Effect to sync with inputValue prop
     useEffect(() => {
-        setSearch(inputValue);
+        if (inputValue !== undefined) {
+            setSearch(inputValue);
+        }
     }, [inputValue]);
 
+    // Memoize the input style to prevent recalculation
+    const inputStyle = useMemo(
+        () => ({
+            height: style?.multi_select_height || '52px',
+        }),
+        [style]
+    );
+
     return (
-        <>
-            <div className={styles.AutocompletePlace}>
-                <input
-                    className={styles['AutocompletePlace-input']}
-                    style={{
-                        height:
-                            style && style.multi_select_height
-                                ? style.multi_select_height
-                                : '52px',
-                    }}
-                    type="text"
-                    value={search || ''}
-                    onChange={handleSearchChange}
-                    placeholder="Type an address"
-                    autoComplete="off"
+        <div className={styles.AutocompletePlace}>
+            <input
+                className={styles['AutocompletePlace-input']}
+                style={inputStyle}
+                type="text"
+                value={search || ''}
+                onChange={handleSearchChange}
+                placeholder="Type an address"
+                autoComplete="off"
+            />
+
+            {overwrite ? (
+                <ToggleOnFill
+                    data-tooltip-id="system-tooltip"
+                    data-tooltip-content="Enable Autocomplete"
+                    strokeWidth={2}
+                    size={24}
+                    onClick={handleOverwrite}
+                    className={styles.toggleActive}
                 />
-                {overwrite === false ? (
-                    <ToggleOffFill
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content="Disable Autocomplete"
-                        strokeWidth={2}
-                        size={24}
-                        onClick={handleOverwrite}
-                    />
-                ) : (
-                    <ToggleOnFill
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content="Enable Autocomplete"
-                        strokeWidth={2}
-                        size={24}
-                        onClick={handleOverwrite}
-                        className={styles.toggleActive}
-                    />
-                )}
-                {results.length > 0 ? (
-                    <ul className="AutocompletePlace-results">
-                        {results.map((place) => (
-                            <li
-                                key={place.id}
-                                className={styles['AutocompletePlace-items']}
-                                onClick={() => handleItemClicked(place)}
-                            >
-                                {place.place_name}
-                            </li>
-                        ))}
-
-                        {isLoading && (
-                            <li className={styles['AutocompletePlace-items']}>
-                                Loading...
-                            </li>
-                        )}
-                    </ul>
-                ) : null}
-            </div>
-        </>
+            ) : (
+                <ToggleOffFill
+                    data-tooltip-id="system-tooltip"
+                    data-tooltip-content="Disable Autocomplete"
+                    strokeWidth={2}
+                    size={24}
+                    onClick={handleOverwrite}
+                />
+            )}
+
+            {results.length > 0 && (
+                <ul className="AutocompletePlace-results">
+                    {results.map((place) => (
+                        <li
+                            key={place.id}
+                            className={styles['AutocompletePlace-items']}
+                            onClick={() => handleItemClicked(place)}
+                        >
+                            {place.place_name}
+                        </li>
+                    ))}
+
+                    {isLoading && (
+                        <li className={styles['AutocompletePlace-items']}>
+                            Loading...
+                        </li>
+                    )}
+                </ul>
+            )}
+        </div>
     );
-};
+});
+
+// Add display name for debugging
+VisnsAutocomplete.displayName = 'VisnsAutocomplete';
 
 export default VisnsAutocomplete;

package/src/components/crm/DataGrid.jsx

@@ -10,7 +10,6 @@ import React, {
     useState,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import numeral from 'numeral';
@@ -26,6 +25,7 @@ import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import Vapor from 'laravel-vapor';
 import Lightbox from 'yet-another-react-lightbox';
+import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
     Alarm,
@@ -118,7 +118,7 @@ const loadData = async (
     }
 
     try {
-        const response = await axios.post(url, params);
+        const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
         return { data, count: total };
     } catch (error) {

package/src/components/crm/Download.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import axios from 'axios';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
+import fetchUtil from '../../utils/fetchUtil';
 
 const CustomDownload = (
     url,
@@ -11,7 +11,18 @@ const CustomDownload = (
     successCallback = null,
     errorCallback = null
 ) => {
-    let headers = {};
+    let headers = {
+        'X-Requested-With': 'XMLHttpRequest',
+    };
+
+    // Add CSRF token if available
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+    if (csrfToken) {
+        headers['X-CSRF-TOKEN'] = csrfToken;
+        headers['X-XSRF-TOKEN'] = csrfToken;
+    }
     let options = {};
 
     if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
@@ -39,7 +50,7 @@ const CustomDownload = (
     return trackPromise(
         new Promise((resolve, reject) => {
             // First, make a request without responseType: 'blob' to check for errors
-            axios({
+            fetchUtil({
                 method: method,
                 data: formData,
                 headers: headers,
@@ -64,7 +75,7 @@ const CustomDownload = (
                         resolve(response);
                     } else {
                         // If no error, make the actual blob request
-                        axios({
+                        fetchUtil({
                             method: method,
                             data: formData,
                             headers: headers,

package/src/components/crm/Fetch.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import axios from 'axios';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
@@ -14,7 +13,17 @@ const CustomFetch = (
     const baseUrl = '';
     const headers = {
         'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
     };
+
+    // Add CSRF token if available
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+    if (csrfToken) {
+        headers['X-CSRF-TOKEN'] = csrfToken;
+        headers['X-XSRF-TOKEN'] = csrfToken;
+    }
     const MAX_PAYLOAD_SIZE_MB =
         parseFloat(import.meta.env.VITE_MAX_PAYLOAD_SIZE_MB) || 4.5;
     const MAX_PAYLOAD_SIZE = MAX_PAYLOAD_SIZE_MB * 1024 * 1024; // Convert MB to bytes
@@ -48,36 +57,80 @@ const CustomFetch = (
         };
     }
 
-    const options = {
+    // Configure fetch options
+    const fetchOptions = {
         method: method,
-        data: formData,
         headers: headers,
-        url: baseUrl + url,
     };
 
+    // For GET and HEAD requests, convert formData to query parameters
+    if (method.toUpperCase() === 'GET' || method.toUpperCase() === 'HEAD') {
+        if (formData && Object.keys(formData).length > 0) {
+            // Convert formData to query string
+            const queryParams = new URLSearchParams();
+            Object.entries(formData).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    queryParams.append(key, value);
+                }
+            });
+            const queryString = queryParams.toString();
+            if (queryString) {
+                url += (url.includes('?') ? '&' : '?') + queryString;
+            }
+        }
+    } else {
+        // For other methods, add body
+        fetchOptions.body = formData ? JSON.stringify(formData) : undefined;
+    }
+
     return trackPromise(
         new Promise((resolve, reject) => {
-            axios(options)
-                .then((response) => {
-                    if (successCallback) {
-                        successCallback(response.data);
+            fetch(baseUrl + url, fetchOptions)
+                .then(async (response) => {
+                    // Parse the response data
+                    const contentType = response.headers.get('content-type');
+                    let data;
+
+                    if (
+                        contentType &&
+                        contentType.includes('application/json')
+                    ) {
+                        data = await response.json();
                     } else {
-                        const error = response.data.error;
+                        data = await response.text();
+                    }
+
+                    // Create a response object similar to axios for compatibility
+                    const responseObj = {
+                        data: data,
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                        ok: response.ok,
+                    };
 
+                    if (!response.ok) {
+                        // Handle error responses (4xx, 5xx)
+                        const error = new Error(response.statusText);
+                        error.response = responseObj;
+                        throw error;
+                    }
+
+                    // Handle success
+                    if (successCallback) {
+                        successCallback(data);
+                    } else {
+                        const error = data.error;
                         if (error && error !== '') {
                             toast.error(<div>{parse(error)}</div>);
                         }
                     }
-                    resolve(response);
+                    resolve(responseObj);
                 })
                 .catch((error) => {
                     let errorMessage = '';
 
-                    if (
-                        error.response &&
-                        error.response.data &&
-                        error.response.data.message
-                    ) {
+                    if (error.response && error.response.data) {
                         const { data } = error.response;
 
                         if (data.errors) {
@@ -88,7 +141,7 @@ const CustomFetch = (
                                     errorMessage += `${errorMsg}<br />`;
                                 });
                             });
-                        } else {
+                        } else if (data.message) {
                             if (data.message === 'CSRF token mismatch.') {
                                 window.location.replace('/login');
                             } else {