import { useState,useEffect } from "react"; import Button from "../components/Button"; import CalendarWeek2 from "../components/CalendarWeek2" import "../styles/HomeMake.css" import axios from "axios"; import { useNavigate, useParams } from "react-router-dom"; function UserTimeInfo() { const [state, setState] = useState(true); const [availableSchedules, setAvailableSchedules] = useState([]); const [availableTimes, setAvailableTimes] = useState([]); const {id} = useParams(); const [startTime, setStartTime] = useState(0); const [endTime, setEndTiem] = useState(10); const [today, setToday] = useState(new Date()); const [startDate, setStartDate] = useState(new Date(2023,10,30)); const [endDate, setEndDate] = useState(new Date(2023,11,2)); const handleState = () => { setState((state) => !state); } const handleCalendar = (value) => { console.log('Selected Date:', value); }; useEffect(() => { const fetchData = async () => { try { const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/`); console.log(response.data.title); } catch (error) { console.error(error); } }; fetchData(); }, [id]); const handleAlert = () => { // let sat = [...availableTimes].sort(); const sat = []; // state에 따라서 가능한 시간을 선택한 거라면 그냥 넘어가고 // 불가능한 시간을 선택한 거라면 전부 날짜 범위에 맞춰서 뒤집어줘야 한다. // 여기 수정해야함 if(!state){ for(let day = startDate - 0; day <= endDate - 0; day+=((60*60*24*1000))){ for(let time = startTime; time < endTime; time++){ if(!availableTimes.includes(day+time)){ sat.push(day+time); } } } } else{ sat.push(...availableTimes); } sat.sort(); console.log(state, sat); const aa = []; let t = []; let l = availableTimes[0]; sat.forEach((em) => { if(parseInt(l/100)!==parseInt(em/100)){ t=[]; } const newDate = new Date(parseInt(em)); const availableDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate(); t.push(em%100); aa.push({availableDate: availableDate, availableTimes: t}) }); const groupedData = aa.reduce((acc, item) => { if (!acc[item.availableDate]) { acc[item.availableDate] = { availableDate: item.availableDate, availableTimes: new Set(item.availableTimes) }; } else { item.availableTimes.forEach(time => acc[item.availableDate].availableTimes.add(time)); } return acc; }, {}); const compressedData = Object.values(groupedData).map(item => { return { availableDate: item.availableDate, availableTimes: [...item.availableTimes] }; }); setAvailableSchedules(compressedData); console.log(availableSchedules); console.log(state); } const isContain = (value) => { return availableTimes.includes(value); } return ( <div className="center-container"> <Button type="button" text="가능한 시간" onClick={handleState} /> <Button type="button" text="불가능한 시간" onClick={handleState} /> <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} /> <Button type="submit" text="시작하기" onClick={handleAlert} /> </div> ); } export default UserTimeInfo;