@knovator/pagecreator-admin 1.2.6 → 1.2.7

package/src/lib/context/PageContext.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { createContext, useContext } from 'react';
+import { PAGE_LIMITS, TRANSLATION_PAIRS_PAGE } from '../constants/common';
+import { PageContextType } from '../types';
+
+interface PageContextProviderProps
+  extends React.PropsWithChildren,
+    Partial<PageContextType> {}
+
+const PageContext = createContext<PageContextType | null>(null);
+
+const PageContextProvider = ({
+  searchText = '',
+  changeSearch = () => {},
+  list = [],
+  widgets = [],
+  formState = '',
+  closeForm = () => {},
+  getPages = () => {},
+  loading = false,
+  getWidgets = () => {},
+  onChangeFormState = () => {},
+  onPageFormSubmit = () => {},
+  canAdd = false,
+  canUpdate = false,
+  selectedWidgets = [],
+  setSelectedWidgets = () => {},
+  onChangeWidgetSequence = () => {},
+  // Pagination
+  currentPage = 1,
+  limits = PAGE_LIMITS,
+  pageSize = PAGE_LIMITS[0],
+  setCurrentPage = () => {},
+  setPageSize = () => {},
+  totalPages = 0,
+  totalRecords = 0,
+  canList = false,
+  // Table
+  columns = [],
+  data = [],
+  canDelete = false,
+  loader = undefined,
+  pageTranslations,
+  // other
+  children,
+}: PageContextProviderProps) => {
+  return (
+    <PageContext.Provider
+      value={{
+        // Form
+        list,
+        searchText,
+        changeSearch,
+        widgets,
+        closeForm,
+        formState,
+        loading,
+        getWidgets,
+        onChangeFormState,
+        canAdd,
+        canUpdate,
+        onPageFormSubmit,
+        selectedWidgets,
+        setSelectedWidgets,
+        onChangeWidgetSequence,
+        // Pagination
+        getPages,
+        currentPage,
+        limits,
+        pageSize,
+        setCurrentPage,
+        setPageSize,
+        totalPages,
+        totalRecords,
+        canList,
+        // Table
+        columns,
+        data,
+        canDelete,
+        loader,
+        pageTranslations: {
+          ...TRANSLATION_PAIRS_PAGE,
+          ...(pageTranslations || {}),
+        },
+      }}
+    >
+      {children}
+    </PageContext.Provider>
+  );
+};
+
+export function usePageState() {
+  const context = useContext(PageContext);
+  if (!context)
+    throw new Error('Page Context must be used within PageContext.Provider');
+
+  return context;
+}
+
+export default PageContextProvider;

package/src/lib/context/ProviderContext.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { createContext, useContext } from 'react';
+import { TRANSLATION_PAIRS_COMMON } from '../constants/common';
+import { ProviderContextProviderProps, ProviderContextType } from '../types';
+
+const ProviderContext = createContext<ProviderContextType | null>(null);
+
+const Provider = ({
+  children,
+  baseUrl,
+  token,
+  translations,
+  onError = () => {},
+  onSuccess = () => {},
+  onLogout = () => {},
+  switchClass = 'khb_switch',
+  widgetRoutesPrefix = 'widgets',
+  pageRoutesPrefix = 'pages',
+}: ProviderContextProviderProps) => {
+  return (
+    <ProviderContext.Provider
+      value={{
+        baseUrl,
+        token,
+        onError,
+        onSuccess,
+        onLogout,
+        switchClass,
+        widgetRoutesPrefix,
+        pageRoutesPrefix,
+        commonTranslations: {
+          ...TRANSLATION_PAIRS_COMMON,
+          ...(translations || {}),
+        },
+      }}
+    >
+      {children}
+    </ProviderContext.Provider>
+  );
+};
+
+export function useProviderState() {
+  const context = useContext(ProviderContext);
+  if (!context)
+    throw new Error(
+      'Provider Context must be used within ProviderContext.Provider'
+    );
+
+  return context;
+}
+
+export default Provider;

