From 7cb16e51352cfeccafc384407d90398a11b26fac Mon Sep 17 00:00:00 2001 From: jmarinm Date: Wed, 6 Jul 2022 16:31:12 -0500 Subject: [PATCH] Added styles --- public/index.html | 4 ++ src/App.js | 166 ++++++++++++++++++++++++++-------------------- src/Book.jsx | 11 +-- src/BookForm.jsx | 41 ++++++------ 4 files changed, 127 insertions(+), 95 deletions(-) diff --git a/public/index.html b/public/index.html index c6ded9c..b78289f 100644 --- a/public/index.html +++ b/public/index.html @@ -9,8 +9,12 @@ React App + +
+ + diff --git a/src/App.js b/src/App.js index 373172a..c647c1c 100644 --- a/src/App.js +++ b/src/App.js @@ -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); @@ -41,64 +43,86 @@ const App = ()=> { } return ( - <> -
-

Libros

-
-
-

Obtener Todos

- - - { - books?.length > 0 ? ( -
- {books.map((book)=> ( - - ))} +
+
+
+
+

Libreria

+
+ +
+
+
+
+

Obtener Todos

+ + + { + books?.length > 0 ? ( +
+ {books.map((book) => ( + + ))} +
+ ) : ( + <> + ) + } +
+
+
+
+

Obtener Libro por Id

+ setSearchId(e.target.value)} + placeholder="Ingrese el id del libro" + className=" mx-2 input-group-text mb-3" + /> + + { + searchedBook !== null ? () : (<>) + }
- ) : ( - <> - ) - } -
-
-

Obtener Libro por Id

- setSearchId(e.target.value)} - placeholder= "Ingrese el id del libro" - /> - - { - searchedBook !== null ? (): (<>) - } -
-
-

Crear Un Libro

- -
-
-

Reportes

-

Libros por palabra clave

- setWordReport(e.target.value)} - placeholder= "Ingrese la palabra clave que desea buscar" - /> -
- + + +
+
+ +
+
+
+

Crear Un Libro

+ +
+
+
+
+
+

Libros por palabra clave

+ setWordReport(e.target.value)} + placeholder="Ingrese la palabra clave" + className="input-group-text mb-3" + /> +
+ -
- +
+
+
) } diff --git a/src/Book.jsx b/src/Book.jsx index 0b1ac87..5bb9b2c 100644 --- a/src/Book.jsx +++ b/src/Book.jsx @@ -1,10 +1,13 @@ import React from "react"; -const Book = ({ book}) => { +const Book = ({ book }) => { return ( -
-

Title: {book.Title}

-

Author: {book.Author}, Year Published: {book.PublicationYear}

+
+
+
{book.Title}
+
{book.PublicationYear}
+

{book.Description}

+
) } diff --git a/src/BookForm.jsx b/src/BookForm.jsx index 27c2436..6741120 100644 --- a/src/BookForm.jsx +++ b/src/BookForm.jsx @@ -38,26 +38,27 @@ const BookForm = () => { return (
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
) }