import React , { FC , useState } from 'react' ; import { Pane , Dialog , majorScale } from 'evergreen-ui' ; import { useRouter } from 'next/router' ; import Logo from '../../components/logo' ; import FolderList from '../../components/folderList' ; import NewFolderButton from '../../components/newFolderButton' ; import User from '../../components/user' ; import FolderPane from '../../components/folderPane' ; import DocPane from '../../components/docPane' ; import NewFolderDialog from '../../components/newFolderDialog' ; const App = ( { folders , activeDoc , activeFolder , activeDocs , } ) => { const router = useRouter ( ) ; const [ newFolderIsShown , setIsShown ] = useState ( false ) ; const Page = ( ) => { if ( activeDoc ) { return < DocPane folder = { activeFolder } doc = { activeDoc } / > ; } if ( activeFolder ) { return < FolderPane folder = { activeFolder } docs = { activeDocs } / > ; } return null ; } ; if ( false ) { return ( < Dialog isShown title = "Session expired" confirmLabel = "Ok" hasCancel = { false } hasClose = { false } shouldCloseOnOverlayClick = { false } shouldCloseOnEscapePress = { false } onConfirm = { ( ) => router . push ( '/signin' ) } > Sign in to continue < /Dialog>); } return ( < Pane position = "relative" > < Pane width = { 300 } position = "absolute" top = { 0 } left = { 0 } background = "tint2" height = "100vh" borderRight > < Pane padding = { majorScale ( 2 ) } display = "flex" alignItems = "center" justifyContent = "space-between" > < Logo /> < NewFolderButton onClick = { ( ) => setIsShown ( true ) } /> < /Pane> < Pane > < FolderList folders = { folders } />{' '} < /Pane> < /Pane> < Pane marginLeft = { 300 } width = "calc(100vw - 300px)" height = "100vh" overflowY = "auto" position = "relative" > < User user = { { } } /> < Page / > < /Pane> < NewFolderDialog close = { ( ) => setIsShown ( false ) } isShown = { newFolderIsShown } onNewFolder = { ( ) => { } } /> < /Pane>); } ; App . defaultProps = { folders : [ ] , } ; param context export default App ;