jsx import { useEffect , useState } from 'react' ; import { jsx } from '@emotion/core' ; import { Organization , Permission } from '@aragon/connect' ; import Group from './Group' ; import Table from './Table' ; import { useCancellableAsync } from './generic-hooks' ; type Props = { org ? : Organization ; } ; export default function OrgPermissions ( { org } ) { const [ permissions = [ ] , loading ] = useCancellableAsync < Permission [ ] > ( async ( ) => ( org ? org . permissions ( ) : [ ] ) , [ org ] ) ; return ( < Group name = "Permissions" loading = { loading } > < Table headers = { [ 'App' , 'Role' , 'Grantee' ] } rows = { permissions ? permissions . map ( ( permission ) => [ ( permission . appAddress || '?' ) . slice ( 0 , 6 ) , permission . roleHash . slice ( 0 , 6 ) , permission . granteeAddress . slice ( 0 , 6 ) , ] ) : [ ] } / > < /Group>); }