스케줄 디비연결

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";
+import axios from 'axios';
 
-function Cal(calledday) {
+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,9 +95,21 @@ 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 (
+    <div>{
+      console.log("reserve", reserve)}
       <Calendar
         height="100%"
         calendars={[
@@ -62,29 +130,36 @@ function Cal(calledday) {
         //     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',
+        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}
@@ -104,6 +179,7 @@ function Cal(calledday) {
           hourEnd: 23
         }}
       />
+    </div>
   )
 }