package/src/lib/context/WidgetContext.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { createContext, useContext } from 'react';
+import { PAGE_LIMITS, TRANSLATION_PAIRS_WIDGET } from '../constants/common';
+import { WidgetContextType } from '../types';
+
+interface WidgetContextProviderProps
+  extends React.PropsWithChildren,
+    Partial<WidgetContextType> {}
+
+const WidgetContext = createContext<WidgetContextType | null>(null);
+
+const WidgetContextProvider = ({
+  // Form
+  list = [],
+  languages = [],
+  imageBaseUrl = '',
+  searchText = '',
+  changeSearch = () => {},
+  formState = '',
+  closeForm = () => {},
+  loading = false,
+  onChangeFormState = () => {},
+  onWidgetFormSubmit = () => {},
+  updateData = null,
+  canAdd = false,
+  canUpdate = false,
+  onDeleteItem = () => {},
+  getWidgets = () => {},
+  onImageUpload = async (file: File) => {},
+  onImageRemove = async (id: string) => {},
+  itemsTypes = [],
+  widgetTypes = [],
+  getCollectionData = () => Promise.resolve(),
+  collectionDataLoading = false,
+  collectionData = [],
+  formatListItem,
+  formatOptionLabel,
+  // Pagination
+  currentPage = 1,
+  limits = PAGE_LIMITS,
+  pageSize = PAGE_LIMITS[0],
+  setCurrentPage = () => {},
+  setPageSize = () => {},
+  totalPages = 0,
+  totalRecords = 0,
+  // Table
+  canList = false,
+  canPartialUpdate = false,
+  columns = [],
+  data = [],
+  canDelete = false,
+  loader = <span />,
+  onPartialUpdateWidget = () => Promise.resolve(),
+  reactSelectStyles = {},
+  imageMaxSize = 10_485_760,
+  widgetTranslations,
+  // other
+  children,
+}: WidgetContextProviderProps) => {
+  return (
+    <WidgetContext.Provider
+      value={{
+        // Form
+        list,
+        languages,
+        imageBaseUrl,
+        closeForm,
+        formState,
+        loading,
+        searchText,
+        changeSearch,
+        onChangeFormState,
+        onWidgetFormSubmit,
+        updateData,
+        canAdd,
+        canUpdate,
+        onDeleteItem,
+        getWidgets,
+        onImageUpload,
+        onImageRemove,
+        onPartialUpdateWidget,
+        itemsTypes,
+        widgetTypes,
+        getCollectionData,
+        collectionDataLoading,
+        collectionData,
+        formatListItem,
+        formatOptionLabel,
+        reactSelectStyles,
+        // Pagination
+        currentPage,
+        limits,
+        pageSize,
+        setCurrentPage,
+        setPageSize,
+        totalPages,
+        totalRecords,
+        // Table
+        canList,
+        canPartialUpdate,
+        columns,
+        data,
+        canDelete,
+        loader,
+        imageMaxSize,
+        widgetTranslations: {
+          ...TRANSLATION_PAIRS_WIDGET,
+          ...(widgetTranslations || {}),
+        },
+      }}
+    >
+      {children}
+    </WidgetContext.Provider>
+  );
+};
+
+export function useWidgetState() {
+  const context = useContext(WidgetContext);
+  if (!context)
+    throw new Error(
+      'Widget Context must be used within WidgetContext.Provider'
+    );
+
+  return context;
+}
+
+export default WidgetContextProvider;

package/src/lib/helper/utils.ts

