FetchPoems.js
// App that gets data from Hacker News url
App that gets data from Hacker News url
App that gets data from Hacker News url
function App() {
  const { Fragment,  useState, useEffect, useReducer } = React;
  const { Container, Row, Col, Card, Button } = ReactBootstrap;
  const [query, setQuery] = useState("adam");
  const [currentPage, setCurrentPage] = useState(1);
  const [line, setLines] = useState("");
  const [show, setShow] = useState(false);
  const pageSize = 20;
  const [{ data, isLoading, isError }, doFetch] = useDataApi(
    "https://poetrydb.org/author/adam"
  );
  const handlePageChange = e => {
    setCurrentPage(Number(e.target.textContent));
  };
  let page = data;
  console.log(data);
  if (page?.length >= 1) {
    page = paginate(page, currentPage, pageSize);
    console.log(`currentPage: ${currentPage}`);
  }
  return (
    <Fragment>
    <div>
      <div className="alignCenter">
    <form
      onSubmit={event => {
        doFetch(`https://poetrydb.org/author/${query}`);
        event.preventDefault();
      }}
    >
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
        className="labelSelect"
      />
      <button type="submit" className="choice">Search by Author</button>
    </form>
    </div>
    <div>
    {isError && <div className="msg">Something went wrong. Please refresh the page  and try again with a different keyword.</div>}
    {isLoading && <div className="msg">Loading ... </div>}
    {!isLoading && data == null ? (
      <div className="msg">No results found ... </div>
    ) : (
              <Row>
                <h1> {isLoading}</h1>
                <p> </p>
                <Pagination
                  items={data}
                  pageSize={pageSize}
                  onPageChange={handlePageChange}
                >
                </Pagination>
                <p> </p>
                <Col>
                  <h2>Search Results: </h2>
                  <Row xs="auto">
                    {page?.map(({ title, author, lines }) => (
                        <Card style={{ width: '15rem' }}>
                          <Card.Body key={title.toString()}>
                            <Card.Title>Title: {title}</Card.Title>
                            <Card.Text>Author: {author}</Card.Text>
                            <Button variant="primary" value={lines} onClick={(event) => setLines(event.target.value)}>View Poem</Button>
                          </Card.Body>
                        </Card>
                    ))}
                  </Row>
                </Col>
                <Col>
                  <h2>Selected Poem: </h2>
                  <div className="poemPreview1">{line.split(",").join(",\n")} </div>
                </Col>
              </Row>
          )}
        </div>
      </div>
    </Fragment>
  );
}
function App ( ) { const { Fragment , useState , useEffect , useReducer } = React ; const { Container , Row , Col , Card , Button } = ReactBootstrap ; const [ query , setQuery ] = useState ( "adam" ) ; const [ currentPage , setCurrentPage ] = useState ( 1 ) ; const [ line , setLines ] = useState ( "" ) ; const [ show , setShow ] = useState ( false ) ; const pageSize = 20 ; const [ { data , isLoading , isError } , doFetch ] = useDataApi ( "https://poetrydb.org/author/adam" ) ; const handlePageChange = e => { setCurrentPage ( Number ( e . target . textContent ) ) ; } ; let page = data ; console . log ( data ) ; if ( page ?. length >= 1 ) { page = paginate ( page , currentPage , pageSize ) ; console . log ( ` ${ currentPage } ` ) ; } return ( < Fragment > < div > < div className = "alignCenter" > < form onSubmit = { event => { doFetch ( ` ${ query } ` ) ; event . preventDefault ( ) ; } } > < input type = "text" value = { query } onChange = { event => setQuery ( event . target . value ) } className = "labelSelect" / > < button type = "submit" className = "choice" > Search by Author < / button > < / form > < / div > < div > { isError && < div className = "msg" > Something went wrong. Please refresh the page  and try again with a different keyword. < / div > } { isLoading && < div className = "msg" > Loading ...  < / div > } { ! isLoading && data == null ? ( < div className = "msg" > No results found ...  < / div > ) : ( < Row > < h1 > { isLoading } < / h1 > < p > < / p > < Pagination items = { data } pageSize = { pageSize } onPageChange = { handlePageChange } > < / Pagination > < p > < / p > < Col > < h2 > Search Results:  < / h2 > < Row xs = "auto" > { page ?. map ( ( { title , author , lines } ) => ( < Card style = { { width : '15rem' } } > < Card . Body key = { title . toString ( ) } > < Card . Title > Title:  { title } < / Card . Title > < Card . Text > Author:  { author } < / Card . Text > < Button variant = "primary" value = { lines } onClick = { ( event ) => setLines ( event . target . value ) } > View Poem < / Button > < / Card . Body > < / Card > ) ) } < / Row > < / Col > < Col > < h2 > Selected Poem:  < / h2 > < div className = "poemPreview1" > { line . split ( "," ) . join ( ",\n" ) } < / div > < / Col > < / Row > ) } < / div > < / div > < / Fragment > ) ; }
App that gets data from Hacker News url
App that gets data from Hacker News url
//const target = useRef(null);