Skip to content

Commit

Permalink
Merge pull request #16 from gdsc-ssu/feat/#3/찾은유기동물등록록api
Browse files Browse the repository at this point in the history 
[Feat] 찾은 유기동물 등록 api 연동
  • Loading branch information
@candosh
candosh authored Feb 17, 2024
2 parents 4397187 + f717eb7 commit 44a672b
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 18 deletions.
112 changes: 95 additions & 17 deletions src/pages/Registration.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
// 3.0 내가 찾은 유기동물 등록하기 페이지

import React, { useState, useRef } from "react";
import React, { useState, useRef, useEffect } from "react";
import { Header, MHeader } from "../components";
import { bg2, RegistDropPet } from "../images";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { useLocation } from "react-router-dom";
import axios from "axios";

const Registration = () => {
const isMobile = window.innerWidth <= 393;
Expand All @@ -13,11 +15,17 @@ const Registration = () => {
const [imgBase64, setImgBase64] = useState("");
const inputRef = useRef();

// 업로드 api 로직 추가 해야함
const location = useLocation();
const queryString = location.search.slice(1);

const handleCompleteClick = () => {
navigate("/research");
};
// 입력 필드들 상태
const [registrarName, setRegistrarName] = useState("");
const [connectNumber, setConnectNumber] = useState("");
const [breed, setBreed] = useState("");
const [gender, setGender] = useState("");
const [isNeutered, setIsNeutered] = useState("");
const [findlocation, setFindlocation] = useState("");
const [significantReport, setSignificantReport] = useState("");

// 이미지 변경 핸들러 부분
const imageChange = (e) => {
Expand All @@ -34,6 +42,43 @@ const Registration = () => {
}
};

// api 연동 부분
const handleCompleteClick = async () => {
const formData = new FormData();

formData.append("photo", selectedImage);
formData.append("is_dog", queryString === "dog" ? true : false);
formData.append("breed", breed);
formData.append("gender", gender);
formData.append("is_neutered", isNeutered === "yes" ? true : false);
formData.append("name", registrarName);
formData.append("shelter_location", "Not protected yet");
formData.append("shelter_contact", connectNumber);
formData.append("location", findlocation);
formData.append("notes", significantReport);
formData.append("is_adopted", false);
formData.append("password", "animal");

try {
const response = await axios.post(
"https://34.64.68.236.nip.io/animals",
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
);

console.log("Image uploaded successfully:", response.data);
navigate("/research");
} catch (error) {
console.log("FormData to be sent:", Array.from(formData.entries()));

console.error("Error during the fetch operation:", error);
}
};

return (
<>
{isMobile ? <MHeader /> : <Header />}
Expand Down Expand Up @@ -75,6 +120,8 @@ const Registration = () => {
as="input"
type="text"
placeholder="Please enter it."
value={registrarName}
onChange={(e) => setRegistrarName(e.target.value)}
/>
</S.ContentContainer>
<S.ContentContainer>
Expand All @@ -85,43 +132,72 @@ const Registration = () => {
as="input"
type="text"
placeholder="Please enter it."
value={connectNumber}
onChange={(e) => setConnectNumber(e.target.value)}
/>
</S.ContentContainer>
</>
</S.LeftContainer>
<S.RightContainer>
<S.ContentContainer>
<S.ContentTitle>Breed</S.ContentTitle>
<S.ContentTitle>Where You found</S.ContentTitle>
<S.ContentInput
as="input"
type="text"
placeholder="Please enter it."
value={findlocation}
onChange={(e) => setFindlocation(e.target.value)}
/>
</S.ContentContainer>
<S.ContentContainer>
<S.ContentTitle>Where You found</S.ContentTitle>
<S.ContentTitle>Breed</S.ContentTitle>
<S.ContentInput
as="input"
type="text"
placeholder="Please enter it."
/>
as="select"
value={breed}
onChange={(e) => setBreed(e.target.value)}
>
<option value="">Please select</option>
{/* 강아지 */}
<option value="GoldenRetriever">GoldenRetriever</option>
<option value="Chihuahua">Chihuahua</option>
<option value="GermanShepherd">GermanShepherd</option>
<option value="Beagle">Beagle</option>
<option value="Poodle">Poodle</option>
<option value="British Shorthair">
British Shorthair
</option>
{/* 고양이 */}
<option value="American Shorthair">
American Shorthair
</option>
<option value="Bengal">Bengal</option>
<option value="Siamese">Siamese</option>
<option value="Persian">Persian</option>
<option value="Scottish Fold">Scottish Fold</option>
</S.ContentInput>
</S.ContentContainer>
<S.ContentContainer>
<S.ContentTitle>Neutered</S.ContentTitle>
<S.ContentInput as="select">
<S.ContentInput
as="select"
value={isNeutered}
onChange={(e) => setIsNeutered(e.target.value)}
>
<option value="">Please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="unknown">Unknown</option>
</S.ContentInput>
</S.ContentContainer>
<S.ContentContainer>
<S.ContentTitle>Gender</S.ContentTitle>
<S.ContentInput as="select">
<S.ContentInput
as="select"
value={gender}
onChange={(e) => setGender(e.target.value)}
>
<option value="">Please select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="unknown">Unknown</option>
<option value="M">Male</option>
<option value="F">Female</option>
</S.ContentInput>
</S.ContentContainer>
<S.ContentContainer>
Expand All @@ -130,6 +206,8 @@ const Registration = () => {
as="textarea"
type="text"
placeholder="Please enter it."
value={significantReport}
onChange={(e) => setSignificantReport(e.target.value)}
/>
</S.ContentContainer>
</S.RightContainer>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Select.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Link, useLocation } from "react-router-dom";
const Select = () => {
const location = useLocation();
const queryString = location.search.slice(1);

console.log(queryString);
return (
<S.Container>
<S.Background>
Expand Down

0 comments on commit 44a672b

Please sign in to comment.