components.pages.SearchablePage.SearchablePage.tsx Maven / Gradle / Ivy

Go to download
import React, { useCallback, useMemo } from 'react'
import { useStore } from 'react-redux'
import classNames from 'classnames'
import get from 'lodash/get'
import debounce from 'lodash/debounce'

import { Alert } from '../../snippets/Alerts/Alert'
import { PageTitle, PageTitle as DocumentTitle } from '../../core/PageTitle'
import { BreadcrumbContainer } from '../../core/Breadcrumb/BreadcrumbContainer'
import { Toolbar } from '../../buttons/Toolbar'
import { PageRegions } from '../PageRegions'
import SearchBar from '../../snippets/SearchBar/SearchBar'
import { FILTER_DELAY } from '../../../constants/time'
import { dataSourceModelsSelector } from '../../../ducks/datasource/selectors'
import { dataRequest } from '../../../ducks/datasource/store'
import { setModel } from '../../../ducks/models/store'
import { usePageRegister } from '../usePageRegister'
import { ModelPrefix } from '../../../core/datasource/const'
import { SearchablePageProps } from '../types'

function SearchablePage({
    id,
    metadata,
    pageId,
    error,
    regions,
    disabled,
    initSearchValue,
    dispatch,
    rootPage = false,
}: SearchablePageProps) {
    const { style, className, datasources, page,
        searchBar, toolbar = {} } = metadata || {}

    usePageRegister(dispatch, datasources, pageId)

    const { title, htmlTitle,
        datasource, model: modelPrefix } = page || {}

    const store = useStore()
    const state = store.getState()

    const searchDatasource = get(searchBar, 'datasource') || get(metadata, 'searchWidgetId')
    const { filter } = dataSourceModelsSelector(searchDatasource as string)(state)
    const fieldId = get(searchBar, 'fieldId') || get(metadata, 'searchModelKey')
    const filterValue = get(filter, fieldId)

    const handleSearch = useCallback((value: string) => {
        const model = { ...filter, [fieldId]: value }

        dispatch(setModel(ModelPrefix.filter, searchDatasource, model))
        dispatch(dataRequest(searchDatasource))
    }, [dispatch, fieldId, filter, searchDatasource])

    const onSearch = useMemo(() => debounce(handleSearch, FILTER_DELAY), [handleSearch])

    return (
        
            {error && }
            
            {rootPage && (
                
                    
                
            )}
            
                
                
            
            
                
                
                
            
            
            
                
                
                
            
        
    )
}

export { SearchablePage }
export default SearchablePage