@fajarmaulana/komerce-lp-helper 0.1.0

package/dist/utils/useApi.js

@@ -0,0 +1,488 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ApiInstance, buildURL, } from './api';
+var pendingRequests = new Map();
+/**
+ * Creates a new API instance with built-in React hooks (`fetch`, `mutation`, `infinite`)
+ * for performing typed data fetching and mutations with progress tracking.
+ *
+ * @param options - Optional configuration for the API instance (e.g. baseURL, default headers).
+ * @returns An object containing data hooks (`fetch`, `mutation`, `infinite`), cache manipulation methods, and interceptor registration.
+ *
+ * @example
+ * ```tsx
+ * const api = createApi({ baseURL: '/api' })
+ *
+ * const { data, isLoading, refetch } = api.fetch<User[]>('/users')
+ *
+ * const { mutate, isLoading, progress } = api.mutation<User, FormData>('/users', { method: 'POST' })
+ *
+ * const { data, isLoading, refetch } = api.infinite<User[]>('/users', { initialOffset: 0 })
+ * ```
+ */
+export default function createApi(options) {
+    if (options === void 0) { options = {}; }
+    var instance = new ApiInstance(options);
+    /**
+     * React hook for data fetching with built-in loading, error, and refetch states.
+     *
+     * @typeParam T - Expected data type from the API response.
+     * @param url - The endpoint URL (relative to instance baseURL).
+     * @param config - Optional HTTP configuration (headers, params, cache, etc.).
+     * @param enabled - Whether the fetch should run automatically on mount.
+     *
+     * @returns An object with:
+     * - `data`: fetched data or `null`
+     * - `error`: any error encountered
+     * - `isLoading`: request state
+     * - `cacheKey`: identifier for caching this request
+     * - `refetch()`: manually trigger a new fetch
+     *
+     * @example
+     * ```tsx
+     * const { data, isLoading, refetch } = api.fetch<User[]>('/users')
+     * ```
+     */
+    function useFetch(url, config, enabled) {
+        var _this = this;
+        var _a, _b;
+        if (enabled === void 0) { enabled = true; }
+        var abortControllerRef = useRef(null);
+        var _c = __read(useState({
+            data: null,
+            error: null,
+            isLoading: enabled,
+            cacheKey: null,
+        }), 2), state = _c[0], setState = _c[1];
+        var stableConfig = useMemo(function () { return config; }, [
+            (_a = config === null || config === void 0 ? void 0 : config.cache) === null || _a === void 0 ? void 0 : _a.enabled,
+            (_b = config === null || config === void 0 ? void 0 : config.cache) === null || _b === void 0 ? void 0 : _b.revalidate,
+            JSON.stringify(config === null || config === void 0 ? void 0 : config.headers),
+            JSON.stringify(config === null || config === void 0 ? void 0 : config.params),
+        ]);
+        var fetchData = useCallback(function () {
+            var args_1 = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args_1[_i] = arguments[_i];
+            }
+            return __awaiter(_this, __spreadArray([], __read(args_1), false), void 0, function (refetch) {
+                var response, newState, err_1, newState;
+                var _a;
+                if (refetch === void 0) { refetch = false; }
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!enabled && !refetch) {
+                                return [2 /*return*/, { data: null, error: null, isLoading: false, cacheKey: null }];
+                            }
+                            if (abortControllerRef.current)
+                                abortControllerRef.current.abort();
+                            abortControllerRef.current = new AbortController();
+                            if (!state.isLoading) {
+                                setState(function (s) { return (__assign(__assign({}, s), { isLoading: true })); });
+                            }
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, instance.get(url, __assign(__assign({}, stableConfig), { signal: abortControllerRef.current.signal }))];
+                        case 2:
+                            response = _b.sent();
+                            newState = {
+                                data: response.data,
+                                error: null,
+                                isLoading: false,
+                                cacheKey: (_a = response.cacheKey) !== null && _a !== void 0 ? _a : null,
+                            };
+                            setState(newState);
+                            return [2 /*return*/, newState];
+                        case 3:
+                            err_1 = _b.sent();
+                            newState = {
+                                data: null,
+                                error: err_1 instanceof Error && err_1.name === 'AbortError' ? null : err_1,
+                                isLoading: false,
+                                cacheKey: null,
+                            };
+                            setState(newState);
+                            return [2 /*return*/, newState];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        }, [enabled, url, stableConfig]);
+        useEffect(function () {
+            fetchData();
+            return function () {
+                if (abortControllerRef.current)
+                    abortControllerRef.current.abort();
+            };
+        }, [fetchData]);
+        return __assign(__assign({}, state), { refetch: function () { return fetchData(true); } });
+    }
+    /**
+     * React hook for making data mutations (e.g. POST, PUT, DELETE) with built-in
+     * loading state, upload/download progress tracking, and request deduplication.
+     *
+     * @typeParam TData - Expected data type of the response.
+     * @typeParam TRequest - Payload type for the mutation body or query param.
+     *
+     * @param url - Endpoint URL for the mutation.
+     * @param config - Optional mutation config (method, headers, cache, progress, etc.) with queryMutation for bad practice mutate fetching using query while true.
+     *
+     * @returns An object with:
+     * - `mutate(request)`: Function to trigger the mutation.
+     * - `isLoading`: Whether the request is currently in progress.
+     * - `cacheKey`: Identifier for caching this request.
+     * - `progress`: Download or Upload progress info (loaded, total, percentage) - only available when progress is enabled
+     *
+     * @example
+     * ```tsx
+     *
+     * // With upload progress
+     * const { mutate, isLoading, progress } = api.mutation<User, FormData>('/upload', {
+     *   method: 'POST',
+     *   progress: 'upload'
+     * })
+     *
+     * const handleSubmit = async (form: FormData) => {
+     *   const { data } = await mutate(form)
+     *   console.log(data)
+     * }
+     *
+     * // Show progress
+     * {progress && <div>Uploaded: {progress.percentage}%</div>}
+     * ```
+     */
+    function useMutation(url, config) {
+        var _this = this;
+        var _a, _b, _c;
+        var abortControllerRef = useRef(null);
+        var _d = __read(useState({
+            isLoading: false,
+            cacheKey: null,
+            progress: null,
+        }), 2), state = _d[0], setState = _d[1];
+        var stableConfig = useMemo(function () { return config; }, [
+            config === null || config === void 0 ? void 0 : config.method,
+            (_a = config === null || config === void 0 ? void 0 : config.cache) === null || _a === void 0 ? void 0 : _a.enabled,
+            (_b = config === null || config === void 0 ? void 0 : config.cache) === null || _b === void 0 ? void 0 : _b.revalidate,
+            config === null || config === void 0 ? void 0 : config.queryMutation,
+            config === null || config === void 0 ? void 0 : config.progress,
+            JSON.stringify((_c = config === null || config === void 0 ? void 0 : config.headers) !== null && _c !== void 0 ? _c : {}),
+        ]);
+        var mutate = useCallback(function (request) { return __awaiter(_this, void 0, void 0, function () {
+            var requestKey, method, shouldTrackUpload, shouldTrackDownload, requestPromise, response, err_2;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (abortControllerRef.current)
+                            abortControllerRef.current.abort();
+                        abortControllerRef.current = new AbortController();
+                        setState(function (s) { return (__assign(__assign({}, s), { isLoading: true, progress: null })); });
+                        requestKey = '';
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, 4, 5]);
+                        method = (stableConfig === null || stableConfig === void 0 ? void 0 : stableConfig.method) || 'GET';
+                        requestKey = JSON.stringify({ url: url, method: method, request: request });
+                        if (pendingRequests.has(requestKey)) {
+                            return [2 /*return*/, pendingRequests.get(requestKey)];
+                        }
+                        shouldTrackUpload = (stableConfig === null || stableConfig === void 0 ? void 0 : stableConfig.progress) === 'upload';
+                        shouldTrackDownload = (stableConfig === null || stableConfig === void 0 ? void 0 : stableConfig.progress) === 'download';
+                        requestPromise = void 0;
+                        if (method === 'GET') {
+                            requestPromise = instance.get(url, __assign(__assign({}, stableConfig), { params: request, signal: abortControllerRef.current.signal, onDownload: shouldTrackDownload
+                                    ? function (progress) {
+                                        setState(function (s) { return (__assign(__assign({}, s), { progress: progress })); });
+                                    }
+                                    : undefined }));
+                        }
+                        else {
+                            requestPromise = instance.request(__assign(__assign({}, stableConfig), { url: (config === null || config === void 0 ? void 0 : config.queryMutation) ? buildURL(url, request) : url, method: method, body: request ? request : undefined, signal: abortControllerRef.current.signal, onUpload: shouldTrackUpload
+                                    ? function (progress) {
+                                        setState(function (s) { return (__assign(__assign({}, s), { progress: progress })); });
+                                    }
+                                    : undefined }));
+                        }
+                        pendingRequests.set(requestKey, requestPromise);
+                        return [4 /*yield*/, requestPromise];
+                    case 2:
+                        response = _b.sent();
+                        setState({
+                            isLoading: false,
+                            cacheKey: (_a = response.cacheKey) !== null && _a !== void 0 ? _a : null,
+                            progress: null,
+                        });
+                        return [2 /*return*/, response];
+                    case 3:
+                        err_2 = _b.sent();
+                        setState({ isLoading: false, cacheKey: null, progress: null });
+                        throw err_2;
+                    case 4:
+                        if (pendingRequests.has(requestKey))
+                            pendingRequests.delete(requestKey);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); }, [url, stableConfig]);
+        useEffect(function () {
+            return function () {
+                if (abortControllerRef.current)
+                    abortControllerRef.current.abort();
+            };
+        }, []);
+        return __assign({ mutate: mutate }, state);
+    }
+    /**
+     * React hook for infinite pagination fetching with custom offset logic.
+     *
+     * @typeParam T - Expected data type from the API response.
+     * @param url - Endpoint URL (relative to instance baseURL).
+     * @param options - Infinite pagination options.
+     * @param config - Optional HTTP configuration (headers, params, etc.).
+     * @returns Object containing paginated data, loading states, and pagination controls.
+     *
+     * @example
+     * ```tsx
+     * const { data, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage, refetch } = api.infinite<User[]>('/users', {
+     *   initialOffset: 0,
+     *   setOffset: (lastItems, allItems, lastOffset) => {
+     *     return lastItems.length ? lastOffset + 10 : null
+     *   },
+     * })
+     * ```
+     */
+    function useInfiniteFetch(url, options, config) {
+        var _this = this;
+        var _a, _b;
+        var initialOffset = options.initialOffset, offsetKey = options.offsetKey, setOffset = options.setOffset;
+        var abortControllerRef = useRef(null);
+        var _c = __read(useState([]), 2), items = _c[0], setItems = _c[1];
+        var _d = __read(useState(initialOffset), 2), offset = _d[0], setOffsetState = _d[1];
+        var _e = __read(useState(false), 2), isLoading = _e[0], setIsLoading = _e[1];
+        var _f = __read(useState(false), 2), isFetchingNextPage = _f[0], setIsFetchingNextPage = _f[1];
+        var _g = __read(useState(true), 2), hasNextPage = _g[0], setHasNextPage = _g[1];
+        var _h = __read(useState(null), 2), error = _h[0], setError = _h[1];
+        var stableConfig = useMemo(function () { return config; }, [
+            (_a = config === null || config === void 0 ? void 0 : config.cache) === null || _a === void 0 ? void 0 : _a.enabled,
+            (_b = config === null || config === void 0 ? void 0 : config.cache) === null || _b === void 0 ? void 0 : _b.revalidate,
+            JSON.stringify(config === null || config === void 0 ? void 0 : config.headers),
+            JSON.stringify(config === null || config === void 0 ? void 0 : config.params),
+        ]);
+        var fetchPage = useCallback(function (offsetValue_1) {
+            var args_1 = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args_1[_i - 1] = arguments[_i];
+            }
+            return __awaiter(_this, __spreadArray([offsetValue_1], __read(args_1), false), void 0, function (offsetValue, append) {
+                var response, data_1, nextOffset, err_3;
+                var _a;
+                var _b;
+                if (append === void 0) { append = false; }
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (abortControllerRef.current)
+                                abortControllerRef.current.abort();
+                            abortControllerRef.current = new AbortController();
+                            if (!append)
+                                setIsLoading(true);
+                            else
+                                setIsFetchingNextPage(true);
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, instance.get(url, __assign(__assign({}, config), { params: __assign(__assign({}, ((_b = config === null || config === void 0 ? void 0 : config.params) !== null && _b !== void 0 ? _b : {})), (_a = {}, _a[offsetKey !== null && offsetKey !== void 0 ? offsetKey : 'offset'] = offsetValue, _a)), signal: abortControllerRef.current.signal }))];
+                        case 2:
+                            response = _c.sent();
+                            data_1 = response.data;
+                            setItems(function (prev) { return (append ? __spreadArray(__spreadArray([], __read(prev), false), [data_1], false) : [data_1]); });
+                            nextOffset = setOffset(data_1, append ? __spreadArray(__spreadArray([], __read(items), false), [data_1], false) : [data_1], offsetValue);
+                            if (nextOffset === null || nextOffset === undefined) {
+                                setHasNextPage(false);
+                            }
+                            else {
+                                setHasNextPage(true);
+                                setOffsetState(nextOffset);
+                            }
+                            setError(null);
+                            return [3 /*break*/, 5];
+                        case 3:
+                            err_3 = _c.sent();
+                            if (!(err_3 instanceof Error && err_3.name === 'AbortError')) {
+                                setError(err_3);
+                            }
+                            return [3 /*break*/, 5];
+                        case 4:
+                            setIsLoading(false);
+                            setIsFetchingNextPage(false);
+                            return [7 /*endfinally*/];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        }, [url, stableConfig, offsetKey]);
+        var fetchNextPage = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!hasNextPage || isFetchingNextPage)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, fetchPage(offset, true)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); }, [offset, hasNextPage, isFetchingNextPage, fetchPage]);
+        var refetch = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setItems([]);
+                        setOffsetState(initialOffset);
+                        setHasNextPage(true);
+                        return [4 /*yield*/, fetchPage(initialOffset, false)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); }, [initialOffset, fetchPage]);
+        useEffect(function () {
+            fetchPage(initialOffset);
+            return function () {
+                if (abortControllerRef.current)
+                    abortControllerRef.current.abort();
+            };
+        }, [fetchPage, initialOffset]);
+        return {
+            data: items,
+            error: error,
+            isLoading: isLoading,
+            hasNextPage: hasNextPage,
+            isFetchingNextPage: isFetchingNextPage,
+            fetchNextPage: fetchNextPage,
+            refetch: refetch,
+        };
+    }
+    return {
+        // ----------- React hooks API -----------
+        fetch: useFetch,
+        mutation: useMutation,
+        infinite: useInfiniteFetch,
+        // ----------- cache ops -----------
+        /**
+         * Retrieves a cached response by its key.
+         * @param key - Unique cache key.
+         * @returns Cached data or `undefined` if not found.
+         */
+        getCache: function (key) { return instance.getCache(key); },
+        /**
+         * Stores data in cache.
+         * @param key - Cache key.
+         * @param data - Data to store.
+         * @param ttl - Optional time-to-live in milliseconds.
+         */
+        setCache: function (key, data, ttl) { return instance.setCache(key, data, ttl); },
+        /**
+         * Removes a single cached entry.
+         * @param key - Cache key to remove.
+         */
+        removeCache: function (key) { return instance.removeCache(key); },
+        /**
+         * Clears all cache entries.
+         */
+        clearCache: function () { return instance.clearCache(); },
+        // ----------- interceptors -----------
+        /**
+         * Registers custom request/response interceptors.
+         *
+         * @param interceptors - Object containing optional `request`, `response`, and `error` interceptors.
+         *
+         * @example
+         * ```ts
+         * api.setInterceptors({
+         *   request: config => config,
+         *   response: res => res,
+         *   error: err => Promise.reject(err),
+         * })
+         * ```
+         */
+        setInterceptors: function (interceptors) { return instance.setInterceptors(interceptors); },
+    };
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@fajarmaulana/komerce-lp-helper",
+  "version": "0.1.0",
+  "description": "Helper functions, hooks and utils for Komerce LP",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "author": "Fajar Maulana",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "debounce",
+    "slider",
+    "router",
+    "fetcher",
+    "utils",
+    "hooks"
+  ]
+}