@appcorp/fusion-storybook 0.2.12 → 0.2.14

package/base-modules/user/context/use-user-module.js

@@ -0,0 +1,546 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+import { isCreatedOrUpdated, validateForm, API_METHODS, fetchData, } from "@react-pakistan/util-functions";
+import { useModuleEntityV2, } from "@react-pakistan/util-functions/hooks/use-module-entity-v2";
+import { useDebounce } from "@react-pakistan/util-functions/hooks/use-debounce";
+import { generateThemeToast, TOAST_VARIANT, } from "@appcorp/shadcn/lib/toast-utils";
+import { USER_API_ROUTES, pageLimit } from "../constants";
+import { userFormValidation } from "../validate";
+import { getCachedUsers, invalidateUsersCache } from "../cache";
+import { getCachedWorkspaceSync } from "../../workspace/cache";
+import { invalidateWorkspaceUsersCache } from "../../workspace-user/cache";
+import { blobToWebP } from "webp-converter-browser";
+import { supabasePublicStorageUrl } from "../../../constants";
+import { toastNetworkError } from "../../../utils/toast-network-error";
+import { formatNumber } from "@react-pakistan/util-functions/general/format-number";
+import { formatPhoneDisplay } from "@react-pakistan/util-functions/general/format-phone-display";
+import { useUserContext, USER_ACTION_TYPES, USER_DRAWER } from "../context";
+export const useUserModule = () => {
+    // ============================================================================
+    // 1.4.1 STATE & CORE HOOKS
+    // ============================================================================
+    const context = useUserContext();
+    const { dispatch } = context;
+    const state = context.state;
+    const t = useTranslations("user");
+    const { theme } = useTheme();
+    const workspace = getCachedWorkspaceSync();
+    const listFetchNowRef = useRef(null);
+    const debouncedQuery = useDebounce(state.searchQuery, 800);
+    // ============================================================================
+    // 1.4.2 API PARAMETERS
+    // ============================================================================
+    const listParams = useMemo(() => (Object.assign(Object.assign({ currentPage: state.currentPage, pageLimit: state.pageLimit, workspaceId: (workspace === null || workspace === void 0 ? void 0 : workspace.id) || "" }, (debouncedQuery ? { searchQuery: debouncedQuery } : {})), (state.filterEnabled !== undefined
+        ? { filterEnabled: String(state.filterEnabled) }
+        : {}))), [
+        state.currentPage,
+        state.filterEnabled,
+        state.pageLimit,
+        debouncedQuery,
+        workspace === null || workspace === void 0 ? void 0 : workspace.id,
+    ]);
+    const updateParams = useMemo(() => ({
+        avatar: state.avatar,
+        email: (state.email || "").trim(),
+        enabled: state.enabled,
+        id: state.id,
+        name: (state.name || "").trim(),
+        password: state.password,
+        phone: formatNumber(state.phone),
+        userRole: state.userRole,
+        workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id,
+    }), [state, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
+    const byIdParams = useMemo(() => ({ id: state.id }), [state.id]);
+    const deleteParams = useMemo(() => ({ id: state.id }), [state.id]);
+    const isDefaultListState = state.currentPage === 1 &&
+        state.pageLimit === pageLimit &&
+        !debouncedQuery &&
+        state.filterEnabled === undefined;
+    // ============================================================================
+    // 1.4.3 UTILITIES
+    // ============================================================================
+    const showToast = useCallback((description, variant) => {
+        generateThemeToast({
+            description,
+            theme: theme,
+            variant,
+        });
+    }, [theme]);
+    const resetFormAndCloseDrawer = useCallback(() => {
+        dispatch({ type: USER_ACTION_TYPES.RESET_FORM });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
+        });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: false },
+        });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: null },
+        });
+    }, [dispatch]);
+    // ============================================================================
+    // 1.4.4 API CALLBACKS
+    // ============================================================================
+    const listCallback = useCallback(({ data, error }) => {
+        var _a, _b;
+        if (error) {
+            showToast(t("messagesNetworkError"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            const response = data;
+            dispatch({
+                type: USER_ACTION_TYPES.SET_ITEMS,
+                payload: { items: (_a = response.items) !== null && _a !== void 0 ? _a : [], count: (_b = response.count) !== null && _b !== void 0 ? _b : 0 },
+            });
+        }
+    }, [dispatch, showToast, t]);
+    const updateCallback = useCallback(({ data, error }) => {
+        var _a;
+        if (error) {
+            showToast(t("messagesNetworkError"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            const isCreated = isCreatedOrUpdated(data);
+            invalidateUsersCache();
+            invalidateWorkspaceUsersCache();
+            showToast(isCreated ? t("messagesUserCreated") : t("messagesUserUpdated"), TOAST_VARIANT.SUCCESS);
+            resetFormAndCloseDrawer();
+            (_a = listFetchNowRef.current) === null || _a === void 0 ? void 0 : _a.call(listFetchNowRef);
+        }
+    }, [resetFormAndCloseDrawer, showToast, t]);
+    const byIdCallback = useCallback(({ data, error }) => {
+        var _a;
+        if (error) {
+            showToast(t("messagesNetworkError"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            const user = data;
+            const maybeWithWorkspaces = data;
+            const wsEntry = (_a = maybeWithWorkspaces.workspaces) === null || _a === void 0 ? void 0 : _a.find((ws) => ws.workspaceId === (workspace === null || workspace === void 0 ? void 0 : workspace.id));
+            let roleValue = null;
+            if (wsEntry && wsEntry.role !== undefined && wsEntry.role !== null) {
+                const r = wsEntry.role;
+                if (typeof r === "string") {
+                    roleValue = r;
+                }
+                else if (typeof r === "object" && r !== null) {
+                    roleValue =
+                        r.userRole ||
+                            r.name ||
+                            null;
+                }
+            }
+            const parsedUserRole = roleValue || null;
+            dispatch({
+                type: USER_ACTION_TYPES.SET_FORM_DATA,
+                payload: {
+                    form: {
+                        id: user.id,
+                        name: user.name || "",
+                        email: user.email,
+                        phone: formatPhoneDisplay(user.phone) || "",
+                        avatar: user.avatar || "",
+                        enabled: user.enabled,
+                        userRole: parsedUserRole,
+                        password: "",
+                    },
+                },
+            });
+        }
+    }, [dispatch, showToast, t, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
+    const deleteCallback = useCallback(({ data, error }) => {
+        var _a;
+        if (error) {
+            showToast(t("messagesNetworkError"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            invalidateUsersCache();
+            invalidateWorkspaceUsersCache();
+            showToast(t("messagesUserDeleted"), TOAST_VARIANT.SUCCESS);
+            (_a = listFetchNowRef.current) === null || _a === void 0 ? void 0 : _a.call(listFetchNowRef);
+        }
+    }, [showToast, t]);
+    // ============================================================================
+    // 1.4.5 API HOOKS
+    // ============================================================================
+    const { byIdFetchNow, byIdLoading, deleteFetchNow, deleteLoading, listFetchNow, listLoading, updateFetchNow, updateLoading, } = useModuleEntityV2({
+        byIdCallback,
+        byIdParams,
+        deleteCallback,
+        deleteParams,
+        listCallback,
+        listParams,
+        listUrl: USER_API_ROUTES.LIST,
+        searchQuery: debouncedQuery,
+        unitByIdUrl: USER_API_ROUTES.UNIT,
+        unitUrl: USER_API_ROUTES.UNIT,
+        updateCallback,
+        updateParams,
+        headers: {
+            "Content-Type": "application/json",
+            "x-api-token": process.env.NEXT_PUBLIC_API_KEY,
+        },
+    });
+    // ============================================================================
+    // 1.4.6 HANDLERS
+    // ============================================================================
+    const handleChange = useCallback((field, value) => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
+        });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: false },
+        });
+        const normalized = field === "email" && typeof value === "string"
+            ? value.toLowerCase()
+            : value;
+        dispatch({
+            type: USER_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: {
+                key: field,
+                value: normalized,
+            },
+        });
+    }, [dispatch]);
+    const closeDrawer = useCallback(() => {
+        resetFormAndCloseDrawer();
+    }, [resetFormAndCloseDrawer]);
+    const handleCreate = useCallback(() => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: USER_DRAWER.FORM_DRAWER },
+        });
+    }, [dispatch]);
+    const handleView = useCallback((row) => {
+        byIdFetchNow === null || byIdFetchNow === void 0 ? void 0 : byIdFetchNow(undefined, { params: { id: row === null || row === void 0 ? void 0 : row.id } });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: USER_DRAWER.VIEW_DRAWER },
+        });
+    }, [byIdFetchNow, dispatch]);
+    const handleEdit = useCallback((row) => {
+        byIdFetchNow === null || byIdFetchNow === void 0 ? void 0 : byIdFetchNow(undefined, { params: { id: row === null || row === void 0 ? void 0 : row.id } });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: USER_DRAWER.FORM_DRAWER },
+        });
+    }, [byIdFetchNow, dispatch]);
+    const handleDelete = useCallback((row) => {
+        if (!confirm(t("messagesDeleteConfirmation")))
+            return;
+        deleteFetchNow === null || deleteFetchNow === void 0 ? void 0 : deleteFetchNow(undefined, {
+            body: JSON.stringify({ id: row === null || row === void 0 ? void 0 : row.id }),
+        });
+    }, [deleteFetchNow, t]);
+    const handleFilters = useCallback(() => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: USER_DRAWER.FILTER_DRAWER },
+        });
+    }, [dispatch]);
+    const handleMoreActions = useCallback(() => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: USER_DRAWER.MORE_ACTIONS_DRAWER },
+        });
+    }, [dispatch]);
+    const handlePageChange = useCallback((page) => {
+        const nextPage = typeof page === "number" ? page : state.currentPage + 1;
+        dispatch({
+            type: USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: nextPage },
+        });
+    }, [dispatch, state.currentPage]);
+    const handlePageLimitChange = useCallback((k, value) => {
+        const val = Object.assign({}, value);
+        dispatch({
+            type: USER_ACTION_TYPES.SET_PAGE_LIMIT,
+            payload: { pageLimit: Number(val.option) },
+        });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+    }, [dispatch]);
+    const handleSearch = useCallback((query) => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_SEARCH_QUERY,
+            payload: { searchQuery: query },
+        });
+    }, [dispatch]);
+    const clearSearch = useCallback(() => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_SEARCH_QUERY,
+            payload: { searchQuery: "" },
+        });
+    }, [dispatch]);
+    const handleAvatar = useCallback((files) => {
+        if (!files || files.length === 0)
+            return;
+        const file = files[0];
+        const blob = new Blob([file], { type: file.type });
+        const url = URL.createObjectURL(blob);
+        dispatch({
+            type: USER_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: { key: "avatar", value: url },
+        });
+    }, [dispatch]);
+    const applyFilters = useCallback(() => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+        closeDrawer();
+    }, [dispatch, closeDrawer]);
+    const clearFilters = useCallback(() => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_FILTERS,
+            payload: { filters: { filterEnabled: undefined } },
+        });
+        dispatch({
+            type: USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+    }, [dispatch]);
+    const toggleStatus = useCallback((row) => {
+        updateFetchNow(undefined, {
+            body: JSON.stringify(Object.assign(Object.assign({}, row), { workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id, enabled: !(row === null || row === void 0 ? void 0 : row.enabled) })),
+        });
+    }, [updateFetchNow, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
+    // ============================================================================
+    // 1.4.7 NETWORK ACTIONS
+    // ============================================================================
+    const handleUploadImage = useCallback(async () => {
+        var _a;
+        if (!((_a = state.avatar) === null || _a === void 0 ? void 0 : _a.startsWith("blob:")))
+            return undefined;
+        const fileRef = `${workspace === null || workspace === void 0 ? void 0 : workspace.id}/${updateParams.id}/avatar/${updateParams.id}.webp`;
+        try {
+            const blob = await fetch(state.avatar).then((r) => r.blob());
+            const webpBlob = await blobToWebP(blob, { quality: 0.8 });
+            const arrayBuffer = await webpBlob.arrayBuffer();
+            let binary = "";
+            const bytes = new Uint8Array(arrayBuffer);
+            const chunkSize = 0x8000;
+            for (let i = 0; i < bytes.length; i += chunkSize) {
+                const sub = bytes.subarray(i, i + chunkSize);
+                for (let j = 0; j < sub.length; j++) {
+                    binary += String.fromCharCode(sub[j]);
+                }
+            }
+            const base64 = btoa(binary);
+            const res = await fetch("/api/uploads/avatar", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    fileBase64: base64,
+                    fileRef,
+                    contentType: webpBlob.type,
+                }),
+            });
+            if (!res.ok)
+                throw new Error("Upload failed");
+            const responseData = await res.json();
+            if (responseData === null || responseData === void 0 ? void 0 : responseData.path) {
+                const url = `${supabasePublicStorageUrl}/${responseData.path}`;
+                dispatch({
+                    type: USER_ACTION_TYPES.SET_INPUT_FIELD,
+                    payload: { key: "avatar", value: url },
+                });
+                return url;
+            }
+        }
+        catch (_b) {
+            toastNetworkError();
+        }
+        return undefined;
+    }, [state.avatar, dispatch, workspace === null || workspace === void 0 ? void 0 : workspace.id, updateParams.id]);
+    const checkUserEmailExists = useCallback(async (emailParam) => {
+        var _a;
+        const targetEmail = (typeof emailParam === "string" && emailParam) || state.email;
+        if (!targetEmail)
+            return null;
+        const result = await fetchData({
+            url: `${USER_API_ROUTES.UNIT_BY_EMAIL}?email=${encodeURIComponent(String(targetEmail))}`,
+            method: API_METHODS.GET,
+            headers: {
+                "x-api-token": process.env.NEXT_PUBLIC_API_KEY,
+            },
+        });
+        return (_a = result === null || result === void 0 ? void 0 : result.data) !== null && _a !== void 0 ? _a : null;
+    }, [state.email]);
+    const handleSubmit = useCallback(async () => {
+        dispatch({
+            type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: true },
+        });
+        const uploadedUrl = await handleUploadImage();
+        const finalParams = uploadedUrl
+            ? Object.assign(Object.assign({}, updateParams), { avatar: uploadedUrl }) : updateParams;
+        validateForm({
+            params: finalParams,
+            schema: userFormValidation,
+            successCallback: async () => {
+                try {
+                    const existing = await checkUserEmailExists(state.email);
+                    if (existing &&
+                        existing.id &&
+                        existing.id !== state.id) {
+                        dispatch({
+                            type: USER_ACTION_TYPES.SET_ERRORS,
+                            payload: { errors: { email: t("messagesEmailAlreadyInUse") } },
+                        });
+                        dispatch({
+                            type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                            payload: { disabled: false },
+                        });
+                        return;
+                    }
+                    updateFetchNow(undefined, { body: JSON.stringify(finalParams) });
+                }
+                catch (_a) {
+                    toastNetworkError();
+                    dispatch({
+                        type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                        payload: { disabled: false },
+                    });
+                }
+            },
+            errorCallback: (errors) => {
+                dispatch({
+                    type: USER_ACTION_TYPES.SET_ERRORS,
+                    payload: { errors },
+                });
+                dispatch({
+                    type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                    payload: { disabled: false },
+                });
+                showToast(t("messagesFormErrors"), TOAST_VARIANT.ERROR);
+            },
+        });
+    }, [
+        checkUserEmailExists,
+        dispatch,
+        handleUploadImage,
+        showToast,
+        state.email,
+        state.id,
+        t,
+        updateFetchNow,
+        updateParams,
+    ]);
+    // ============================================================================
+    // 1.4.8 HEADER & ROW ACTIONS
+    // ============================================================================
+    const headerActions = useMemo(() => [
+        {
+            enabled: false,
+            handleOnClick: handleMoreActions,
+            label: t("actionsButtonMoreActions"),
+            order: 0,
+        },
+        {
+            enabled: false,
+            handleOnClick: handleFilters,
+            label: t("actionsButtonFilters"),
+            order: 1,
+        },
+        {
+            enabled: true,
+            handleOnClick: handleCreate,
+            label: t("actionsButtonAdd"),
+            order: 2,
+        },
+    ], [handleCreate, handleFilters, handleMoreActions, t]);
+    const rowActions = useMemo(() => [
+        {
+            enabled: true,
+            handleOnClick: handleView,
+            label: t("actionsButtonView"),
+            order: 1,
+        },
+        {
+            enabled: true,
+            handleOnClick: handleEdit,
+            label: t("actionsButtonEdit"),
+            order: 2,
+        },
+        {
+            enabled: false,
+            handleOnClick: handleDelete,
+            label: t("actionsButtonDelete"),
+            order: 3,
+        },
+        {
+            enabled: false,
+            handleOnClick: toggleStatus,
+            label: t("actionsButtonToggleStatus"),
+            order: 4,
+        },
+    ], [handleDelete, handleEdit, handleView, t, toggleStatus]);
+    // ============================================================================
+    // 1.4.9 EFFECTS
+    // ============================================================================
+    useEffect(() => {
+        var _a;
+        if (!(workspace === null || workspace === void 0 ? void 0 : workspace.id))
+            return;
+        if (isDefaultListState) {
+            (async () => {
+                try {
+                    const { count, items } = await getCachedUsers({ params: listParams });
+                    dispatch({
+                        type: USER_ACTION_TYPES.SET_ITEMS,
+                        payload: { items: items || [], count: count || 0 },
+                    });
+                }
+                catch (_a) {
+                    showToast(t("messagesNetworkError"), TOAST_VARIANT.ERROR);
+                }
+            })();
+            return;
+        }
+        (_a = listFetchNowRef.current) === null || _a === void 0 ? void 0 : _a.call(listFetchNowRef);
+    }, [dispatch, isDefaultListState, listParams, workspace === null || workspace === void 0 ? void 0 : workspace.id, showToast, t]);
+    useEffect(() => {
+        listFetchNowRef.current = listFetchNow;
+    }, [listFetchNow]);
+    // ============================================================================
+    // 1.4.10 RETURN
+    // ============================================================================
+    return Object.assign(Object.assign({}, context), { applyFilters,
+        byIdLoading,
+        clearFilters,
+        clearSearch,
+        closeDrawer,
+        deleteLoading,
+        handleAvatar,
+        handleChange,
+        handleCreate,
+        handleDelete,
+        handleEdit,
+        handleFilters,
+        handleMoreActions,
+        handlePageChange,
+        handlePageLimitChange,
+        handleSearch,
+        handleSubmit,
+        handleView,
+        headerActions,
+        listFetchNow,
+        listLoading,
+        rowActions,
+        toggleStatus,
+        updateLoading });
+};

