timeInquiry.js

import React, { useState, useEffect } from 'react';
import timeInquiryStyles from './timeInquiry.module.css';
import CreateVote from './createVote';

//import MyScheduleApp from '../calendar/calendar';

function TimeItem({ item, setSelectedTimes }){
    const [isChecked, setIsChecked] = useState(false);

    const onChangeCheck = () => {
        if (!isChecked) {
            setSelectedTimes((prev) => [...prev, item]);
            setIsChecked((prev) => !prev);
        } else {
            setSelectedTimes((prev) =>
                prev.filter((data) => (
                    data.date !== item.date ||
                    data.startTime !== item.startTime ||
                    data.endTime !== item.endTime
                ))
            );
            setIsChecked((prev) => !prev);
        }
    };

    return(
        <li className={isChecked ? "checked" : " "}>
            <span>{item.date} {item.startTime}-{item.endTime}</span>
            <label>
                <input 
                    type='checkbox' 
                    onChange={onChangeCheck}
                    checked={isChecked}
                />
            </label>
        </li>
    );
}

function TimeInquiry({ isOpen, onClose, data }){
    const [inquirydata, setInquirydata] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [selectedTimes, setSelectedTimes] = useState([]);

    const optionsArray = Array.from({ length: 1441 / 30 }, (_, index) => index * 30 + 30);

    const [bodyData, setBodyData] = useState({
        startDate: '',
        endDate: '',
        startTime: '',
        endTime: '',
        interval: '30',
    });

    const [timeData, setTimeData] = useState({
        startHour: '',
        startMinute: '',
        endHour: '',
        endMinute: ''
    });      

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setBodyData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    };

    const handleTimeChange = (e) => {
        const { name, value } = e.target;
        setTimeData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    };

    const handleSave = () => {
        timeInquiry({
            ...bodyData,
            startTime: `${timeData.startHour|| '00'}:${timeData.startMinute || '00'}`,
            endTime: `${timeData.endHour|| '00'}:${timeData.endMinute || '00'}`,
        });
    };

    const timeInquiry = async (body)=>{
        setIsLoading(true);

        if(body.startDate === ''){
            alert('시작 날짜를 입력해주세요.');
            return;
        } else if(body.endDate === ''){
            alert('종료 날짜를 선택해주세요.');
            return;
        } else if(body.startTime === ''){
            alert('시작 시간을 선택해주세요.');
            return;
        } else if(body.endTime === ''){
            alert('종료 시간을 선택해주세요.');
            return;
        }else if(body.interval === ''){
            alert('요구 시간을 선택해주세요.');
            return;
        }

        try{
            const response = await fetch(`/api/recruits/${data.id}/times`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(body),
            });

            if (response.ok){
                const jsonData = await response.json();
                if(jsonData.length > 0){
                    const components = jsonData.map((item) => (
                        <TimeItem item={item} setSelectedTimes={setSelectedTimes}/>
                    ));
    
                    setInquirydata(components);
                }
            }else{
                throw new Error('Data loading error');
            }
        } catch(error){
            console.log('Error during fetch:', error);
        } finally{
            setIsLoading(false);
        }
    }

    return(
        <div className={timeInquiryStyles.timeInquiry}>
            {isOpen && (
            <div className={timeInquiryStyles.overlay} onClick={onClose}>
                <div className={timeInquiryStyles.modal} onClick={(e)=>e.stopPropagation()}>
                    <button className={timeInquiryStyles.x} onClick={onClose}>X</button>

                    <div className={timeInquiryStyles.top}>
                        <div>참여 가능 시간 조회</div>
                    </div>

                    <form onSubmit={handleSave}>
                        <div className={timeInquiryStyles.startDate}>
                            <label>시작 날짜*</label>
                            <input 
                                type="date" 
                                name="startDate" 
                                value={bodyData.startDate} 
                                onChange={handleInputChange}
                                min={data.startDate}
                                max={data.endDate}
                            />
                        </div>

                        <div className={timeInquiryStyles.endDate}>
                            <label>종료 날짜*</label>
                            <input 
                                type="date" 
                                name="endDate" 
                                value={bodyData.endDate} 
                                onChange={handleInputChange}
                                min={bodyData.startDate}
                                max={data.endDate}
                            />
                        </div>

                        <div className={timeInquiryStyles.time_select}>
                            <label>시작 시간*</label>
                            <div>
                                <select name="startHour" value={timeData.startHour} onChange={handleTimeChange}>
                                    {[...Array(24).keys()].map((hour) => (
                                        <option key={hour} value={hour < 10 ? `0${hour}` : `${hour}`}>
                                            {hour < 10 ? `0${hour}` : `${hour}`}
                                        </option>
                                    ))}
                                </select>
                                <span>:</span>
                                <select name="startMinute" value={timeData.startMinute} onChange={handleTimeChange}>
                                    <option name="minute" value='00'>00</option>
                                    <option name="minute" value='30'>30</option>
                                </select>
                            </div>
                        </div>
                                
                        <div className={timeInquiryStyles.time_select}>
                            <label>종료 시간*</label>
                            <div>
                                <select name="endHour" value={timeData.endHour} onChange={handleTimeChange}>
                                    {[...Array(24).keys()].map((hour) => (
                                        <option key={hour} value={hour < 10 ? `0${hour}` : `${hour}`}>
                                            {hour < 10 ? `0${hour}` : `${hour}`}
                                        </option>
                                    ))}
                                </select>
                                <span>:</span>
                                <select name="endMinute" value={timeData.endMinute} onChange={handleTimeChange}>
                                    <option name="minute">00</option>
                                    <option name="minute">30</option>
                                </select>
                            </div>
                        </div>

                        <div className={timeInquiryStyles.time_select}>
                            <label>요구 시간*</label>
                            <div>
                                <select name="interval" value={bodyData.interval} onChange={handleInputChange}>
                                {optionsArray.map((value) => (
                                    <option key={value} value={value}>
                                        {value}
                                    </option>
                                ))}
                                </select>
                            </div>
                        </div>

                        <div className={timeInquiryStyles.button}>
                            <button type="button" onClick={handleSave} className={timeInquiryStyles.inquiry}>조회</button>
                        </div>
                    </form>
                    
                    {!isLoading && 
                    <div>
                        <ul>
                            {inquirydata}
                        </ul>
                    </div>
                    }

                    <div className={timeInquiryStyles.voteButton}>
                        <div className={timeInquiryStyles.createVote}>
                            <CreateVote data={data} time={selectedTimes}/>
                        </div>
                    </div>
                    
                </div>
            </div>
            )}
        </div>
    )
}

export default TimeInquiry;