text: import { useEffect, useState } from 'react';
  import { Container, Row, Col } from 'react-bootstrap'
  
  import Search from './components/search'
  import Chapters from './components/chapters'
  import Reader from './components/reader'
  
  import { isEmpty } from './misc';
  
  
  function App() {
    const [searching, setSearching] = useState(false)
    const [manga, setManga] = useState({})
    const [chapter, setChapter] = useState({})
  
    useEffect(() => {
      console.log('searching: ' + searching)
    }, [searching])
  
    return (
      <div className="App">
        <Container fluid style={{ 'padding': '0 0', 'height': '100vh' }}>
          <Row noGutters>
            <Col>
              <Search
                searching={searching}
                setSearching={setSearching}
                setManga={setManga}
              />
            </Col>
          </Row>
          {!searching && (
            <Row noGutters style={{ 'height': 'calc(100% - 42px)' }}>
              <Col lg="3" style={{ 'height': '100%', 'overflowY': 'scroll' }}>
                {!searching &&
                  <Chapters
                    key={manga.id}
                    manga={manga}
                    setChapter={setChapter}
                  />
                }
              </Col>
              <Col lg="9" style={{ 'height': '100%', 'overflowY': 'scroll' }}>
                {isEmpty(chapter) ? (
                  <center>
                    {/* <img src={logo} /> */}
                  </center>
                ) : (
                  <Reader chapter={chapter} />
                )}
              </Col>
            </Row>
          )}
        </Container>
      </div>
    );
  }
  
  export default App;
  