[ADD] 사용자 투표 정보 전송, 가져오기 및 가능/불가능 상태 표시

react-whenMeet/src/components/CalendarWeek2.jsx

@@ -3,7 +3,7 @@ import '../styles/Calendar.css'
 import MakeDay2 from "./MakeDay2";
 import TableCell from "./TableCell";
 
-function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){
+function CaculateWeek({ nowYear, nowMonth, week, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){
     const startDay = new Date(nowYear, nowMonth - 1, 1);
     const lastDay = new Date(nowYear, nowMonth, 0);
     const firstDay = startDay.getDay();
@@ -20,17 +20,16 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
         setIsDragging(!isDragging);
     };
 
-    const doCheck=[...availableTimes];
+    let doCheck=availableTimes;
+    doCheck.sort();
     const handleDragWhile = (newDate, idx, comp) => {
         if(!isDragging)return;
 
-        console.log(newDate-0+idx);
-
         const elm2 = document.getElementById(comp);
-        if(elm2.classList.contains("dragging")){
+        if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){
             const elm = document.getElementById(newDate-0+idx);
             elm.classList.remove("dragging")
-            doCheck.filter(key=>key!==newDate-0+idx);
+            doCheck = doCheck.filter((key)=>key!==(newDate-0+idx));
         }
         else {
             const elm = document.getElementById(newDate-0+idx);
@@ -45,14 +44,29 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
         setDragging();
     };
 
-    const handleClick = () => {
-        for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
-            for(let indx = startTime; indx <= endTime; indx++){
-                const elm = document.getElementById(day + indx);
-                elm.classList.remove("dragging")
-            }
+    const handleClick = (newDate, idx, comp) => {
+        // for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+        //     for(let indx = startTime; indx <= endTime; indx++){
+        //         const elm = document.getElementById(day + indx);
+        //         elm.classList.remove("dragging")
+        //     }
+        // }
+        // setAvailableTimes([])
+        
+        const elm2 = document.getElementById(comp);
+        // console.log(comp, elm2);
+        if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){
+            const elm = document.getElementById(newDate-0+idx);
+            elm.classList.remove("dragging")
+            doCheck = doCheck.filter((key)=>key!==(newDate-0+idx));
         }
-        setAvailableTimes([])
+        else {
+            const elm = document.getElementById(newDate-0+idx);
+            elm.classList.add("dragging")
+            doCheck.push(newDate-0+idx);
+        }
+
+        setAvailableTimes(doCheck)
     }
 
     const weekArr = [];
@@ -108,7 +122,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
     );
 }
 
-function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
+function CalendarWeek2({ state, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
     const [currentDay, setCurrentDay] = useState(today);
     // 일요일 0 시작
     const nowDay = startDate.getDay();
@@ -183,9 +197,14 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate
                 <button onClick={nextWeek}>next</button>
             </div>
             <h1>{nowYear}</h1>
+            {
+                state ?
+                <span>가능한 시간</span> :
+                <span>불가능한 시간</span>
+            }
             <table className="calendarTable">
                 <MakeDay2/>
-                <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+                <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
             </table>
         </div>
     );

react-whenMeet/src/components/HomeParticipateForm.js

@@ -55,7 +55,16 @@ function HomeParticipateForm() {
 
                         try{
                             const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
-                            navigate('UserTimeInfo', { state: { id:id, startDate: response.data.startDate, endDate:response.data.endDate }});
+                            const startDate = response.data.startDate;
+                            const endDate = response.data.endDate;
+                            try{
+                                const response = await axios.get(`http://localhost:3000/meetings/${id}/my/schedules`);
+                                // console.log(startDate, endDate);
+                                navigate('UserTimeInfo', { state: { id:id, startDate: startDate, endDate: endDate, schedules:response.data.schedules }});
+                            }
+                            catch(e){
+                                console.log(e);
+                            }
                         }
                         catch(e){
                             console.log(e);
@@ -103,7 +112,16 @@ function HomeParticipateForm() {
                 });
                 try{
                     const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
-                    navigate('UserTimeInfo', { state: { id:id, startDate: response.data.startDate, endDate:response.data.endDate }});
+                    const startDate = response.data.startDate;
+                    const endDate = response.data.endDate;
+                    try{
+                        const response = await axios.get(`http://localhost:3000/meetings/${id}/my/schedules`);
+                        // console.log(startDate, endDate);
+                        navigate('UserTimeInfo', { state: { id:id, startDate: startDate, endDate: endDate, schedules:response.data.schedules }});
+                    }
+                    catch(e){
+                        console.log(e);
+                    }
                 }
                 catch(e){
                     console.log(e);

react-whenMeet/src/components/TableCell.jsx

@@ -18,7 +18,7 @@ export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i
             onDragStart={()=>hds(newDate, i, k)}
             onDragEnter={()=>hdw(newDate, i, k)}
             onDragEnd={()=>hde(newDate, i)}
-            onClick={()=>handleClick(newDate)}>
+            onClick={()=>handleClick(newDate,i,k)}>
             {value} </td>
         );
     }

react-whenMeet/src/routes/UserTimeInfo.js

@@ -6,12 +6,20 @@ import axios from "axios";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 function UserTimeInfo() {
+    const location = useLocation();
     const [state, setState] = useState(true);
-    const [availableSchedules, setAvailableSchedules] = useState([]);
-    const [availableTimes, setAvailableTimes] = useState([]);
-    const {id} = useParams();
+    const [availableSchedules, setAvailableSchedules] = useState(location.state.schedules);
 
-    const location = useLocation();
+    const at = [];
+    for(let key of availableSchedules){
+        const date = new Date(key.availableDate) - 0;
+        for(let t of key.availableTimes){
+            at.push(date+t);
+        }
+    }
+
+    const [availableTimes, setAvailableTimes] = useState(at);
+    const {id} = useParams();
 
     const [startTime, setStartTime] = useState(0);
     const [endTime, setEndTime] = useState(10);
@@ -43,7 +51,7 @@ function UserTimeInfo() {
         }
     };
     
-    const handleAlert = () => {
+    const handleAlert = async () => {
         const sat = [];
         // state에 따라서 가능한 시간을 선택한 거라면 그냥 넘어가고
         // 불가능한 시간을 선택한 거라면 전부 날짜 범위에 맞춰서 뒤집어줘야 한다.
@@ -91,9 +99,58 @@ function UserTimeInfo() {
         });
         
         setAvailableSchedules(compressedData);
-        console.log(availableSchedules);
+        if(location.state.schedules){
+            try {
+                const response = await axios.put(`http://localhost:3000/meetings/${id}/my/schedules/bulk`,{
+                    schedules: compressedData
+                });
+            }
+            catch (error) {
+                if (error.response) {
+                    if (error.response.status === 401) {
+                        alert('Password를 잘못 입력하였습니다');
+                    } else if (error.response.status === 404) {
+                        alert('해당하는 이름이 존재하지 않습니다');
+                    } 
+                    else if(error.response.status === 400){
+                        alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요")
+                    }
+                    else {
+                        alert(`Unexpected status code: ${error.response.status}`);
+                    }
+                } else {
+                    console.error(error);
+                }
+                
+            }
+        }
+        else{
+            try {
+                const response = await axios.post(`http://localhost:3000/meetings/${id}/my/schedules/bulk`,{
+                    schedules: compressedData
+                });
+            }
+            catch (error) {
+                if (error.response) {
+                    if (error.response.status === 401) {
+                        alert('Password를 잘못 입력하였습니다');
+                    } else if (error.response.status === 404) {
+                        alert('해당하는 이름이 존재하지 않습니다');
+                    } 
+                    else if(error.response.status === 400){
+                        alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요")
+                    }
+                    else {
+                        alert(`Unexpected status code: ${error.response.status}`);
+                    }
+                } else {
+                    console.error(error);
+                }
+                
+            }
+        }
         
-        console.log(state);
+
     }
 
     const isContain = (value) => {
@@ -112,7 +169,7 @@ function UserTimeInfo() {
                 text="불가능한 시간"
                 onClick={handleState2}
             />
-            <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+            <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
             <Button
                 type="submit"
                 text="시작하기"