-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#50] feat: implement api integration
- GET /care/:type/:petId - POST /care/mission/:type
- Loading branch information
Showing
1 changed file
with
128 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,137 @@ | ||
| import React, { useState, useEffect, useContext } from 'react' | ||
| import Header from '../../components/Header' | ||
| import Lens from '../../assets/images/lens.png' | ||
| import dayjs from 'dayjs'; | ||
| import styled from "styled-components"; | ||
| import { behaviorType, colorVariants } from '../../utils/Dictionary'; | ||
| import { ThemeContext } from '../../context/ThemeProvider'; | ||
| import React, { useState, useEffect, useContext } from "react"; | ||
| import { useLocation } 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 Lens from "../../assets/images/lens.png"; | ||
| import dayjs from "dayjs"; | ||
| import { behaviorType, colorVariants } from "../../utils/Dictionary"; | ||
| import { ThemeContext } from "../../context/ThemeProvider"; | ||
|
|
||
| function CarePage({ type="aggression" }) { | ||
| const [cards, setCards] = useState([]); | ||
| const today = dayjs().format("YYYY-MM-DD"); | ||
| const [themeMode, setThemeMode] = useContext(ThemeContext); | ||
| function CarePage() { | ||
| const location = useLocation(); | ||
| const today = dayjs().format("YYYY-MM-DD"); | ||
| const [cards, setCards] = useState([]); | ||
| const [themeMode, setThemeMode] = useContext(ThemeContext); | ||
|
|
||
| useEffect(() => { | ||
| // TODO: GET cards | ||
| setCards([ | ||
| { | ||
| "id": 1, | ||
| "count": 3, | ||
| "missionDate": "", | ||
| "solution": "아이만의 공간을 만들어 그곳에서 편히 먹거나 쉬도록 켄넬교육을 시켜보세요.", | ||
| "aggressionType": [0], | ||
| "modifiedAt": "2023-02-28" | ||
| }, | ||
| { | ||
| "id": 1, | ||
| "count": 4, | ||
| "missionDate": "2023-02-28", | ||
| "solution": "사회화 시기에 사람, 다른 동물 등에 대한 사회화의 기회가 없는 경우에 발생할 수 있습니다. 낯선 사람이 간식을 줘보도록 해보세요.", | ||
| "aggressionType": [1, 2], | ||
| "modifiedAt": "2023-02-24" | ||
| }, | ||
| ]); | ||
| }, []); | ||
| const getCards = () => { | ||
| if (location?.state?.type && location?.state?.petId) { | ||
| axios({ | ||
| method: "GET", | ||
| url: `${API_URL}/care/${location.state.type}/${location.state.petId}`, | ||
| headers: authHeader(), | ||
| }).then((response) => { | ||
| if (response.status === 200) { | ||
| setCards(response.data); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| getCards(); | ||
| }, []); | ||
|
|
||
| const handleMission = (e) => { | ||
| // TODO: POST mission | ||
| alert("오늘 미션에 성공하였습니다!"); | ||
| // TEST | ||
| setCards([ | ||
| { | ||
| "id": 1, | ||
| "count": 3, | ||
| "missionDate": "2023-03-05", | ||
| "solution": "아이만의 공간을 만들어 그곳에서 편히 먹거나 쉬도록 켄넬교육을 시켜보세요.", | ||
| "aggressionType": [0], | ||
| "modifiedAt": "2023-02-28" | ||
| }, | ||
| { | ||
| "id": 1, | ||
| "count": 4, | ||
| "missionDate": "2023-02-28", | ||
| "solution": "사회화 시기에 사람, 다른 동물 등에 대한 사회화의 기회가 없는 경우에 발생할 수 있습니다. 낯선 사람이 간식을 줘보도록 해보세요.", | ||
| "aggressionType": [1, 2], | ||
| "modifiedAt": "2023-02-24" | ||
| }, | ||
| ]); | ||
| const handleMission = (cardId) => (e) => { | ||
| if (location?.state?.type && location?.state?.petId) { | ||
| axios({ | ||
| method: "POST", | ||
| url: `${API_URL}/care/mission/${location.state.type}`, | ||
| headers: authHeader(), | ||
| data: { | ||
| id: cardId, | ||
| missionDate: today, | ||
| }, | ||
| }).then((response) => { | ||
| if (response.status === 200) { | ||
| getCards(); | ||
| if (response.data?.message) { | ||
| alert(response.data.message); | ||
| } else { | ||
| alert("오늘 미션에 성공하였습니다!"); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="container mx-auto px-8 w-screen h-screen"> | ||
| <Header /> | ||
| {/* <Card> | ||
| <div className="flex flex-col gap-2"> | ||
| <span>솔루션 수행 후에 오늘 미션 도전을 눌러주세요!</span> | ||
| <span>지정된 횟수만큼 미션을 수행하면</span> | ||
| <span>리워드를 드립니다!️</span> | ||
| return ( | ||
| <div className="container mx-auto px-8 w-screen h-screen"> | ||
| <Header /> | ||
| <div | ||
| className={`shadow-md rounded-md ${ | ||
| colorVariants["bg" + themeMode + "s"] | ||
| } px-4 py-6 relative`} | ||
| > | ||
| <div className="flex flex-col gap-2"> | ||
| <span>솔루션 수행 후에 오늘 미션 도전을 눌러주세요!</span> | ||
| <span>지정된 횟수만큼 미션을 수행하면</span> | ||
| <span>리워드를 드립니다!️</span> | ||
| </div> | ||
| <img | ||
| src={Lens} | ||
| width="120px" | ||
| className="absolute bottom-0 right-0" | ||
| alt="Lens" | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col gap-6 mt-8"> | ||
| {cards?.length | ||
| ? cards.map((card) => ( | ||
| <div className="shadow-md rounded-md"> | ||
| <div | ||
| className={`px-4 py-2 ${ | ||
| colorVariants["bg" + themeMode] | ||
| } rounded-t-md shadow-t-md text-white`} | ||
| > | ||
| {card.modifiedAt} | ||
| </div> | ||
| <img src={Lens} width="120px" className="absolute bottom-0 right-0" /> | ||
| </Card> */} | ||
| <div className={`shadow-md rounded-md ${colorVariants['bg'+themeMode+'s']} px-4 py-6 relative`}> | ||
| <div className="flex flex-col gap-2"> | ||
| <span>솔루션 수행 후에 오늘 미션 도전을 눌러주세요!</span> | ||
| <span>지정된 횟수만큼 미션을 수행하면</span> | ||
| <span>리워드를 드립니다!️</span> | ||
|
|
||
| <div className="p-4"> | ||
| <div className="flex justify-between items-center"> | ||
| <span>{card.count}회 / 30회</span> | ||
| {today === card.missionDate ? ( | ||
| <button | ||
| className="bg-gray-200 py-2 px-4 rounded-md" | ||
| disabled | ||
| > | ||
| 오늘 미션 성공 | ||
| </button> | ||
| ) : ( | ||
| <button | ||
| className={`${ | ||
| colorVariants["bg" + themeMode + "s"] | ||
| } py-2 px-4 rounded-md`} | ||
| onClick={handleMission(card.id)} | ||
| > | ||
| 오늘 미션 도전 | ||
| </button> | ||
| )} | ||
| </div> | ||
| <div className="py-4">{card.solution}</div> | ||
| {location?.state?.type === "aggression" ? ( | ||
| <div class="flex justify-between overflow-x-hidden w-full"> | ||
| <div class="flex w-full overflow-x-auto [&>div]:flex-shrink-0 pb-2"> | ||
| {card.aggressionType?.map((aggressionType) => ( | ||
| <div | ||
| className={`rounded-md px-2 ${ | ||
| colorVariants["bg" + aggressionType] | ||
| }`} | ||
| > | ||
| {behaviorType[aggressionType]} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| <img src={Lens} width="120px" className="absolute bottom-0 right-0" /> | ||
| </div> | ||
| <div className="flex flex-col gap-6 mt-8"> | ||
| {cards?.length ? cards.map(card => | ||
| <div className="shadow-md rounded-md"> | ||
| <div className={`px-4 py-2 ${colorVariants['bg'+themeMode]} rounded-t-md shadow-t-md text-white`}>{card.modifiedAt}</div> | ||
|
|
||
| <div className="p-4"> | ||
| <div className="flex justify-between items-center"> | ||
| <span>{card.count}회 / 30회</span> | ||
| {today === card.missionDate ? ( | ||
| <button className="bg-gray-200 py-2 px-4 rounded-md" disabled>오늘 미션 성공</button> | ||
| ) : ( | ||
| <button className={`${colorVariants['bg'+themeMode+'s']} py-2 px-4 rounded-md`} onClick={handleMission}>오늘 미션 도전</button> | ||
| )} | ||
| </div> | ||
| <div className="py-4">{card.solution}</div> | ||
| {type==="aggression" ? ( | ||
| <div class="flex justify-between overflow-x-hidden w-full"> | ||
| <div class="flex w-full overflow-x-auto [&>div]:flex-shrink-0 pb-2"> | ||
| {card.aggressionType?.map(aggressionType => | ||
| <div className={`rounded-md px-2 ${colorVariants['bg'+aggressionType]}`}>{behaviorType[aggressionType]}</div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| </div> | ||
| ) | ||
| </div> | ||
| )) | ||
| : null} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default CarePage | ||
| export default CarePage; |