import React , { FC , ReactElement , useState , useContext , memo } from 'react' ; import { Table , PrimaryButton } from '@contentpi/ui' ; import { pluralify } from '@contentpi/utils' ; import { getValuesForTable } from '@contentpi/core' ; import { I18nContext } from '@contexts/i18n' ; import config from '@config' ; import { CREATE_ENTRY_LINK , EDIT_ENTRY_LINK , CONTENT_LINK } from '@constants/links' ; import MainLayout from '@layouts/main/MainLayout' ; import Link from '@ui/Link' ; import DeleteEntriesModal from '@modals/DeleteEntriesModal' ; import PublishOrUnpublishEntriesModal from '@modals/PublishOrUnpublishEntriesModal' ; import PageNotFound from '../PageNotFound' ; import i18nFields from './i18nFields' ; import { StyledContent } from './Content.styled' ; interface iProps { router : any ; data : any ; } const Content = ( { data , router } ) : ReactElement => { const { t } = useContext ( I18nContext ) ; const [ isDeleteModalOpen , setIsDeleteModalOpen ] = useState ( false ) ; const [ isPublishOrUnpublishModalOpen , setIsPublishOrUnpublishModalOpen ] = useState ( false ) ; const [ entries , setEntries ] = useState < any [ ] > ( [ ] ) ; const [ action , setAction ] = useState ( '' ) ; const { getModel , getDeclarations , getI18n } = data ; const { page = 1 } = router ; const rowsPerPage = getI18n ? 50 : 10 ; let fields = [ ] ; let values = null ; if ( ! getI18n && ! getModel && ! getDeclarations ) { return < div />; } if ( getModel ) { fields = getModel . fields ; } else { fields = i18nFields ; values = getI18n ; } const handleEntriesModal = ( entriesToDelete , modalAction ) => { if ( modalAction === 'delete' ) { setIsDeleteModalOpen ( ! isDeleteModalOpen ) ; } else { setIsPublishOrUnpublishModalOpen ( ! isPublishOrUnpublishModalOpen ) ; setAction ( modalAction ) ; } if ( entriesToDelete . length > 0 ) { setEntries ( entriesToDelete ) ; } } ; const { body , head , rows , total , raw } = getValuesForTable ( { fields , values } , null , 'createdAt' , 'desc' , rowsPerPage ) ; if ( ! rows [ page - 1 ] ) { return < PageNotFound />; } const isFile = body . includes ( 'file' ) && body . includes ( 'fileUrl' ) && body . includes ( 'information' ) ; const label = `${ action === 'publish' ? 'Publish' : 'Unpublish' } ${ pluralify ( 'Entry' , 'Entries' , entries . length ) }` ; return ( < > < DeleteEntriesModal label = { t ( `Delete ${ pluralify ( 'Entry' , 'Entries' , entries . length ) } `)} isOpen={isDeleteModalOpen} onClose={() => handleEntriesModal([], 'delete')} options={{
            position: 'center',
            width: '620px',
            data: {
                entries
            }
        }}/>

      <PublishOrUnpublishEntriesModal label={t(label)} isOpen={isPublishOrUnpublishModalOpen} onClose={() => handleEntriesModal([], action)} options={{
            position: 'center',
            width: '620px',
            data: {
                action,
                entries
            }
        }}/>

      <MainLayout title={t('Content')} header content footer sidebar noWrapper router={router}>
        <StyledContent style={{ margin: '0 auto', width: '98%' }}>
          <div className="model">
            <PrimaryButton href={CREATE_ENTRY_LINK(router).href} as={CREATE_ENTRY_LINK(router).as} Link={Link}>
              <>+ {t('New Entry')}</>
            </PrimaryButton>
          </div>

          <div className="rows">
            <Table t={t} url={EDIT_ENTRY_LINK(router).as} query="?entryId=" data={{
            body,
            head,
            rows: rows[page - 1],
            raw,
            fileTypes: config.files.types,
            isFile,
            pagination: {
                design: 'primary',
                page,
                total,
                rowsPerPage,
                href: ` $ { CONTENT_LINK ( router ) . href } ? page = `,
                as: ` $ { CONTENT_LINK ( router ) . as } ? page = `,
                Link
            }
        }} onDelete={(ids): any => handleEntriesModal(ids, 'delete')} onPublish={(ids): void => handleEntriesModal(ids, 'publish')} onUnpublish={(ids): void => handleEntriesModal(ids, 'unpublish')}/>
          </div>
        </StyledContent>
      </MainLayout>
    </>);
};
export default memo(Content);
