Skip to content

Commit

Permalink
Added styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmarinm
jmarinm committed Jul 6, 2022
1 parent 5f1d00b commit 7cb16e5
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 95 deletions.
4 changes: 4 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,12 @@
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
166 changes: 95 additions & 71 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,33 @@ import BookForm from './BookForm'
const API_URL = 'https://shark.ontrack.global';
//const API_URL = 'http://localhost:8080';

const App = ()=> {
const App = () => {

const [books, setBooks] = useState([]);
const [searchedBook, setSearchedBook] = useState(null);
const [searchId, setSearchId] = useState("");
const [wordReport, setWordReport] = useState("");

const searchBooks = async () =>{
const response = await fetch(`${API_URL}/book/get`,{
method: 'GET', // *GET, POST, PUT, DELETE, etc.
})
const data = await response.json();
setBooks(data)
}

const searchBook = async (bookId) =>{{
const response = await fetch(`${API_URL}/book/get/${bookId}`,{
const searchBooks = async () => {
const response = await fetch(`${API_URL}/book/get`, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
})
})
const data = await response.json();
setSearchedBook(data[0])
}}
setBooks(data)
}

const searchBook = async (bookId) => {
{
const response = await fetch(`${API_URL}/book/get/${bookId}`, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
})
const data = await response.json();
setSearchedBook(data[0])
}
}

const downloadReport = async(word) => {
const response = await fetch(`${API_URL}/book/report/${word}`,{
const downloadReport = async (word) => {
const response = await fetch(`${API_URL}/book/report/${word}`, {
method: 'GET',
})
const data = await (await response.text()).slice(17);
Expand All @@ -41,64 +43,86 @@ const App = ()=> {
}

return (
<>
<div>
<h1>Libros</h1>
</div>
<div>
<h2>Obtener Todos</h2>
<button
onClick={ () => searchBooks()}
>Buscar Todos los Libros</button>
<button
onClick = { () => setBooks([])}
>Limpiar</button>
{
books?.length > 0 ? (
<div>
{books.map((book)=> (
<Book book = {book}/>
))}
<div>
<div>
<div className="text-center">
<header class = "p-3 bg-dark text-white">
<h1 className="fw-light"> Libreria </h1>
</header>

</div>
<br/>
<br/>
<div className="text-center">
<h2 className="fw-light">Obtener Todos</h2>
<button type="button" className ="btn btn-primary mx-2"
onClick={() => searchBooks()}
>Buscar Todos los Libros</button>
<button type="button" className ="btn btn-secondary"
onClick={() => setBooks([])}
>Limpiar</button>
{
books?.length > 0 ? (
<div className="row" >
{books.map((book) => (
<Book book={book} />
))}
</div>
) : (
<></>
)
}
</div>
<br/>
<br/>
<div align = "center">
<h2 className="fw-light" >Obtener Libro por Id</h2>
<input
value={searchId}
onChange={(e) => setSearchId(e.target.value)}
placeholder="Ingrese el id del libro"
className=" mx-2 input-group-text mb-3"
/>
<button
className="btn btn-primary mx-2"
onClick={() => searchBook(searchId)}
>Buscar</button>
{
searchedBook !== null ? (<Book book={searchedBook} />) : (<></>)
}
</div>
) : (
<></>
)
}
</div>
<div>
<h2>Obtener Libro por Id</h2>
<input
value = {searchId}
onChange = {(e)=> setSearchId(e.target.value)}
placeholder= "Ingrese el id del libro"
/>
<button
onClick = {() => searchBook(searchId)}
>Buscar</button>
{
searchedBook !== null ? (<Book book = {searchedBook}/>): (<></>)
}
</div>
<div>
<h2>Crear Un Libro</h2>
<BookForm />
</div>
<div>
<h2>Reportes</h2>
<h3>Libros por palabra clave</h3>
<input
value = {wordReport}
onChange = {(e)=> setWordReport(e.target.value)}
placeholder= "Ingrese la palabra clave que desea buscar"
/>
<br/>
<button
onClick = {() => downloadReport(wordReport)}
>Generar Reporte</button>


<br/>
<br/>

<div className="row">
<div className="col-4"></div>
<div className="col-4 p-3 border border-primary border-5">
<h2 className="fw-light" align = "center">Crear Un Libro</h2>
<BookForm />
</div>
</div>
<br/>
<br/>
<div className="mb-5" align = "center">
<h3 className="fw-light">Libros por palabra clave</h3>
<input
value={wordReport}
onChange={(e) => setWordReport(e.target.value)}
placeholder="Ingrese la palabra clave"
className="input-group-text mb-3"
/>
<br />
<button
className="btn btn-primary"
onClick={() => downloadReport(wordReport)}
>Generar Reporte</button>


</div>
</>
</div>
</div>
</div>
)
}

Expand Down
11 changes: 7 additions & 4 deletions src/Book.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from "react";

const Book = ({ book}) => {
const Book = ({ book }) => {
return (
<div>
<h3>Title: {book.Title}</h3>
<h4>Author: {book.Author}, Year Published: {book.PublicationYear}</h4>
<div className="card mx-4 my-2" style={{width: '18rem'}}>
<div className="card-body">
<h5 className="card-title">{book.Title}</h5>
<h6 className="card-subtitle mb-2 text-muted">{book.PublicationYear}</h6>
<p className="card-text">{book.Description}</p>
</div>
</div>
)
}
Expand Down
41 changes: 21 additions & 20 deletions src/BookForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,27 @@ const BookForm = () => {

return (
<form onSubmit={handleSubmit}>
<label htmlFor = "title" >Titulo: </label>
<input type = "text" id = "title" name = "title" value = {form.title} onChange= {handleChange}></input>
<br/>
<br/>
<label htmlFor = "author" >Autor: </label>
<input type = "text" id = "author" name = "author" value = {form.author} onChange= {handleChange}></input>
<br/>
<br/>
<label htmlFor = "description" >Descripción: </label>
<input type = "text" id = "description" name = "description" value = {form.description} onChange= {handleChange}></input>
<br/>
<br/>
<label htmlFor = "subject" >Tema: </label>
<input type = "text" id = "subject" name = "subject" value = {form.subject} onChange= {handleChange}></input>
<br/>
<br/>
<label htmlFor = "year" >Año de Publicación: </label>
<input type = "text" id = "year" name = "year" value = {form.year} onChange= {handleChange}></input>
<br/>
<input type = "submit"></input>
<div className="mb-3">
<label htmlFor = "title" className="form-label">Titulo: </label>
<input className = "form-control" type = "text" id = "title" name = "title" value = {form.title} onChange= {handleChange}></input>
</div>
<div className="mb-3">
<label htmlFor = "author" className="form-label">Autor: </label>
<input className = "form-control" type = "text" id = "author" name = "author" value = {form.author} onChange= {handleChange}></input>
</div>
<div className="mb-3">
<label htmlFor = "description" className="form-label">Descripción: </label>
<input className = "form-control" type = "text" id = "description" name = "description" value = {form.description} onChange= {handleChange}></input>
</div>
<div className="mb-3">
<label htmlFor = "subject" className="form-label">Tema: </label>
<input className = "form-control" type = "text" id = "subject" name = "subject" value = {form.subject} onChange= {handleChange}></input>
</div>
<div className="mb-3">
<label htmlFor = "year" className="form-label">Año de Publicación: </label>
<input className = "form-control" type = "text" id = "year" name = "year" value = {form.year} onChange= {handleChange}></input>
</div>
<input class="btn btn-primary" type = "submit"></input>
</form>
)
}
Expand Down

0 comments on commit 7cb16e5

Please sign in to comment.