import React , { FC , ReactElement , useState , useContext , memo } from 'react' ; import { Badge } from '@contentpi/ui' ; import { I18nContext } from '@contexts/i18n' ; import { MODEL_LINK , ENUMERATION_LINK } from '@constants/links' ; import CreateModelModal from '@modals/CreateModelModal' ; import CreateEnumerationModal from '@modals/CreateEnumerationModal' ; import Link from '@ui/Link' ; import { StyledModelSidebar } from './ModelSidebar.styled' ; interface iProps { app : any ; router : any ; } const ModelSidebar = ( { app , router } ) : ReactElement => { const { t } = useContext ( I18nContext ) ; const [ isOpenModel , setIsOpenModel ] = useState ( false ) ; const [ isOpenEnumeration , setIsOpenEnumeration ] = useState ( false ) ; const handleModelModal = ( ) : void => setIsOpenModel ( ! isOpenModel ) ; const handleEnumerationModal = ( ) : void => setIsOpenEnumeration ( ! isOpenEnumeration ) ; const { models = [ ] , enumerations = [ ] } = app ; return ( < > < CreateEnumerationModal label = { t ( 'Create new Enumeration' ) } isOpen = { isOpenEnumeration } onClose = { handleEnumerationModal } options = { { position : 'top' , height : router . language === 'ja-JP' || router . language === 'ar' ? '627px' : '610px' , width : '600px' } } /> < CreateModelModal label = { t ( 'Create new Model' ) } isOpen = { isOpenModel } onClose = { handleModelModal } options = { { position : 'center' , width : '400px' } } /> < StyledModelSidebar > < div className = "wrapper" > < span className = "models" > { t ( 'Models' ) } < /span> < span className = "create" > < Badge onClick = { handleModelModal } > + { t ( 'Create' ) } < /Badge> < /span> < /div> < div className = "modelsWrapper" > { models . map ( ( model ) => { router . model = model . identifier ; if ( model . identifier === 'asset' ) { return < div key = { model . id } />; } return ( < div key = { model . id } > < Link href = { MODEL_LINK ( router ) . as } > { model . modelName } < /Link> < /div>); } ) } < /div> < div className = "wrapper" > < span className = "models" > { t ( 'Enumerations' ) } < /span> < span className = "create" > < Badge onClick = { handleEnumerationModal } > + { t ( 'Create' ) } < /Badge> < /span> < /div> < div className = "modelsWrapper" > { enumerations . map ( ( enumeration ) => { router . enumeration = enumeration . identifier ; return ( < div key = { enumeration . id } > < Link href = { ENUMERATION_LINK ( router ) . as } > { enumeration . enumerationName } < /Link> < /div>); } ) } < /div> < /StyledModelSidebar> < />); } ; export default memo ( ModelSidebar ) ;