Function CoreApp

packages/editor/index.tsx:42–174

()

}

export function CoreApp() {
  const intl = useIntl()
  const [messages, setMessages] = useState<TranslatedMessage[]>([])
  const [isLoading, setIsLoading] = useState<boolean>(true)
  useEffect(function () {
    ;(async function () {
      setMessages(await fetchData())
      setIsLoading(false)
    })()
  }, [])
  return (
    <>
      <CssBaseline />
      <Box height="100vh">
        <AppBar position="static">
          <Toolbar variant="dense">
            <IconButton edge="start" color="inherit" aria-label="menu">
              <Menu />
            </IconButton>
            <Drawer anchor="left">
              <List>
                {['Inbox', 'Starred', 'Send email', 'Drafts'].map(text => (
                  <ListItem button key={text}>
                    <ListItemText primary={text} />
                  </ListItem>
                ))}
              </List>
            </Drawer>
            <Header />
            <AddAlert />
            <NotificationsOff />
          </Toolbar>
        </AppBar>

        <Grid container spacing={0}>
          <Grid xs={3}>
            <form noValidate autoComplete="off">
              <TextField
                type="search"
                fullWidth
                margin="none"
                size="small"
                variant="filled"
                label={intl.formatMessage({
                  id: 'search-bar-label',
                  defaultMessage: 'Search message',
                  description: 'label in search bar',
                })}
              />
            </form>
            <Box borderRight={1} overflow="auto" height="calc(100vh - 108px)">
              <Messages
                messages={messages}
                isLoading={isLoading}
                count={MESSAGES_COUNT}
              />
            </Box>
          </Grid>