contexts.ProcessRenderContext.tsx Maven / Gradle / Ivy

Go to download
import { getPathDepth } from 'components/process/utils/process';
import { useConfig } from 'hooks/config';
import { ProcessGroupBy, ProcessInfo, ProcessRendering } from 'hooks/process';
import { useLocalState } from 'hooks/state';
import React, { createContext, useEffect, useState } from 'react';
import { SetState } from 'types/react';
import { useDebouncedState } from 'utils/utils';

export type ProcessRenderProps = {
  path: string
  setPath: SetState
  filter: string
  setFilter: SetState
  setCurrentFilter: SetState
  groupBy: ProcessGroupBy
  setGroupBy: SetState
  processRendering: ProcessRendering
  setProcessRendering: SetState
  processInfo: ProcessInfo
}

type ProcessStorageProps = {
  groupBy: ProcessGroupBy
  groupByKey: string
  processRendering: ProcessRendering
  processRenderingKey: string
}

const defaultProcessStorageProps: ProcessStorageProps = {
  groupBy: 'category',
  groupByKey: 'PROCESS_GROUPBY',
  processRendering: "tiles",
  processRenderingKey: "PROCESS_RENDERING"
}

export const ProcessRenderContext = createContext({} as ProcessRenderProps);

const ProcessRenderProvider = ({children, processInfo, processProps}: {children: React.ReactNode, processInfo: ProcessInfo, processProps?: Partial }) => {
  const storageProps: ProcessStorageProps     = {...defaultProcessStorageProps, ...processProps}
  const [filter, setFilter, setCurrentFilter] = useDebouncedState('', 500)
  const {props: {addIcons: addProcessIcons}}  = useConfig()
  const [groupBy, setGroupBy]                 = useLocalState(storageProps.groupByKey, storageProps.groupBy)
  const [path, setPath]                       = useState("")

  const [processRendering, setProcessRendering]: [ProcessRendering, SetState] = addProcessIcons
    ? useLocalState(storageProps.processRenderingKey, storageProps.processRendering) 
    : ['standard', () => {}]

  useEffect(() => {
    const currentDepth = getPathDepth(path)

    if (groupBy == 'none' && currentDepth > 0)
      setPath("")
    else if (groupBy == 'category' && currentDepth > 1)
      setPath(path.split(".").slice(0, 1).join("."))

  }, [groupBy])

  useEffect(() => {
    if (addProcessIcons) {
      if (processRendering == 'standard')
        setProcessRendering('tiles')
    } else {
      if (processRendering != 'standard')
        setProcessRendering('standard')
    }
  }, [addProcessIcons])

  return (
     {setCurrentFilter(""), setPath(path)}, processInfo}}>
      {children}
    
  )
}

export default ProcessRenderProvider;