Select Git revision
ListItem.js
ListItem.js 10.49 KiB
import '../assets/listitem.css';
import '../assets/App.css';
import '../assets/style.css';
import { useState, useEffect, useRef } from 'react';
const apiUrl = process.env.REACT_APP_API_URL;
function ListItem( {crew, event, updateApplicants} ){
const token = localStorage.getItem('authToken');
const userID = localStorage.getItem('userID');
const [crewRegisterModal, setCrewRegisterModal] = useState(false);
const [eventRegisterModal, setEventRegisterModal] = useState(false)
const [crewCapacity, setCrewCapacity] = useState(0);
const [eventCapacity, setEventCapacity] = useState(0);
const [crewRegionNames, setCrewRegionNames] = useState({}); //상위지역, 하위지역 이름 저장
const [eventRegionNames, setEventRegionNames] = useState({});
/*const sportTypes = [
{
sportTypeId: 1,
sportName: "러닝",
metadata: {
distance: ["3~4km", "5~6km", "7~8km", "9km 이상"],
pace: ["4:00~4:30", "4:30~5:00", "5:00~5:30", "5:30~6:00", "6:00~6:30", "6:30 이상"]
}
},
{
sportTypeId: 2,
sportName: "헬스",
metadata: {
experience: ["초보자 (0~1년)", "중급자 (2~3년)", "상급자 (3년 이상)"]
}
},
{
sportTypeId: 3,
sportName: "클라이밍",
metadata: {
difficulty: ["상관 없음", "V1", "V2", "V3", "V4", "V5", "V6", "V7", "V8+"]
}
}
];*/
const sportTypes = ["러닝", "클라이밍", "헬스"];
const handleCrewRegisterModal = async (crewID) => {
setCrewRegisterModal(true);
try {
console.log("get 실행", crew);
const response = await fetch(`${apiUrl}/api/crews/${crewID}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token,
},
});
if (!response.ok) {
const errorData = await response.json();
console.log(errorData);
console.log(crewID);
alert(errorData);
} else{
const crewData = await response.json();
setCrewCapacity(crewData.currentMemberCount);
}
} catch (error) {
console.error(error);
alert(error);
}
}
const handleEventRegisterModal = () => {
setEventRegisterModal(true);
}
const handleModalClose = () => {
setCrewRegisterModal(false);
setEventRegisterModal(false);
} //모달창 닫기
useEffect(() => {
if (crewRegisterModal || eventRegisterModal) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
return () => {
document.body.style.overflow = 'auto';
};
}, [crewRegisterModal, eventRegisterModal]);
const handleCrewRegister = async (crewID) => {
/*try {
const response = await fetch(`${apiUrl}/api/crews/${crewID}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token,
},
});
if (!response.ok) {
const errorData = await response.json();
console.log(errorData);
console.log(crewID);
alert(errorData);
} else{
const crewData = await response.json();
setCrewCapacity(crewData.currentMemberCount);
}
} catch (error) {
console.error(error);
alert(error);
}*/
const postResponse = await fetch(`${apiUrl}/api/crews/${crewID}/members`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token,
},
body: JSON.stringify({
'userID': userID,
'role': null
})
});
if (postResponse.ok) {
console.log('크루 가입 성공:', postResponse);
//updateApplicants(crewID, crewCapacity);
console.log(crew.id, crew.capacity);
alert('크루 가입이 완료되었습니다.');
} else {
const postErrorData = await postResponse.json();
alert('가입 실패:', postErrorData);
}
};
const handleEventRegister = async (eventID) => {
try {
const response = await fetch(`${apiUrl}/api/events/${eventID}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token,
},
});
if (!response.ok) {
const errorData = await response.json();
console.log(errorData);
alert(errorData);
} else {
const eventData = await response.json();
setEventCapacity(eventData.currentMemberCount);
}
} catch (error) {
console.error(error);
alert(error);
}
const postResponse = await fetch(`${apiUrl}/events/${eventID}/members`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': token,
},
});
if (postResponse.ok) {
console.log('모임 가입 성공:', postResponse);
//updateApplicants(eventID, crewCapacity);
alert('모임 가입이 완료되었습니다.');
} else {
const postErrorData = await postResponse.json();
alert('가입 실패:', postErrorData);
}
};
useEffect(() => {
console.log(crew);
const fetchRegionData = async () => {
if (crew?.regionID) {
try {
const response = await fetch(`${apiUrl}/api/regions/${crew.regionID}`);
const regionData = await response.json();
console.log(regionData.regionName);
const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`);
const parentRegionData = await parentResponse.json();
console.log(parentRegionData.regionName);
setCrewRegionNames({
regionName: regionData.regionName,
parentRegionName: parentRegionData.regionName,
});
} catch (error) {
console.error(error);
}
}
};
fetchRegionData();
}, [crew]);
useEffect(() => {
const fetchRegionData = async () => {
if (event?.regionID) {
try {
const response = await fetch(`${apiUrl}/api/regions/${event.regionID}`);
const regionData = await response.json();
const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`);
const parentRegionData = await parentResponse.json();
setEventRegionNames({
regionName: regionData.regionName,
parentRegionName: parentRegionData.regionName,
});
} catch (error) {
console.error(error);
}
}
};
fetchRegionData();
}, [event]);
return(
<div className="listingItems">
{crew && (
<div className="listingItem">
<p className='title'>{crew.name}</p>
<p className='location'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{crewRegionNames.parentRegionName} {crewRegionNames.regionName}
</p>
<p className='type'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[crew.sportTypeId - 1]}
</p>
<p className='people'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{crew.capacity}
</p>
<button className='itemButton' onClick={()=>handleCrewRegisterModal(crew.crewID)}>신청하기</button>
{crewRegisterModal &&
<div className="modalContainer">
<div className="modalContents">
<button className='modalCloseButton' onClick={handleModalClose}>닫기</button>
<div className="crewName">{crew.name}</div>
<div className="crewInfo">
<div className="crewRegion">
지역 <span>{crewRegionNames?.parentRegionName} {crewRegionNames?.regionName}</span>
</div>
<div className="crewType">
종목 <span>{sportTypes[crew.sportTypeId - 1]}</span>
</div>
<div className="crewFee">
가입 비용 <span>{crew.fee_krw}</span>
</div>
<div className="crewCapacity">
정원 <span>{crewCapacity}/{crew.capacity}</span>
</div>
<div className="crewBio">
크루 소개 <span>{crew.description}</span>
</div>
</div>
<button className="createRegisterButton" onClick={()=>handleCrewRegister(crew.crewID)}>가입하기</button>
</div>
</div>
}
</div>
)}
{event && (
<div className="listingItem">
<p className='title'>{event.name}</p>
<p className='location'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{eventRegionNames.parentRegionName} {eventRegionNames.regionName}
</p>
<p className='type'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[event.sportTypeId - 1]}
</p>
<p className='people'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{event.capacity}
</p>
<button className='itemButton' onClick={()=>handleEventRegisterModal(event.evetID)}>신청하기</button>
{eventRegisterModal &&
<div className="modalContainer">
<div className="modalContents">
<button className='modalCloseButton' onClick={handleModalClose}>닫기</button>
<div className="eventName">{event.name}</div>
<div className="eventInfo">
<div className="eventRegion">
지역 <span>{eventRegionNames.parentRegionName} {eventRegionNames.regionName}</span>
</div>
<div className="eventType">
종목 <span>{sportTypes[event.sportTypeId - 1]}</span>
</div>
<div className="eventDate">
운동 일시 <span>{event.eventDate}</span>
</div>
<div className="eventCapacity">
정원 <span>{eventCapacity}/{event.capacity}</span>
</div>
<div className="eventCondition">
조건 <span>{event.feeCondition}</span>
</div>
</div>
<button className="createRegisterButton" onClick={()=>handleEventRegister(event.eventID)}>참여하기</button>
</div>
</div>
}
</div>
)}
</div>
);
}
export default ListItem;