From 3968fa1a39d845d8a357d8250a3b15f250282d8f Mon Sep 17 00:00:00 2001 From: Matheus de Farias Cavalcanti Santos Date: Tue, 24 Oct 2023 18:24:16 -0300 Subject: [PATCH 1/2] refactor: removed else if statements from App.js and used if statement with return in the end --- card-rendering-api-app/src/App.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/card-rendering-api-app/src/App.js b/card-rendering-api-app/src/App.js index 980ea69..ab113f3 100644 --- a/card-rendering-api-app/src/App.js +++ b/card-rendering-api-app/src/App.js @@ -64,7 +64,10 @@ function App() { const json = await res.json(); setCardsState(json); - } else if (method === "POST") { + return; + } + + if (method === "POST") { config.body = JSON.stringify(data); let fetchOptions = [url, config]; @@ -72,18 +75,20 @@ function App() { const json = await res.json(); setCardsState(json); - } else if (method === "PUT") { - setLoading(true); - const putUrl = `${url}/${idUpdate}`; + return; + } - config.body = JSON.stringify(data); + //method === "PUT" + setLoading(true); + const putUrl = `${url}/${idUpdate}`; - const res = await fetch(putUrl, config); - const json = await res.json(); + config.body = JSON.stringify(data); - setCardsState(json); - setLoading(false); - } + const res = await fetch(putUrl, config); + const json = await res.json(); + + setCardsState(json); + setLoading(false); }; return ( From 7d6c864f5e3054fe848929912acb5e0a2ed5b52b Mon Sep 17 00:00:00 2001 From: Matheus de Farias Cavalcanti Santos Date: Fri, 8 Dec 2023 21:39:07 -0300 Subject: [PATCH 2/2] refactor: refactored if statements --- card-rendering-api-app/data/db.json | 4 +- card-rendering-api-app/src/App.js | 51 ++++++++++++------- .../src/components/Form/Form.js | 48 ++++++++--------- 3 files changed, 61 insertions(+), 42 deletions(-) diff --git a/card-rendering-api-app/data/db.json b/card-rendering-api-app/data/db.json index 56ac18b..c4bc2b7 100644 --- a/card-rendering-api-app/data/db.json +++ b/card-rendering-api-app/data/db.json @@ -43,10 +43,10 @@ "id": 7 }, { + "id": 8, "title": "Cat", "description": "puppy Cat ", - "imageUrl": "https://media.gettyimages.com/id/1499535177/pt/foto/young-man-resting-with-pet-in-sofa-at-home-beautiful-ginger-tabby-cat-animals-and-lifestyle.jpg?s=1024x1024&w=gi&k=20&c=4HSz9uBpV0lIvjj1q36sg4k1QfadxwTTDs0PP8WbjR4=", - "id": 8 + "imageUrl": "https://media.gettyimages.com/id/1499535177/pt/foto/young-man-resting-with-pet-in-sofa-at-home-beautiful-ginger-tabby-cat-animals-and-lifestyle.jpg?s=1024x1024&w=gi&k=20&c=4HSz9uBpV0lIvjj1q36sg4k1QfadxwTTDs0PP8WbjR4=" } ] } \ No newline at end of file diff --git a/card-rendering-api-app/src/App.js b/card-rendering-api-app/src/App.js index ab113f3..089bb95 100644 --- a/card-rendering-api-app/src/App.js +++ b/card-rendering-api-app/src/App.js @@ -10,9 +10,15 @@ function App() { const [cards, setCards] = useState([]); const [cardsState, setCardsState] = useState(null); - const [title, setTitle] = useState(""); - const [description, setDescription] = useState(""); - const [imageUrl, setImageUrl] = useState(""); + const [cardInfo, setCardInfo] = useState({ + id: "", + title: "", + description: "", + imageUrl: "", + }); + // const [title, setTitle] = useState(""); + // const [description, setDescription] = useState(""); + // const [imageUrl, setImageUrl] = useState(""); const [idUpdate, setIdUpdate] = useState(null); @@ -40,16 +46,23 @@ function App() { }, [cardsState]); const retrieveData = async (id) => { - const putUrl = `${url}/${id}`; - const response = await fetch(putUrl); - const responseJson = await response.json(); + var retrievedCard = (cards.filter(obj => { + return obj.id === id + })) + console.log(retrievedCard); + // const putUrl = `${url}/${id}`; + // const response = await fetch(putUrl); + // const responseJson = await response.json(); + + setCardInfo({retrievedCard}); - setTitle(responseJson.title); - setDescription(responseJson.description); - setImageUrl(responseJson.imageUrl); setIdUpdate(id); + + // setTitle(responseJson.title); + // setDescription(responseJson.description); + // setImageUrl(responseJson.imageUrl); }; - + const handleHttpRequest = async (method, data) => { const config = { method: method, @@ -68,6 +81,8 @@ function App() { } if (method === "POST") { + delete data.id; + config.body = JSON.stringify(data); let fetchOptions = [url, config]; @@ -81,7 +96,7 @@ function App() { //method === "PUT" setLoading(true); const putUrl = `${url}/${idUpdate}`; - + console.log(putUrl); config.body = JSON.stringify(data); const res = await fetch(putUrl, config); @@ -108,12 +123,14 @@ function App() { ))}
diff --git a/card-rendering-api-app/src/components/Form/Form.js b/card-rendering-api-app/src/components/Form/Form.js index 579936f..fd33e29 100644 --- a/card-rendering-api-app/src/components/Form/Form.js +++ b/card-rendering-api-app/src/components/Form/Form.js @@ -2,36 +2,35 @@ import React from "react"; import "./Form.css"; export const Form = ({ - title, - description, - imageUrl, - setTitle, - setDescription, - setImageUrl, + // title, + // description, + // imageUrl, + // setTitle, + // setDescription, + // setImageUrl, + cardInfo, + setCardInfo, handleHttpRequest, loading, }) => { - const card = { - title, - description, - imageUrl, - }; - const clearFields = () => { - setTitle(""); - setDescription(""); - setImageUrl(""); + setCardInfo((prevInput) => ({ + title:'', description:'', imageUrl:'' + })) + // setTitle(""); + // setDescription(""); + // setImageUrl(""); }; const handleSubmit = async (e) => { e.preventDefault(); - handleHttpRequest("POST", card); + handleHttpRequest("POST", cardInfo); clearFields(); }; const handleEdit = async (e) => { - handleHttpRequest("PUT", card); + handleHttpRequest("PUT", cardInfo); clearFields(); }; @@ -43,27 +42,30 @@ export const Form = ({ Title: setTitle(e.target.value)} + onChange={(e) => {setCardInfo({...cardInfo, title: e.target.value})}} + //onChange={(e) => setCardInfo(e.target.value)} />