Merge pull request #78 from 740fernando/feature/react

Feature/react

Author: 740fernando

09 - Consumindo a API com React/client/src/pages/Books/index.js

@@ -17,10 +17,41 @@ export default function Books(){
 
     const history = useHistory();
 
+    async function logout(){
+        localStorage.clear();
+        history.push('/');
+    }
+
+    async function editBook(id){
+        try{
+            history.push(`book/new/${id}`)
+        }catch(error){
+            alert('Edit failed! Try again.')
+        }
+    }
+
+    async function deleteBook(id){
+        try{
+            await api.delete(`api/book/v1/${id}`, {
+                headers: {
+                    Authorization : `Bearer ${accessToken}`
+                }
+            })
+            setBooks(books.filter(book => book.id !== id))
+        }catch(err){
+            alert('Delete failed! Try again.');
+        }
+    }
+
     useEffect(()=>{
         api.get("api/book/v1",{
             headers:{
                 Authorization: `Bearer ${accessToken}`
+            },
+            params: {
+                page: 1,
+                limit: 4,
+                direction: 'asc'
             }
         }).then(response =>{
             setBooks(response.data._embedded.bookVoes)
@@ -32,16 +63,16 @@ export default function Books(){
             <header>
                 <img src={logo} alt="Erudio"/>
                 <span>Welcome, <strong> {username.toUpperCase()} </strong></span>
-                <Link className="button" to="book/new/">Add New Book</Link>
-                <button type="button">
+                <Link className="button" to="book/new/0">Add New Book</Link>
+                <button onClick={logout} type="button">
                     <FiPower size={18} color="#251FC5" />
                 </button>
             </header>
 
             <h1>Registered Books</h1>
             <ul>
                {books.map(book => (
-                   <li>
+                   <li key={book.id}>
                        <strong>Title:</strong>
                        <p>{book.title}</p>
                        <strong>Author:</strong>
@@ -51,11 +82,11 @@ export default function Books(){
                        <strong>Release Date:</strong>
                        <p>{Intl.DateTimeFormat('pt-BR').format(new Date(book.launchDate))}</p>
 
-                       <button type='button'>
+                       <button onClick={()=> editBook(book.id)} type='button'>
                             <FiEdit size={20} color='#251FC5'/>
                        </button>
 
-                       <button type='button'>
+                       <button onClick={() => deleteBook(book.id)} type='button'>
                             <FiTrash2 size={20} color='#251FC5'/>
                        </button>
                    </li>

09 - Consumindo a API com React/client/src/pages/NewBook/index.js

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useHistory, Link} from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useHistory, Link, useParams} from "react-router-dom";
 import {FiArrowLeft} from 'react-icons/fi';
 
 import './styles.css';
@@ -10,17 +10,44 @@ import api from "../../services/api";
 
 export default function NewBook(){
 
-    const [id, setPassword] = useState(null);
+    const [id, setId] = useState(null);
     const [author, setAuthor] = useState('');
     const [launchDate, setLaunchDate] = useState('');
     const [price, setPrice] = useState('');
     const [title, setTitle] = useState('');
 
+    const {bookId} = useParams();
+
     const username =localStorage.getItem('username');
     const accessToken =localStorage.getItem('accessToken');
 
     const history = useHistory();
 
+    async function loadBook() {
+        try{
+            const response = await api.get(`api/book/v1/${bookId}`, {
+                headers: {
+                    Authorization: `Bearer ${accessToken}`
+                }
+            })
+            let adjustedDate = response.data.launchDate.split("T", 10)[0];
+
+            setId(response.data.id);
+            setTitle(response.data.title);
+            setAuthor(response.data.author);
+            setPrice(response.data.price);
+            setLaunchDate(adjustedDate)
+        }catch(error) {
+            alert('Error recovering book! Try again')
+            history.push('/books');
+        }
+    }
+
+    useEffect(() => {
+        if (bookId === '0') return;
+        else loadBook();
+    })
+
     async function createNewBook(e){
         e.preventDefault();
 
@@ -57,7 +84,7 @@ export default function NewBook(){
                 <section className="form">
                     <img src={logo} alt="Ntt"/>
                     <h1>Add New Book</h1>
-                    <p>Enter the book information and click 'Add' !</p>
+                    <p>Enter the book information and click 'Add' ! ### {bookId}</p>
                     <Link className="back-link" to="/books">
                         <FiArrowLeft size={16} color="#251fc5" />
                         Home

09 - Consumindo a API com React/client/src/routes.js

@@ -11,7 +11,7 @@ export default function Routes(){
             <Switch>
                 <Route path='/' exact component={Login} />
                 <Route path='/books' component={Books} />
-                <Route path='/book/new' component={NewBook} />
+                <Route path='/book/new/:bookId' component={NewBook} />
             </Switch>
         </BrowserRouter>
     );