dynamic-modal/src/hooks/use-render-if.ts

The dynamic-modal is a solution of creation different modals into project using a json configuration file

'use client';

import { useState } from 'react';

import {
  IModalRenderAction,
  IModalRenderCondition,
  IModalRenderCriteria,
} from '../interfaces/modal';
import { liveDataHandler } from '../util/general/general.util';

export interface IRenderIfProps {
  elementRenderIf?: IModalRenderCondition;
}

const useRenderIf = ({ elementRenderIf }: IRenderIfProps) => {
  const [render, setRender] = useState<boolean>(() => {
    return elementRenderIf === undefined;
  });

  const checkRender = async (
    formData: Record<string, unknown>,
    { name }: Record<'name', string> & Record<'type', string | undefined>,
  ) => {
    const targetFieldData = formData[name] as string | number;

    // if (
    //   targetFieldData === undefined ||
    //   targetFieldData === '' ||
    //   targetFieldData === null
    // )
    //   return false;

    const renderIfConfig = elementRenderIf!;
    const isLiveRender: boolean =
      !!renderIfConfig?.action && !!renderIfConfig?.condition;

    if (isLiveRender && renderIfConfig.condition!.includes(name)) {
      const renderStatus: boolean = await liveDataHandler(
        targetFieldData,
        formData,
        (renderIfConfig as IModalRenderAction)!.action!,
      );

      return renderStatus;
    } else {
      const renderConditionList = Object.keys(
        elementRenderIf as IModalRenderCriteria,
      );

      if (renderConditionList.includes(name)) {
        const renderStatus: boolean =
          (renderIfConfig as IModalRenderCriteria)[name]!.includes(
            targetFieldData,
          ) || (renderIfConfig as IModalRenderCriteria)[name]!.includes('*');

        return renderStatus;
      }
    }
  };

  return {
    render,
    checkRender,
    setRender,
  };
};

export default useRenderIf;