@@ -0,0 +1,46 @@
+import { CONSTANTS } from '../constants/common';
+import { TFunc } from '../types';
+
+/* eslint-disable no-useless-escape */
+export const paginationDataGatter = (data: any) => {
+  return data.data.docs;
+};
+export const dataGatter = (data: any) => {
+  return data.data;
+};
+
+export const capitalizeFirstLetter = (string = '') =>
+  `${string?.trim().charAt(0)?.toUpperCase()}${string?.slice(1)}`;
+
+export const changeToCode = (string = '') =>
+  string
+    .replace(/[^\s\w]/gi, '')
+    ?.toUpperCase()
+    ?.replace(CONSTANTS.EMPTY_REGEX, '_');
+
+export const changeToSlug = (string = '') =>
+  string?.toLowerCase()?.replace(CONSTANTS.EMPTY_REGEX, '-');
+
+export const isObject = (data: any) => data?.constructor?.name === 'Object';
+export const isString = (data: any) => data?.constructor?.name === 'String';
+export const isArray = (data: any) => data?.constructor?.name === 'Array';
+
+export const isEmpty = (data: any) => {
+  if (isObject(data)) return Object.keys(data).length === 0;
+  if (isArray(data)) return data.length === 0;
+  if (isString(data)) return !data || data.length === 0;
+  if ([undefined, null, ''].includes(data)) return true;
+  return false;
+};
+export const build_path = (...args: string[]) => {
+  return args
+    .map((part, i) => {
+      if (i === 0) {
+        return part.trim().replace(/[\/]*$/g, '');
+      } else {
+        return part.trim().replace(/(^[\/]*|[\/]*$)/g, '');
+      }
+    })
+    .filter((x) => x.length)
+    .join('/');
+};

package/src/lib/hooks/usePage.tsx

