[#46] feat: implement pet list api

2022-2-Graduation-Project · Feb 23, 2023 · 2bbb559 · 2bbb559
1 parent 71035c7
commit 2bbb559
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 61 deletions.
diff --git a/bowwowcare/src/views/HomePage/HomePage.js b/bowwowcare/src/views/HomePage/HomePage.js
@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import { API_URL } from "../../Config";
+import authHeader from "../../services/auth-header";
 
 import Header from "../../components/Header";
 import PetList from "./PetList/PetList";
@@ -8,6 +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 navigate = useNavigate();
   const fileInput = React.useRef(null);
@@ -27,78 +31,71 @@ function HomePage() {
     }
   };
 
+  const handleNavigation = (type) => {
+    if (type === "aggression") {
+      navigate("/behavior-selection", {
+        state: {
+          type: type,
+        },
+      });
+    } else if (type === "anxiety") {
+      navigate("/examination", {
+        state: {
+          type: type,
+        },
+      });
+    }
+  };
+
   const handleBehaviorSelection = (type) => {
     navigate("/behavior-selection", {
       state: {
-        type: type
-      }
-    })
+        type: type,
+      },
+    });
+  };
 
-  }
+  const getPetList = async () => {
+      axios({
+        method: "GET",
+        url: `${API_URL}/pets`,
+        headers: authHeader(),
+      }).then((res) => {
+        if (res.status === 200) {
+          console.log(res);
+          setPetlist(res.data);
+        }
+      }).catch((e) => {
+        console.log(e.message);
+      })
 
-  const res = [
-    {
-      id: 0,
-      petname: "강쥐",
-      gender: "남",
-      birthDate: "2020-01-30T08:13:57.980Z",
-      adoptDate: "2020-01-30T08:13:57.980Z",
-      fileImg: "",
-    },
-    {
-      id: 1,
-      petname: "강쥐2",
-      gender: "여",
-      birthDate: "2019-01-30T08:13:57.980Z",
-      adoptDate: "2019-01-30T08:13:57.980Z",
-      fileImg: "",
-    },
-    {
-      id: 2,
-      petname: "강쥐3",
-      gender: "남",
-      birthDate: "2010-01-30T08:13:57.980Z",
-      adoptDate: "2010-01-30T08:13:57.980Z",
-      fileImg: "",
-    },
-  ];
+
+    };
 
+  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(() => {
-    setPet(res);
-    // console.log(pet);
+    getPetList();
+    getPetDetail();
   }, []);
 
-  // TODO: 펫 데이터 불러오기
-  // useEffect(async() => {
-  //   try{
-  //     const res = await axios.get('/api/v1/pets');
-  //     const input = await res.map((x) => ({
-  //           id: x.idx,
-  //           petname: x.name,
-  //           gender: x.gender,
-  //           birthDate: x.birthDate,
-  //           adopDate: x.adopday,
-  //           fileImg: x.fileImg
-  //           })
-  //     )
-  //     setPet(pet.concat(input))
-  //   } catch(e){
-  //     console.error(e.message)
-  //   }
-  // },[])
-
   return (
     <div className="container mx-auto px-8 w-screen h-screen">
       <Header />
       <div className="flex">{pet && <PetList pets={pet} />}</div>
-
+      
       <p className="text-xl font-bold mt-16">우리 아이 이상행동 확인해보기</p>
       <div className="flex justify-center mt-6 text-gray-500 text-center text-sm">
-        <button onClick={() => handleBehaviorSelection("anxiety")}>
+        <button onClick={() => handleNavigation("anxiety")}>
           <img src={anxiety}></img>
           <p>불안에 떨고 있어요</p>
         </button>
-        <button onClick={() => handleBehaviorSelection("aggression")}>
+        <button onClick={() => handleNavigation("aggression")}>
           <img src={aggression}></img>
           <p>으르렁 거리고 있어요</p>
         </button>

diff --git a/bowwowcare/src/views/HomePage/PetList/Sections/PetInfo.js b/bowwowcare/src/views/HomePage/PetList/Sections/PetInfo.js
@@ -5,7 +5,7 @@ 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.adoptDate));
+  const adoptDate = new Date(Date.parse(props.pet.adoptionDate));
 
   const age = getAge(birthDate);
   const day = getDurationDate(adoptDate);
@@ -22,7 +22,7 @@ function PetInfo(props) {
         )}
       </div>
       <div className="ml-5">
-        <span className="text-xl">{props.pet.petname}</span>
+        <span className="text-xl">{props.pet.name}</span>
         <span className="text-sm"> {age}살</span>
         <div>함께한지 {day}일째</div>
       </div>

diff --git a/bowwowcare/src/views/PetInfoPage/PetInfoPage.js b/bowwowcare/src/views/PetInfoPage/PetInfoPage.js
@@ -9,13 +9,12 @@ function PetInfoPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const params = useParams();
-  //console.log(location.state.pet)
   const pet = location.state.pet;
-  const petname = location.state.pet.petname;
+  const petname = location.state.pet.name;
   const gender = location.state.pet.gender;
   const birthDate = location.state.pet.birthDate.substring(0,10).split('-').join('.');
-  const adoptDate = location.state.pet.adoptDate.substring(0,10).split('-').join('.');
-  const fileImg = location.state.pet.fileImg;
+  const adoptDate = location.state.pet.adoptionDate.substring(0,10).split('-').join('.');
+  const fileImg = location.state.pet.petImg;
 
   return (
     <div className="px-8">
@@ -27,7 +26,7 @@ function PetInfoPage() {
             <div className="rounded-full border w-14 h-14 mb-5">
                     {fileImg && (
                       <img
-                        src={URL.createObjectURL(fileImg)}
+                        src={fileImg}
                         alt="프로필 이미지"
                         className="rounded-full w-14 h-14"
                       ></img>