import * as React from 'react' ; import FolderIcon from '@material-ui/icons/Folder' ; import getFileExtension from '../../../../services/micro/getFileExtension' ; import { getWappInformation } from '../../../../services/WappService' ; import { Listing } from '../../../../services/FileService' ; const styles = require ( './Folder.module.scss' ) ; const WAPP_EXTENSION = 'wapp' ; interface Props { folder : Listing ; path : string ; onClick : ( folder : Listing ) => void ; } export default function Folder ( { folder , path , onClick , } ) { const [ icon , setIcon ] = React . useState ( '' ) ; const [ name , setName ] = React . useState ( folder . name ) ; React . useEffect ( ( ) => { async function processFile ( ) { const folderName = folder . name ; const folderExtension = getFileExtension ( folderName ) ; if ( folderExtension === WAPP_EXTENSION ) { const wappInfo = await getWappInformation ( `${ path }/${ folderName }` ) ; if ( wappInfo !== null ) { const newFolderName = folderName . replace ( `.${ WAPP_EXTENSION }` , '' ) ; setIcon ( wappInfo . icon ) ; setName ( newFolderName ) ; } } } processFile ( ) ; } , [ ] ) ; return ( < div className = { styles . folder } > < div className = { styles . iconWrapper } onClick = { ( ) => onClick ( folder ) } > { icon === '' && < FolderIcon className = { styles . icon } />} { icon !== '' && < img alt = "Folder" className = { styles . appIcon } src = { icon } / > } < /div> < span > { name } < /span> < /div>); }