@@ -0,0 +1,306 @@
+import { useCallback, useEffect, useState } from 'react';
+import { CALLBACK_CODES, INTERNAL_ERROR_CODE } from '../constants/common';
+import { useProviderState } from '../context/ProviderContext';
+import { paginationDataGatter } from '../helper/utils';
+import usePagination from './usePagination';
+import request, { getApiType } from '../api';
+import { FormActionTypes, ObjectType, OptionType, Routes_Input } from '../types';
+
+interface UsePageProps {
+  canList?: boolean;
+  defaultLimit: number;
+  routes?: Routes_Input;
+  preConfirmDelete?: (data: { row: ObjectType }) => Promise<boolean>;
+}
+
+const usePage = ({
+  routes,
+  defaultLimit,
+  canList = true,
+  preConfirmDelete,
+}: UsePageProps) => {
+  const [list, setList] = useState<ObjectType[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [widgets, setWidgets] = useState<ObjectType[]>([]);
+  const [selectedWidgets, setSelectedWidgets] = useState<OptionType[]>([]);
+  const [widgetsLoading, setWidgetsLoading] = useState<boolean>(false);
+  const [totalPages, setTotalPages] = useState(0);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [itemData, setItemData] = useState<any | null>(null);
+  const [formState, setFormState] = useState<FormActionTypes>();
+
+  const {
+    baseUrl,
+    token,
+    onError,
+    onSuccess,
+    onLogout,
+    pageRoutesPrefix,
+    widgetRoutesPrefix,
+  } = useProviderState();
+  const {
+    setPageSize,
+    pageSize,
+    currentPageRef,
+    setCurrentPage,
+    offsetRef,
+    limitRef,
+    searchRef,
+    changeSearch,
+  } = usePagination({ defaultLimit });
+
+  const handleError = useCallback(
+    (code: CALLBACK_CODES) => (error: any) => {
+      const { data = {} } = error?.response || {};
+      if (data?.code === 'UNAUTHENTICATED') {
+        onLogout();
+      }
+      onError(code, 'error', data?.message);
+    },
+    [onError, onLogout]
+  );
+  const getWidgets = useCallback(
+    async (
+      search?: string,
+      collectionItems?: string[],
+      callback?: (data: any) => void
+    ) => {
+      try {
+        setWidgetsLoading(true);
+        const api = getApiType({
+          routes,
+          action: 'LIST',
+          prefix: widgetRoutesPrefix,
+        });
+        const response = await request({
+          baseUrl,
+          token,
+          method: api.method,
+          url: api.url,
+          onError: handleError(CALLBACK_CODES.GET_ALL),
+          data: {
+            collectionItems: collectionItems || [],
+            search: search || '',
+            all: true,
+            isActive: true,
+          },
+        });
+        if (response?.code === 'SUCCESS') {
+          let widgetsData = paginationDataGatter(response);
+          widgetsData = widgetsData.map((item: ObjectType) => {
+            return {
+              label: item['name'],
+              value: item['_id'] || item['id'],
+              code: item['code'],
+            };
+          });
+          if (typeof callback === 'function') callback(widgetsData);
+          return setWidgets(widgetsData);
+        }
+        setWidgetsLoading(false);
+      } catch (error) {
+        setWidgetsLoading(false);
+      }
+    },
+    [baseUrl, handleError, routes, token, widgetRoutesPrefix]
+  );
+  const getPages = useCallback(
+    async (search?: string) => {
+      try {
+        setLoading(true);
+        const api = getApiType({
+          routes,
+          action: 'LIST',
+          prefix: pageRoutesPrefix,
+        });
+        const response = await request({
+          baseUrl,
+          token,
+          method: api.method,
+          url: api.url,
+          onError: handleError(CALLBACK_CODES.GET_ALL),
+          data: {
+            search,
+            options: {
+              offset: offsetRef.current,
+              limit: limitRef.current,
+              page: currentPageRef.current,
+            },
+          },
+        });
+        if (response?.code === 'SUCCESS') {
+          setLoading(false);
+          setTotalPages(response.data.totalPages);
+          setTotalRecords(response.data.totalDocs);
+          return setList(paginationDataGatter(response));
+        }
+        setLoading(false);
+      } catch (error) {
+        setLoading(false);
+      }
+    },
+    [
+      baseUrl,
+      currentPageRef,
+      limitRef,
+      offsetRef,
+      handleError,
+      pageRoutesPrefix,
+      routes,
+      token,
+    ]
+  );
+  const onPageFormSubmit = async (data: ObjectType) => {
+    if (selectedWidgets.length) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      data.widgets = selectedWidgets.map((item) => item.value);
+    }
+    setLoading(true);
+    const code =
+      formState === 'ADD' ? CALLBACK_CODES.CREATE : CALLBACK_CODES.UPDATE;
+    try {
+      const api = getApiType({
+        routes,
+        action: formState === 'ADD' ? 'CREATE' : 'UPDATE',
+        prefix: pageRoutesPrefix,
+        id: itemData?._id,
+      });
+      const response = await request({
+        baseUrl,
+        token,
+        data,
+        url: api.url,
+        method: api.method,
+        onError: handleError(code),
+      });
+      if (response?.code === 'SUCCESS') {
+        if (formState === 'ADD') {
+          setCurrentPage(1);
+        }
+        setLoading(false);
+        onSuccess(code, response?.code, response?.message);
+        getPages();
+        onCloseForm();
+      } else {
+        setLoading(false);
+        onError(code, response?.code, response?.message);
+      }
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+  const onCloseForm = () => {
+    setFormState(undefined);
+    setItemData(null);
+  };
+  const onCofirmDeletePage = async () => {
+    try {
+      let proceed = true;
+      if (typeof preConfirmDelete === 'function') {
+        try {
+          proceed = await preConfirmDelete({ row: itemData });
+        } catch (error) {
+          proceed = false;
+        }
+      }
+
+      if (proceed) {
+        setLoading(true);
+        const api = getApiType({
+          routes,
+          action: 'DELETE',
+          prefix: pageRoutesPrefix,
+          id: itemData?._id,
+        });
+        const response = await request({
+          baseUrl,
+          token,
+          method: api.method,
+          url: api.url,
+          onError: handleError(CALLBACK_CODES.DELETE),
+        });
+        if (response?.code === 'SUCCESS') {
+          setLoading(false);
+          onSuccess(CALLBACK_CODES.DELETE, response?.code, response?.message);
+          getPages();
+          onCloseForm();
+          return;
+        }
+        setLoading(false);
+        onError(CALLBACK_CODES.DELETE, response?.code, response?.message);
+        onCloseForm();
+      }
+    } catch (error) {
+      setLoading(false);
+      onError(
+        CALLBACK_CODES.DELETE,
+        INTERNAL_ERROR_CODE,
+        (error as Error).message
+      );
+      onCloseForm();
+    }
+  };
+  const onChangeFormState = (state: FormActionTypes, data?: any) => {
+    setItemData(data || null);
+    setFormState(state);
+    if (state === 'UPDATE' && data?.widgets) {
+      // setSelectedWidgets(widgets.filter((widget) => data.widgets.includes(widget.value)));
+    } else {
+      setSelectedWidgets([]);
+    }
+  };
+  const onChangeWidgetSequence = (
+    sourceIndex: number,
+    destinationIndex: number
+  ) => {
+    console.log(sourceIndex, destinationIndex);
+    setSelectedWidgets((listData) => {
+      const temporaryData = [...listData];
+      const [selectedRow] = temporaryData.splice(sourceIndex, 1);
+      temporaryData.splice(destinationIndex, 0, selectedRow);
+      return temporaryData;
+    });
+  };
+  const changeCurrentPage = (page: number) => {
+    setCurrentPage(page);
+    getPages(searchRef.current);
+  };
+  useEffect(() => {
+    if (canList) getPages();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageSize, canList]);
+
+  return {
+    list,
+    getPages,
+    loading,
+    setLoading,
+
+    // Pagination
+    searchText: searchRef.current,
+    changeSearch,
+    pageSize,
+    totalPages,
+    currentPage: currentPageRef.current,
+    totalRecords,
+    setCurrentPage: changeCurrentPage,
+    setPageSize,
+
+    // Form
+    widgets,
+    itemData,
+    formState,
+    getWidgets,
+    onCloseForm,
+    widgetsLoading,
+    selectedWidgets,
+    setSelectedWidgets,
+    onPageFormSubmit,
+    onChangeFormState,
+    onCofirmDeletePage,
+    onChangeWidgetSequence,
+  };
+};
+
+export default usePage;

package/src/lib/hooks/usePagination.tsx

@@ -0,0 +1,41 @@
+import { useRef } from 'react';
+import * as constants from '../constants/common';
+
+interface UsePaginationProps {
+  defaultLimit?: number;
+}
+
+const usePagination = ({ defaultLimit }: UsePaginationProps) => {
+  const offsetRef = useRef<number>(constants.DEFAULT_OFFSET_PAYLOAD);
+  const limitRef = useRef<number>(defaultLimit || constants.DEFAULT_LIMIT);
+  const currentPageRef = useRef<number>(constants.DEFAULT_CURRENT_PAGE);
+  const searchRef = useRef<string>('');
+
+  const setPageSize = (value: number) => {
+    limitRef.current = Number.parseInt(String(value), constants.DECIMAL_REDIX);
+    offsetRef.current = constants.DEFAULT_OFFSET_PAYLOAD;
+    currentPageRef.current = constants.DEFAULT_CURRENT_PAGE;
+  };
+
+  const changeSearch = (value: string) => {
+    searchRef.current = value;
+  };
+
+  const changeCurrentPage = (value: number) => {
+    currentPageRef.current = value;
+    offsetRef.current = value * limitRef.current;
+  };
+
+  return {
+    pageSize: limitRef.current,
+    currentPageRef,
+    limitRef,
+    offsetRef,
+    searchRef,
+    setPageSize,
+    changeSearch,
+    setCurrentPage: changeCurrentPage,
+  };
+};
+
+export default usePagination;