refactor: removed else if statements from App.js and used if statemen…

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="
     }
   ]
 }

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,
@@ -64,26 +77,33 @@ function App() {
       const json = await res.json();
 
       setCardsState(json);
-    } else if (method === "POST") {
+      return;
+    }
+
+    if (method === "POST") {
+      delete data.id;
+
       config.body = JSON.stringify(data);
 
       let fetchOptions = [url, config];
       const res = await fetch(...fetchOptions);
       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}`;
+    console.log(putUrl);
+    config.body = JSON.stringify(data);
 
-      const res = await fetch(putUrl, config);
-      const json = await res.json();
+    const res = await fetch(putUrl, config);
+    const json = await res.json();
 
-      setCardsState(json);
-      setLoading(false);
-    }
+    setCardsState(json);
+    setLoading(false);
   };
 
   return (
@@ -103,12 +123,14 @@ function App() {
         ))}
       </div>
       <Form
-        title={title}
-        description={description}
-        imageUrl={imageUrl}
-        setTitle={setTitle}
-        setDescription={setDescription}
-        setImageUrl={setImageUrl}
+        // title={cardInfo.title}
+        // description={cardInfo.description}
+        // imageUrl={cardInfo.imageUrl}
+        // setTitle={setTitle}
+        // setDescription={setDescription}
+        // setImageUrl={setImageUrl}
+        cardInfo={cardInfo}
+        setCardInfo={setCardInfo}
         handleHttpRequest={handleHttpRequest}
         loading={loading}
       />

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:
           <input
             type="text"
-            value={title}
+            value={cardInfo.title}
             name="title"
-            onChange={(e) => setTitle(e.target.value)}
+            onChange={(e) => {setCardInfo({...cardInfo, title: e.target.value})}}
+            //onChange={(e) => setCardInfo(e.target.value)}
           />
         </label>
         <label>
           Description:
           <input
             type="text"
-            value={description}
+            value={cardInfo.description}
             name="description"
-            onChange={(e) => setDescription(e.target.value)}
+            onChange={(e) => {setCardInfo({...cardInfo, description: e.target.value})}}
+            //onChange={(e) => setCardInfo(e.target.value)}
           />
         </label>
         <label>
           URL da imagem:
           <input
             type="text"
-            value={imageUrl}
+            value={cardInfo.imageUrl}
             name="imageUrl"
-            onChange={(e) => setImageUrl(e.target.value)}
+            onChange={(e) => {setCardInfo({...cardInfo, imageUrl: e.target.value})}}
+            //onChange={(e) => setCardInfo(e.target.value)}
           />
         </label>
         <input type="submit" value="Criar" />