스케줄 디비연결

server/client/src/Components/Schedule.js

@@ -3,10 +3,13 @@ import Calendar from '@toast-ui/react-calendar';
 import "tui-calendar/dist/tui-calendar.css";
 import "tui-date-picker/dist/tui-date-picker.css";
 import "tui-time-picker/dist/tui-time-picker.css";
-  
-function Cal(calledday) {
+import axios from 'axios';
+
+function Cal(props) {
   const calendarRef = useRef();
-  const [day, setDay] = useState(calledday);
+  const [reserve, setReserve] = useState([]);
+  // const [day, setDay] = useState(props.calledday);
+  const [day, setDay] = useState(props.day);
   const [myTheme, setMyTheme] = useState({
     'common.dayname.color': '#333',
     'common.today.color': '#333',
@@ -15,6 +18,59 @@ function Cal(calledday) {
     // Theme object to extends default dark theme.
   });
 
+  const yj = [
+    {
+      id: 'a',
+      calendarId: 'Subject',
+      category: 'time',
+      start: '2020-10-27T11:00:00',
+      end: '2020-10-27T12:00:00',
+    },
+    {
+      id: 'b',
+      calendarId: 'Subject',
+      category: 'time',
+      start: '2020-10-28T10:00:00',
+      end: '2020-10-28T11:00:00',
+    },
+    {
+      id: '3',
+      calendarId: 'Subject',
+      category: 'time',
+      start: '2020-10-29T11:00:00',
+      end: '2020-10-29T15:00:00',
+    }
+  ]
+
+  function getReserve(room) {
+    console.log("room", room)
+    // setReserve({
+    //   id: room,
+    //   calendarId: 'Subject',
+    //   category: 'time',
+    // })
+
+    axios.get(`/reserves/room/${room}`, {
+      headers: { authorization: localStorage.getItem('token') },
+    })
+      .then(res => {
+        const reserves = res.data.map(item => ({
+          id: item._id,
+          start: item.start,
+          end: item.end,
+          calendarId: 'Subject',
+          category: 'time',
+        }))
+        console.log("room list", res.data);
+
+        setReserve(reserves);
+        // console.log("room list",res.data);
+      })
+      .catch(err => {
+        alert(err.error)
+      });
+  }
+
   useEffect(() => {
     // const cal = calendarRef.current.getInstance();
     // cal.setDate(new Date(day));
@@ -39,71 +95,91 @@ function Cal(calledday) {
     //   return (console.log(isFocused))
     // });
 
+    // setReserve([
+    //   {
+    //         id: '3',
+    //         calendarId: 'Subject',
+    //         category: 'time',
+    //         start: '2020-10-29T11:00:00',
+    //         end: '2020-10-29T15:00:00',
+    //       }
+    // ])
+    getReserve(props.room);
   }, [day])
 
   return (
-    <Calendar
-      height="100%"
-      calendars={[
-        {
-          id: 'Subject',
-          bgColor: '#a9a9a9',
-          borderColor: '#a9a9a9',
-          isReadOnly: 'true'
-        }
-      ]}
-      
-      view="week"
-      disableDblClick={false}
-      disableClick={true}
-      isReadOnly={false}
-            // template={
-      //   popupIsAllDay=function {
-      //     return display: "none"
-      //   }
-      // }
-      schedules={[
-        {
-          id: '1',
-          calendarId: 'Subject',
-          category: 'time',
-          start: '2020-10-05T11:00:00',
-          end: '2020-10-05T12:00:00',
-        },
-        {
-          id: '2',
-          calendarId: 'Subject',
-          category: 'time',
-          start: '2020-10-09T10:00:00',
-          end: '2020-10-09T11:00:00',
-        },
-        {
-          id: '3',
-          calendarId: 'Subject',
-          category: 'time',
-          start: '2020-10-08T11:00:00',
-          end: '2020-10-08T15:00:00',
+    <div>{
+      console.log("reserve", reserve)}
+      <Calendar
+        height="100%"
+        calendars={[
+          {
+            id: 'Subject',
+            bgColor: '#a9a9a9',
+            borderColor: '#a9a9a9',
+            isReadOnly: 'true'
+          }
+        ]}
+
+        view="week"
+        disableDblClick={false}
+        disableClick={true}
+        isReadOnly={false}
+        // template={
+        //   popupIsAllDay=function {
+        //     return display: "none"
+        //   }
+        // }
+        schedules={ reserve
+          // reserve.map(item=>({id: item._id,
+          //   start: item.start,
+          //   end: item.end,
+          //   calendarId: 'Subject',
+          //   category: 'time',}))
+          // [
+          //   {
+          //     id: 'a',
+          //     calendarId: 'Subject',
+          //     category: 'time',
+          //     start: '2020-10-27T11:00:00',
+          //     end: '2020-10-27T12:00:00',
+          //   },
+          //   {
+          //     id: 'b',
+          //     calendarId: 'Subject',
+          //     category: 'time',
+          //     start: '2020-10-28T10:00:00',
+          //     end: '2020-10-28T11:00:00',
+          //   },
+          //   {
+          //     id: '3',
+          //     calendarId: 'Subject',
+          //     category: 'time',
+          //     start: '2020-10-29T11:00:00',
+          //     end: '2020-10-29T15:00:00',
+          //   }
+          // ]
         }
-      ]}
-      scheduleView={['time']}
-      taskView={false}
-      theme={myTheme}
-      timezones={[
-        {
-          timezoneOffset: 540,
-          displayLabel: 'GMT+09:00',
-          tooltip: 'Seoul'
-        },
-      ]}
-      useDetailPopup
-      useCreationPopup
-      view={"week"}
-      week={{
-        workweek: true,
-        hourStart: 8,
-        hourEnd: 23
-      }}
-    />
+        scheduleView={['time']}
+        taskView={false}
+        theme={myTheme}
+        timezones={[
+          {
+            timezoneOffset: 540,
+            displayLabel: 'GMT+09:00',
+            tooltip: 'Seoul'
+          },
+        ]}
+        useDetailPopup
+        useCreationPopup
+        view={"week"}
+        week={{
+          workweek: true,
+          hourStart: 8,
+          hourEnd: 23
+        }}
+      />
+    </div>
   )
 }