Merge pull request #68 from 2022-2-Graduation-Project/feature/46-pet-…

…list [#46] feat: change pet detail fetch location
2022-2-Graduation-Project · Feb 23, 2023 · 4e854a3 · 4e854a3
2 parents 3eb61b0 + ee0d3b0
commit 4e854a3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/bowwowcare/src/views/HomePage/HomePage.js b/bowwowcare/src/views/HomePage/HomePage.js
@@ -11,8 +11,7 @@ import anxiety from "../../assets/images/anxiety.png";
 import aggression from "../../assets/images/aggression.png";
 
 function HomePage() {
-  const [petlist, setPetlist] = useState([]);
-  const [pet, setPet] = useState([]);
+  const [petList, setPetList] = useState([]);
   const navigate = useNavigate();
   const fileInput = React.useRef(null);
 
@@ -48,30 +47,21 @@ function HomePage() {
         headers: authHeader(),
       }).then((res) => {
         if (res.status === 200) {
-          console.log(res);
-          setPetlist(res.data);
+          setPetList(res.data);
         }
       }).catch((e) => {
         console.log(e.message);
       })
     };
 
-  const getPetDetail = async () => {
-    const promise = petlist.map(async (v) => {
-      const res = await axios.get(`${API_URL}/pets/${v.petId}`);
-      return res.data;
-    });
-    return Promise.all(promise).then((result) => setPet(result));
-  };
   useEffect(() => {
     getPetList();
-    getPetDetail();
   }, []);
 
   return (
     <div className="container mx-auto px-8 w-screen h-screen">
       <Header />
-      <div className="flex">{pet && <PetList pets={pet} />}</div>
+      <div className="flex">{petList?.length && <PetList pets={petList} />}</div>
 
       <p className="text-xl font-bold mt-16">우리 아이 이상행동 확인해보기</p>
       <div className="flex justify-center mt-6 text-gray-500 text-center text-sm">

diff --git a/bowwowcare/src/views/HomePage/PetList/Sections/PetInfo.js b/bowwowcare/src/views/HomePage/PetList/Sections/PetInfo.js
@@ -1,31 +1,56 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { API_URL } from "../../../../Config";
 
 import { getAge } from "../../../../utils/Calculator";
 import { getDurationDate } from "../../../../utils/Calculator";
 
 function PetInfo(props) {
-  const birthDate = new Date(Date.parse(props.pet.birthDate));
-  const adoptDate = new Date(Date.parse(props.pet.adoptionDate));
+  const [petName, setPetName] = useState("");
+  const [petImg, setPetImg] = useState("");
+  const [age, setAge] = useState();
+  const [day, setDay] = useState();
 
-  const age = getAge(birthDate);
-  const day = getDurationDate(adoptDate);
+  useEffect(() => {
+    getPetDetail();
+  }, []);
+
+  const getPetDetail = () => {
+    axios({
+      method: 'get',
+      url: `${API_URL}/pets/${props.pet.petId}`
+    })
+    .then(response => {
+      if (response.status===200) {
+        const pet = response.data;
+        setPetName(pet.name);
+        setPetImg(pet.petImg);
+        const birthDate = new Date(Date.parse(pet.birthDate));
+        const adoptionDate = new Date(Date.parse(pet.adoptionDate));
+        setAge(getAge(birthDate));
+        setDay(getDurationDate(adoptionDate));
+      }
+    })
+  };
 
   return (
     <div className="flex w-80 h-28 shadow m-1 p-7 rounded-lg ">
       <div className="rounded-full border w-14 h-14">
-        {props.pet.fileImg && (
+        {petImg && (
           <img
-            src={URL.createObjectURL(props.pet.fileImg)}
+            src={petImg}
             alt="프로필 이미지"
             className="rounded-full w-14 h-14"
           ></img>
         )}
       </div>
-      <div className="ml-5">
-        <span className="text-xl">{props.pet.name}</span>
-        <span className="text-sm"> {age}살</span>
-        <div>함께한지 {day}일째</div>
-      </div>
+      {petName ? (
+        <div className="ml-5">
+          <span className="text-xl">{petName}</span>
+          <span className="text-sm"> {age}살</span>
+          <div>함께한지 {day}일째</div>
+        </div>
+      ) : null}
     </div>
   );
 }