Merge: pull request #125 from #114/dept/reserve-api

#114/dept/reserve api
HGU-WALAB · Jan 25, 2024 · ac4abd5 · ac4abd5
2 parents 0ad6f8f + a6d913a
commit ac4abd5
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 57 deletions.
diff --git a/src/api/reserveApi.ts b/src/api/reserveApi.ts
@@ -66,11 +66,11 @@ export const regularCreateReserve = async (data: RegularReserveAdd) => {
 // reservedlist by date
 // ToDo: api 수정 시 date 넘겨주기
 export const reservedListByDate = async (deptId: number, selectedDate: string) => {
-  const response = await axiosInstance.get(`${endpoints.reserve.datelist}/${deptId}`, {
-    params: {
+  const response = await axiosInstance.post(`${endpoints.reserve.datelist}/${deptId}`, {
+    data: {
       reserveDate: selectedDate,
     },
   });
-  console.log('날짜에 따른 예약된 정보 확인', response);
+  // console.log('날짜에 따른 예약된 정보 확인', response);
   return response;
 };
diff --git a/src/sections/reserve/reserve-daily-space.tsx b/src/sections/reserve/reserve-daily-space.tsx
@@ -16,8 +16,8 @@ interface Props {
     reserveDate: Date;
     startTime: string;
     endTime: string;
-    // headCount: number;
   };
+  reserveList: IReservedItem[]; // 선택된 날짜에 예약된 정보들
   space: EXSpaceItem;
   handleModalControl: (data: any) => void;
 }
@@ -27,35 +27,54 @@ function timeToMinutes(time: string) {
   const totaltime = parseInt(hours, 10) * 60 + parseInt(minutes, 10);
   return totaltime;
 }
+
 function isStartTimeRangeValid(selectST: number, availST: number, availET: number) {
   let pass = false;
-  if (Number.isNaN(selectST) || Number.isNaN(availST)) pass = true;
+
+  if (Number.isNaN(selectST)) pass = true;
   else if (selectST >= availST && selectST <= availET) pass = true;
   else pass = false;
   return pass;
 }
-function isEndTimeRangeValid(selectST: number, availST: number, selectET: number, availET: number) {
-  let pass = false;
-  if (Number.isNaN(selectET) || Number.isNaN(availET)) pass = true;
-  else if (selectST >= availST && selectET >= selectST && selectET <= availET) pass = true;
+function isEndTimeRangeValid(
+  selectST: number,
+  availST: number,
+  selectET: number,
+  availET: number,
+  reserveList: IReservedItem[]
+) {
+  let pass = true;
+  if (Number.isNaN(selectET)) pass = true; // 둘다 숫자가 아닐 때
+  else if (selectST >= availST && selectET <= availET) pass = true;
   else pass = false;
+
+  if (reserveList.length !== 0) {
+    for (let i = 0; i < reserveList.length; i += 1) {
+      if (pass === false) break;
+      const reservedST = timeToMinutes(reserveList[i].startTime);
+      const reservedET = timeToMinutes(reserveList[i].endTime);
+
+      if (
+        (reservedST <= selectST && reservedET <= selectET) ||
+        (reservedST <= selectST && selectET <= reservedET) ||
+        (selectST <= reservedST && reservedET <= selectET) ||
+        (selectST <= reservedST && selectET <= reservedET)
+      ) {
+        pass = false;
+        break;
+      } else pass = true;
+    }
+  }
   return pass;
 }
 
-export default function DailySpaceCardList({ space, selectedData, handleModalControl }: Props) {
-  const {
-    // id,
-    // name,
-    headCount,
-    // availableStart,
-    // availableEnd,
-    detail,
-    // lableColor,
-    // availability,
-    image,
-    // regDate,
-    // modDate,
-  } = space;
+export default function DailySpaceCardList({
+  space,
+  selectedData,
+  reserveList,
+  handleModalControl,
+}: Props) {
+  const { headCount, detail, image } = space;
 
   const availableStartTime = space.availableStart.toLocaleString();
   const availableEndTime = space.availableEnd.toLocaleString();
@@ -70,7 +89,8 @@ export default function DailySpaceCardList({ space, selectedData, handleModalCon
   const [availableEndMinutes, setAvailableEndMinutes] = useState(timeToMinutes(availableEndTime));
   const [isStartTimeWithinRange, setIsStartTimeWithinRange] = useState(true);
   const [isEndimeWithinRange, setIsEndimeWithinRange] = useState(true);
-  // const [isHeadCountWithRange, setIsHeadCountWithRange] = useState(true);
+
+  const reservedList = reserveList;
 
   useEffect(() => {
     setSelectedStartMinutes(timeToMinutes(selectedData.startTime));
@@ -85,10 +105,10 @@ export default function DailySpaceCardList({ space, selectedData, handleModalCon
         selectedStartMinutes,
         availableStartMinutes,
         selectedEndMinutes,
-        availableEndMinutes
+        availableEndMinutes,
+        reservedList
       )
     );
-    // setIsHeadCountWithRange(isHeadCountVaild(selectedData.headCount, headCount));
   }, [
     selectedData.startTime,
     selectedData.endTime,
@@ -97,9 +117,9 @@ export default function DailySpaceCardList({ space, selectedData, handleModalCon
     availableEndMinutes,
     availableStartMinutes,
     headCount,
-    // selectedData.headCount,
     selectedEndMinutes,
     selectedStartMinutes,
+    reservedList,
   ]);
 
   const renderImages = (
@@ -151,12 +171,10 @@ export default function DailySpaceCardList({ space, selectedData, handleModalCon
       reserveDate: selectedData.reserveDate,
       startTime: selectedData.startTime,
       endTime: selectedData.endTime,
-      // headCount: selectedData.headCount,
       spaceId: space.spaceId,
       spaceName: space.name,
       spaceImage: space.image,
     };
-    // console.log('sendSelectedData', sendSelectedData);
     handleModalControl(sendSelectedData);
   };
 

diff --git a/src/sections/reserve/reserve-radio.tsx b/src/sections/reserve/reserve-radio.tsx
@@ -27,7 +27,7 @@ export default function RowRadioButtonsGroup({
       >
         <FormControlLabel value="daily" control={<Radio />} label="일일 대여" />
         <FormControlLabel value="regularly" control={<Radio />} label="정기 대여" />
-        {/* <FormControlLabel value="csv" control={<Radio />} label="CSV 파일 업로드" /> */}
+        <FormControlLabel value="csv" control={<Radio />} label="CSV 파일 업로드" />
       </RadioGroup>
     </FormControl>
   );

diff --git a/src/sections/reserve/view.tsx b/src/sections/reserve/view.tsx
@@ -1,5 +1,5 @@
 // react
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 // @mui
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
@@ -26,7 +26,7 @@ import ReserveDailyForm1 from './reserve-daily-form1';
 import DailySpaceCardList from './reserve-daily-space';
 import RegularlySpaceCardList from './reserve-regularly-space';
 import ReserveRegularyForm1 from './reserve-regularly-form1';
-// import ReserveCSVForm from './reserve-csv';
+import ReserveCSVForm from './reserve-csv';
 import DailyReserveFormDialog from './reserve-daily-dialog';
 import RegularlyReserveDialog from './reserve-regularly-dialog';
 
@@ -48,33 +48,32 @@ export default function ReserveView() {
       onSuccess: (data) => {
         // Log space IDs within the onSuccess callback
         data.forEach((space) => {
-          console.log('GetSpace', space);
-          axiosInstance.get(`${endpoints.reserve.schedule}/${space.spaceId}`).then((res) => {
-            console.log('예약된 정보 확인 by spaceId', space.spaceId, res.data);
-            setReserveInfo(res.data); // 해당 장소에 예약된 정보 리스트들 -> 날짜 선택시 해당 날자에
-          });
-        });
-      },
-    }
-  );
-  // 기관 id와 날짜에 해당하는 예약 정보들 확인
-  // ToDo: API 수정 시 정보 받고 예약 수정
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { data: reserveds } = useQuery<IReservedItem[]>(
-    ['reservedListByDate', reservedListByDate],
-    async () =>
-      reservedListByDate(deptId, selectedDailyData1.reserveDate.toISOString().split('T')[0]).then(
-        (response) => response.data
-      ),
-    {
-      onSuccess: (data) => {
-        data.forEach((reserved) => {
-          console.log('reservedListByDate', reserved);
+          // console.log('GetSpace', space);
+          const datas = axiosInstance
+            .get(`${endpoints.reserve.schedule}/${space.spaceId}`)
+            .then((res) => {
+              // console.log('예약된 정보 확인 by spaceId', space.spaceId, res.data);
+              setReserveInfo(res.data); // 해당 장소에 예약된 정보 리스트들 -> 날짜 선택시 해당 날자에
+            });
         });
       },
     }
   );
 
+  // ToDo: 더미데이터로 확인중
+  // const [reserveDatesList, setReserveDatesList] = useState<IReservedItem[]>([]);
+  // useEffect(() => {
+  //   // datereservelist가 변경될 때마다 실행
+  //   const updatedReserveDates = datereservelist.map((reserve) => ({
+  //     spaceId: reserve.space.spaceId,
+  //     startTime: reserve.startTime,
+  //     endTime: reserve.endTime,
+  //   }));
+  //   setReserveDatesList(updatedReserveDates);
+  //   console.log('reservedListByDate', updatedReserveDates);
+  // }, []);
+
+  // 더미데이터로 확인 중
   const settings = useSettingsContext();
   const [selectedDailyData1, setSelectedDailyData1] = useState({
     reserveDate: new Date(),
@@ -135,15 +134,61 @@ export default function ReserveView() {
     setSelectedRegularyData2(data); // 예약을 위한 모든 정보 선택
   };
 
+  // 기관 id와 날짜에 해당하는 예약 정보들 확인
+  // ToDo: API 수정 시 정보 받고 예약 수정
+  const [reserveDatesList, setReserveDatesList] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await reservedListByDate(
+          deptId,
+          selectedDailyData1.reserveDate.toISOString().split('T')[0]
+        );
+
+        setReserveDatesList(response.data);
+
+        const updatedReserveDates = reserveDatesList.map((reserve) => {
+          if (reserve && typeof reserve === 'object') {
+            console.log(' 예약된 정보들 확인', reserve);
+            return {
+              spaceId: reserve.space.spaceId,
+              startTime: reserve.startTime,
+              endTime: reserve.endTime,
+            };
+          }
+          return reserve; // return the original value if it's not an object
+        });
+
+        setReserveDatesList(updatedReserveDates);
+        // console.log('reservedListByDate', updatedReserveDates);
+      } catch (error) {
+        // Handle error appropriately (e.g., show an error message)
+        console.error('Error fetching reserved items:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    // ToDo: fetch 무한...
+    // fetchData();
+  }, [deptId, selectedDailyData1.reserveDate, reserveDatesList]);
+
   let DailySpaceCradList = null;
 
   if (spaces) {
     DailySpaceCradList = spaces.reduce((result, space) => {
+      // reserveDates 배열 내에서 현재 space의 spaceId와 일치하는 정보만 필터링
+      const filteredReserveDates = reserveDatesList.filter(
+        (reserve) => reserve.spaceId === space.spaceId
+      );
+
       const dailySpaceCardList = (
         // 대여 가능한 장소 보여주는 컴포넌트
         <DailySpaceCardList
           space={space} // 장소 하나 정보
           selectedData={selectedDailyData1} // 날짜, 시작 시간, 종료 시간 선택된 정보 전달
+          reserveList={filteredReserveDates} // 해당 날짜에 예약된 정보들 중 spaceId가 일치하는 것만 전달
           handleModalControl={handleDailyModalControl} // 장소 카드 하단 예약 진행 버튼 -> 다이아로그
         />
       );
@@ -153,7 +198,6 @@ export default function ReserveView() {
       return result;
     }, [] as JSX.Element[]);
   }
-
   return (
     <Container maxWidth={settings.themeStretch ? false : 'xl'}>
       {selectedValue === 'daily' && (
@@ -220,9 +264,9 @@ export default function ReserveView() {
         </>
       )}
       {/* ToDo: 추후 csv 작업 예정 */}
-      {/* {selectedValue === 'csv' && (
+      {selectedValue === 'csv' && (
         <ReserveCSVForm selectedValue={selectedValue} handleRadioChange={handleRadioChange} />
-      )} */}
+      )}
     </Container>
   );
 }