Skip to content
Snippets Groups Projects
Select Git revision
  • 3d8aad3de47055df584d4cdb9b7c6effb5ccfa4a
  • main default protected
  • issue-28
3 results

ListItem.js

Blame
  • 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;