jsx import { Fragment , useEffect , useState } from 'react' ; import { css , jsx } from '@emotion/core' ; import { connect } from '@aragon/connect' ; import Main from './Main' ; import OrgApps from './OrgApps' ; import OrgInfo from './OrgInfo' ; import OrgPermissions from './OrgPermissions' ; import TextButton from './TextButton' ; import { useCancellableAsync } from './generic-hooks' ; import { env } from './environment' ; function useRouting ( ) { const [ orgName , setOrgName ] = useState ( '' ) ; const openOrg = ( orgName ) => { window . location . hash = `/${ orgName }` ; } ; const openApp = ( appAddress ) => { window . location . hash = `/${ orgName }/${ appAddress }` ; } ; useEffect ( ( ) => { const onChange = ( ) => { const org = window . location . hash . match ( /^#\/([^\/]+)/ ) ?. [ 1 ] ; setOrgName ( org || '' ) ; } ; onChange ( ) ; window . addEventListener ( 'hashchange' , onChange ) ; return ( ) => { window . removeEventListener ( 'hashchange' , onChange ) ; } ; } , [ ] ) ; return { orgName , openOrg , openApp } ; } function filterOrgName ( name ) { name = name . trim ( ) ; if ( ! name . includes ( '.' ) ) { return name + '.aragonid.eth' ; } return name ; } export default function App ( ) { const { openOrg , openApp , orgName } = useRouting ( ) ; const [ org = null , loading ] = useCancellableAsync ( async ( ) => connect ( filterOrgName ( orgName ) , 'thegraph' , { network : env . chainId } ) , [ orgName ] ) ; return ( < Main > { loading && ( < p css = { css `
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            margin: 0;
            padding: 10px;
            background: #fff;
            border-radius: 6px;
          ` } > Loading org … < /p>)} < label > < div css = { css `
            padding-left: 4px;
            padding-bottom: 8px;
            font-size: 20px;
          ` } > Enter an org location : < /div> < input onChange = { ( event ) => openOrg ( event . target . value ) } placeholder = "e.g. xyz.aragonid.eth" type = "text" value = { orgName } css = { css `
            width: 100%;
            padding: 12px;
            border: 2px solid #fad4fa;
            border-radius: 6px;
            font-size: 24px;
            outline: 0;
          ` } /> < /label> < div css = { css `
          white-space: nowrap;
          padding-top: 8px;
          padding-left: 4px;
          font-size: 20px;
        ` } > Or pick one : & nbsp ; { env . addresses . map ( ( name , index ) => ( < span key = { name } > { index > 0 && < span > , < /span>} < TextButton onClick = { ( ) => openOrg ( name ) } > { name . match ( /^[^\.]+/ ) ?. [ 0 ] } < /TextButton> < /span>))} . < /div> { org && ( < Fragment > < OrgInfo org = { org } /> < OrgApps org = { org } onOpenApp = { openApp } / > < OrgPermissions org = { org } /> < /Fragment>)} < /Main>); }