package/base-modules/user/context.d.ts

@@ -1,5 +1,4 @@
 import { UserBE, USER_ROLE } from "../../type";
-import { type RowAction, type TableRow } from "@appcorp/shadcn/components/enhanced-table";
 export declare const USER_DRAWER: {
     readonly FILTER_DRAWER: string;
     readonly FORM_DRAWER: string;
@@ -111,54 +110,4 @@ export declare const USER_ACTION_TYPES: {
     userRole: USER_ROLE | null;
     filterEnabled: boolean | undefined;
 }>;
-export declare const useUserModule: () => {
-    applyFilters: () => void;
-    byIdLoading: boolean;
-    clearFilters: () => void;
-    clearSearch: () => void;
-    closeDrawer: () => void;
-    deleteLoading: boolean;
-    handleAvatar: (files: File[]) => void;
-    handleChange: (field: string, value: string | number | boolean | undefined | null) => void;
-    handleCreate: () => void;
-    handleDelete: (row?: TableRow) => void;
-    handleEdit: (row?: TableRow) => void;
-    handleFilters: () => void;
-    handleMoreActions: () => void;
-    handlePageChange: (page: number | unknown) => void;
-    handlePageLimitChange: (k: string, value: object) => void;
-    handleSearch: (query: string) => void;
-    handleSubmit: () => Promise<void>;
-    handleView: (row?: TableRow) => void;
-    headerActions: {
-        enabled: boolean;
-        handleOnClick: () => void;
-        label: string;
-        order: number;
-    }[];
-    listFetchNow: (url?: string, config?: import("@react-pakistan/util-functions/hooks/use-fetch").FetchConfig) => void;
-    listLoading: boolean;
-    rowActions: RowAction[];
-    toggleStatus: (row?: TableRow) => void;
-    updateLoading: boolean;
-    state: {
-        items: UserBE[];
-        count: number;
-        currentPage: number;
-        pageLimit: number;
-        searchQuery: string;
-        disableSaveButton: boolean;
-        drawer: string | null;
-        errors: Record<string, string>;
-        id: string;
-        name: string;
-        email: string;
-        phone: string;
-        avatar: string;
-        password: string;
-        enabled: boolean;
-        userRole: USER_ROLE | null;
-        filterEnabled: boolean | undefined;
-    };
-    dispatch: React.Dispatch<any>;
-};
+export { useUserModule } from "./context/use-user-module";